/* sunuculari.com — tasarım v12 stilleri (tools/build-design-css.py üretir; elle düzenleme, wp.css'e yaz). */

/* ═══ v5/style.css ═══ */
/* sunuculari.com v3 — taban: v2-3 Sıralama görsel dili.
   Düzen: geniş akışkan kap (1680px'e kadar), beyaz zemin, gerçek oyun görselleri.
   Yazı: Geist (arayüz + dev rakamlar) / Geist Mono (IP).
   Renk: mürekkep siyahı + oyun vurgu rengi (--acc: Oy ver, aktif seçim, grafik) + canlı yeşil. */

.sr {
  --sr-ready: 1;
  --bg: #ffffff;
  --bg-2: #f5f6f3;
  --bg-3: #eceee9;
  --card: #ffffff;
  --ink: #0f1311;
  --ink-2: #474d49;
  --ink-3: #6d756f;
  --line: #e5e8e3;
  --line-2: #d4d9d3;
  --acc: #0f1311;
  --acc-ink: #0f1311;
  --acc-soft: #eef0ec;
  --live: #129a58;
  --live-soft: #e2f4ea;
  --up: #12804b;
  --down: #c4372e;
  --warn: #b7700f;
  --warn-soft: #fbf0dc;
  --danger: #c4372e;
  --motd: #1c1f1d;
  --scrim: rgba(15, 19, 17, .34);
  --sh-1: 0 1px 2px rgba(15, 19, 17, .06), 0 1px 1px rgba(15, 19, 17, .04);
  --sh-2: 0 12px 32px -14px rgba(15, 19, 17, .22), 0 2px 6px rgba(15, 19, 17, .05);
  --sh-3: 0 40px 100px -30px rgba(15, 19, 17, .35), 0 8px 24px rgba(15, 19, 17, .08);
  --f-ui: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;
  --gut: clamp(20px, 4.5vw, 80px);
  --head: 76px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

:where(.sr) *, :where(.sr) *::before, :where(.sr) *::after { box-sizing: border-box; }
:where(.sr) img { max-width: 100%; display: block; }
:where(.sr) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:where(.sr) input { font: inherit; color: inherit; }
:where(.sr) h1, :where(.sr) h2, :where(.sr) h3, :where(.sr) h4, :where(.sr) p, :where(.sr) ol { margin: 0; }
:where(.sr) a { color: inherit; text-decoration: none; }
:where(.sr) ul, :where(.sr) ol { margin: 0; padding: 0; list-style: none; }
.sr :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.sr [hidden] { display: none !important; }
.sr .num { font-variant-numeric: tabular-nums; }
.sr .mono { font-family: var(--f-mono); }
.sr .px { image-rendering: pixelated; }

.sr-wrap { width: 100%; max-width: calc(1680px + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.sr-skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; }
.sr-skip:focus { left: 12px; }

/* ── Butonlar ──────────────────────────────────────────── */
.sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 550; font-size: 15px; letter-spacing: -.005em; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease); }
.sr-btn i { font-size: 18px; line-height: 1; }
.sr-btn:active { transform: scale(.98); }
.sr-btn--pri { background: var(--ink); color: #fff; }
.sr-btn--pri:hover { background: #2a302c; }
.sr-btn--vote { background: var(--acc); color: #fff; }
.sr-btn--vote:hover { background: var(--acc-ink); }
.sr-btn--sec { background: var(--card); border: 1px solid var(--line-2); }
.sr-btn--sec:hover { border-color: var(--ink-3); }
.sr-btn--ghost { color: var(--ink-2); padding: 0 14px; }
.sr-btn--ghost:hover { color: var(--ink); background: var(--bg-2); }
.sr-btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }
.sr-btn--lg { height: 52px; padding: 0 24px; font-size: 16px; }
.sr-btn--icon { width: 44px; padding: 0; }
.sr-btn--block { width: 100%; }
.sr-btn[disabled] { opacity: .5; cursor: not-allowed; }

.sr-ip { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-family: var(--f-mono); font-size: 14px; letter-spacing: -.01em; max-width: 100%; min-width: 0; transition: border-color .2s var(--ease), background .2s var(--ease); position: relative; overflow: hidden; }
.sr-ip:hover { border-color: var(--line-2); background: var(--card); }
.sr-ip__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; text-align: left; }
.sr-ip__c { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); font-family: var(--f-ui); font-size: 13px; font-weight: 550; color: var(--ink-2); }
.sr-ip.is-done { border-color: var(--live); background: var(--live-soft); }
.sr-ip.is-done .sr-ip__c { color: var(--live); border-color: transparent; background: transparent; }

.sr-tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--bg-2); color: var(--ink-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.sr-tag img { width: 16px; height: 16px; image-rendering: pixelated; }
.sr-tag--spon { background: var(--warn-soft); color: var(--warn); }
.sr-tag--ok { background: var(--live-soft); color: var(--live); }
.sr-tag--mctr { background: #eaeefd; color: #1f3fb8; }

.sr-live { display: inline-flex; align-items: center; gap: 8px; }
.sr-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(18, 154, 88, .45); animation: sr-pulse 2.4s infinite; flex: none; }
.sr-live.is-off::before { background: var(--ink-3); animation: none; }
@keyframes sr-pulse { 0% { box-shadow: 0 0 0 0 rgba(18, 154, 88, .4); } 70% { box-shadow: 0 0 0 7px rgba(18, 154, 88, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 154, 88, 0); } }

.sr-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.sr-ico img { width: 28px; height: 28px; image-rendering: pixelated; }
.sr-ico--img img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.sr-verified { color: #2f55e4; font-size: 18px; line-height: 1; flex: none; }

/* Oyun ikonu (resmî ikonlar, yuvarlatılmış kare) */
.sr-gi { flex: none; width: 28px; height: 28px; border-radius: 8px; overflow: hidden; display: inline-grid; place-items: center; background: var(--bg-3); }
.sr-gi img { width: 100%; height: 100%; object-fit: cover; }
.sr-gi--s { width: 20px; height: 20px; border-radius: 6px; }
.sr-gi--l { width: 40px; height: 40px; border-radius: 11px; }

.sr-ph { position: relative; overflow: hidden; background: var(--bg-3); }
.sr-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .5s var(--ease); }

/* ── Başlık: [oyun ikonu] Sunucuları ───────────────────────── */
.sr-head { position: sticky; top: 0; z-index: 60; background: #fff; transition: box-shadow .3s var(--ease); }
.sr-head.is-stuck { box-shadow: 0 1px 0 var(--line), 0 10px 30px -24px rgba(15, 19, 17, .35); }
.sr-head__in { height: var(--head); display: flex; align-items: center; gap: 20px; transition: height .3s var(--ease); }
.sr-head.is-stuck .sr-head__in { height: 64px; }
.sr-logo { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.sr-logo__slot { position: relative; width: 36px; height: 36px; border-radius: 10px; overflow: hidden; flex: none; background: var(--bg-3); box-shadow: inset 0 0 0 1px rgba(15, 19, 17, .06); }
.sr-logo__slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.sr-logo__w { font-weight: 700; font-size: 23px; letter-spacing: -.04em; line-height: 1; }
.sr-head__sp { flex: 1; }
.sr-hsearch { position: relative; width: min(440px, 34vw); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); margin-left: 12px; }
.sr-head.has-search .sr-hsearch { opacity: 1; transform: none; pointer-events: auto; }
.sr-hsearch input { width: 100%; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); padding: 0 18px 0 44px; font-size: 15px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.sr-hsearch input:focus { outline: 0; border-color: var(--ink-3); box-shadow: 0 0 0 4px var(--bg-2); }
.sr-hsearch > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 18px; pointer-events: none; }
.sr-head__act { display: flex; align-items: center; gap: 6px; }
.sr-login { padding: 0 22px; }
.sr-menu { position: relative; }
.sr-pop { position: absolute; right: 0; top: calc(100% + 10px); min-width: 280px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-3); padding: 8px; z-index: 80; }
.sr-pop a, .sr-pop button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; text-align: left; font-size: 15px; }
.sr-pop a:hover, .sr-pop button:hover { background: var(--bg-2); }
.sr-pop i { font-size: 20px; color: var(--ink-3); }
.sr-pop small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.35; }
.sr-pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.sr-user { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid var(--line); }
.sr-user img { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; image-rendering: pixelated; background: var(--bg-2); padding: 5px; }
.sr-user b { font-weight: 600; font-size: 14px; }
.sr-bell { position: relative; }
.sr-bell em { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--danger); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--bg); }
.sr-mobmenu { display: none; }
.sr-acct:not([hidden]) { display: block; }

/* Arama sonuçları (hero ve başlık ortak) */
.sr-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-3); padding: 8px; z-index: 90; max-height: 60vh; overflow: auto; text-align: left; }
.sr-results button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: 12px; text-align: left; }
.sr-results button:hover, .sr-results button.is-hl { background: var(--bg-2); }
.sr-results .sr-ph { width: 72px; height: 42px; border-radius: 8px; flex: none; }
.sr-results b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.sr-results small { color: var(--ink-3); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.sr-results p { padding: 14px 12px; color: var(--ink-3); font-size: 14px; }

/* ── Görünümler ──────────────────────────────────────── */
.sr-view { padding-bottom: 40px; }
.sr-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sr-h2 { font-size: clamp(30px, 2.9vw, 46px); line-height: 1.05; letter-spacing: -.035em; font-weight: 680; text-wrap: balance; }
.sr-lede { font-size: clamp(16.5px, 1.2vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
.sr-sec { padding-top: clamp(72px, 8vw, 128px); }
.sr-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.sr-sechead__l { display: grid; gap: 10px; min-width: 0; }
.sr-meta { color: var(--ink-3); font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sr-meta b { color: var(--ink); font-weight: 600; }

/* ── Hero ("güzel bir giriş") ─────────────────────────────── */
.sr-hero { position: relative; margin-top: 12px; height: clamp(600px, 46vw, 700px); border-radius: var(--r-xl); overflow: hidden; background: var(--bg-3); isolation: isolate; }
.sr-hero__img { position: absolute; inset: 0; }
.sr-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-hero__panel { position: absolute; left: clamp(20px, 2.6vw, 44px); bottom: clamp(20px, 2.6vw, 44px); width: min(620px, calc(100% - 40px)); background: var(--card); border-radius: 26px; box-shadow: var(--sh-3); padding: 34px 36px 30px; display: grid; gap: 22px; z-index: 2; }
.sr-hero__h { font-size: clamp(42px, 4.4vw, 74px); line-height: 1; letter-spacing: -.048em; font-weight: 720; }
.sr-hero__h .l { display: block; }
.sr-roll { display: block; position: relative; height: 1.08em; overflow: visible; clip-path: inset(0 -100vw 0 -100vw); margin: .02em 0; }
.sr-roll__w { display: inline-flex; align-items: center; gap: .18em; position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--roll, var(--ink)); will-change: transform; }
.sr-roll__w .sr-gi { width: .82em; height: .82em; border-radius: .2em; }
.sr-hero__sub { color: var(--ink-2); font-size: 17px; line-height: 1.5; max-width: 46ch; }
.sr-qbox { position: relative; }
.sr-qbox > i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--ink-3); pointer-events: none; }
.sr-qbox input { width: 100%; height: 60px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); padding: 0 130px 0 52px; font-size: 16.5px; transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.sr-qbox input:focus { outline: 0; background: var(--card); border-color: var(--ink-3); box-shadow: 0 0 0 5px var(--bg-2); }
.sr-qbox .sr-btn { position: absolute; right: 7px; top: 7px; height: 46px; }
.sr-hero__stats { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 2px; }
.sr-stat b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.sr-stat span { color: var(--ink-3); font-size: 14px; }
.sr-hero__feat { position: absolute; right: clamp(20px, 2.6vw, 44px); bottom: clamp(20px, 2.6vw, 44px); z-index: 2; width: 340px; background: var(--card); border-radius: 20px; box-shadow: var(--sh-3); padding: 16px 18px; display: block; text-align: left; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.sr-feat__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; }
.sr-feat__in.is-next { position: absolute; left: 18px; right: 18px; top: 16px; }
.sr-hero__feat:hover { transform: translateY(-2px); }
.sr-hero__feat .sr-eyebrow { grid-column: 1 / -1; font-size: 12px; margin-bottom: 4px; }
.sr-hero__feat b { font-size: 17px; font-weight: 650; letter-spacing: -.02em; display: flex; align-items: center; gap: 6px; line-height: 1.25; min-width: 0; }
.sr-hero__feat b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-hero__feat small { display: block; color: var(--ink-3); font-size: 13.5px; }
.sr-feat__in > i { font-size: 20px; color: var(--ink-3); }
.sr-hero__feat [data-feat] { display: contents; }
.sr-hero__cred { position: absolute; right: clamp(20px, 2.6vw, 44px); top: 18px; z-index: 2; background: rgba(255, 255, 255, .88); color: #2a2f2b; font-size: 12px; padding: 4px 10px; border-radius: 999px; }

/* ── Büyük kategoriler (Keşif bento + detaylı alt panel) ─────── */
.sr-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.4vw, 24px); align-items: stretch; }
.sr-cat { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); min-width: 0; }
.sr-cat:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.sr-cat__img { aspect-ratio: 16 / 9; flex: none; }
.sr-cat__img img { position: absolute; inset: 0; }
.sr-cat:hover .sr-cat__img img { transform: scale(1.03); }
.sr-cat__p { display: grid; gap: 16px; padding: 18px 20px 20px; align-content: start; }
.sr-cat__h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sr-cat__h.no-ic { grid-template-columns: minmax(0, 1fr) auto; }
.sr-cat__h .sr-gi { width: 36px; height: 36px; border-radius: 10px; }
.sr-cat__h .sr-gi.is-item { background: var(--bg-2); border: 1px solid var(--line); }
.sr-cat__h .sr-gi.is-item img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.sr-cat__tt { min-width: 0; display: grid; }
.sr-cat__tt h3 { font-size: 21px; font-weight: 680; letter-spacing: -.025em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-cat__tt .sr-live { font-size: 14px; color: var(--ink-2); gap: 7px; }
.sr-cat__tt .sr-live b { font-weight: 650; color: var(--ink); }
.sr-cat__go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--ink); font-size: 18px; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.sr-cat:hover .sr-cat__go { background: var(--ink); color: #fff; transform: translateX(2px); }
.sr-cat__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sr-cat__nums > div { padding: 11px 0 10px; min-width: 0; }
.sr-cat__nums > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.sr-cat__nums b { display: flex; align-items: center; gap: 3px; font-size: 19px; font-weight: 680; letter-spacing: -.025em; line-height: 1.2; white-space: nowrap; }
.sr-cat__nums span { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.3; white-space: nowrap; }
.sr-cat__nums .is-up { color: var(--up); }
.sr-cat__nums .is-down { color: var(--down); }
.sr-cat__nums .is-up i, .sr-cat__nums .is-down i { font-size: 18px; margin-left: -3px; }
.sr-cat__extra { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-2); font-size: 14px; margin-top: -4px; }
.sr-cat__extra span { display: inline-flex; align-items: center; gap: 6px; }
.sr-cat__extra i { color: var(--ink-3); font-size: 16px; }
.sr-cat__lbl { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.sr-cat__top ol { display: grid; }
.sr-top { display: grid; grid-template-columns: 18px 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; cursor: pointer; transition: background .18s var(--ease); }
.sr-top:hover, .sr-top.is-pv { background: var(--bg-2); }
.sr-top__n { font-weight: 700; font-size: 15px; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.sr-top .sr-ico { width: 30px; height: 30px; border-radius: 8px; }
.sr-top .sr-ico img { width: 20px; height: 20px; }
.sr-top .sr-ico--img img { width: 100%; height: 100%; }
.sr-top__nm { font-size: 15px; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-top__on { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; gap: 6px; }
.sr-top__on::before { width: 6px; height: 6px; animation: none; }
.sr-cat__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-cat__chips .sr-tag { height: 30px; font-size: 13.5px; background: var(--bg-2); }
.sr-cat__chips .sr-tag em { font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sr-cat__spark { position: relative; height: 64px; }
.sr-cat__spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sr-cat__spark small { position: absolute; right: 0; top: -2px; font-size: 12.5px; color: var(--ink-3); background: var(--card); padding-left: 6px; }
.sr-cat__spark em { position: absolute; left: 0; top: -2px; font-style: normal; font-size: 12.5px; color: var(--ink-3); background: var(--card); padding-right: 6px; }

.sr-cat--xl { grid-column: span 2; grid-row: span 2; }
.sr-cat--xl .sr-cat__img { aspect-ratio: auto; flex: 1 1 auto; min-height: 300px; }
.sr-cat--xl .sr-cat__p { padding: 22px 26px 24px; gap: 18px; }
.sr-cat--xl .sr-cat__tt h3 { font-size: 30px; letter-spacing: -.035em; }
.sr-cat--xl .sr-cat__h .sr-gi { width: 46px; height: 46px; border-radius: 12px; }
.sr-cat--xl .sr-cat__nums b { font-size: 24px; }
.sr-cat--xl .sr-cat__spark { height: 76px; }
.sr-cat--xl .sr-top { padding-block: 7px; }
.sr-cat--w { grid-column: span 2; flex-direction: row; }
.sr-cat--w .sr-cat__img { aspect-ratio: auto; width: 46%; flex: none; min-height: 100%; }
.sr-cat--w .sr-cat__p { flex: 1; min-width: 0; }
.sr-cat--full { grid-column: 1 / -1; flex-direction: row; }
.sr-cat--full .sr-cat__img { aspect-ratio: auto; width: 50%; flex: none; }
.sr-cat--full .sr-cat__p { flex: 1; min-width: 0; padding: 26px 30px; }
.sr-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.sr-more > span { color: var(--ink-3); font-size: 14px; margin-right: 6px; }
.sr-more button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 14.5px; font-weight: 550; transition: border-color .2s var(--ease), background .2s var(--ease); }
.sr-more button:hover { border-color: var(--ink-3); }
.sr-more button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sr-more button img { width: 22px; height: 22px; image-rendering: pixelated; }
.sr-more button em { font-style: normal; color: var(--ink-3); font-size: 13px; }
.sr-more button.is-on em { color: rgba(255, 255, 255, .7); }
.sr-cat.is-on { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); }

/* ── Kürsü ───────────────────────────────────────────── */
.sr-podium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr); gap: clamp(20px, 2.2vw, 40px); align-items: end; }
.sr-pod { display: grid; gap: 22px; min-width: 0; }
.sr-pod .sr-ph { border-radius: var(--r-l); aspect-ratio: 4 / 3; cursor: pointer; }
.sr-pod--1 .sr-ph { aspect-ratio: 5 / 4; }
.sr-pod .sr-ph:hover img { transform: scale(1.035); }
.sr-pod__n { position: absolute; left: 0; bottom: 0; background: var(--bg); border-top-right-radius: 26px; padding: 14px 22px 0 0; font-size: clamp(88px, 8vw, 140px); font-weight: 760; letter-spacing: -.075em; line-height: .78; }
.sr-pod__n::before, .sr-pod__n::after { content: ""; position: absolute; width: 26px; height: 26px; background: transparent; }
.sr-pod__n::before { left: 0; top: -26px; border-bottom-left-radius: 26px; box-shadow: -8px 8px 0 8px var(--bg); }
.sr-pod__n::after { right: -26px; bottom: 0; border-bottom-left-radius: 26px; box-shadow: -8px 8px 0 8px var(--bg); }
.sr-pod__body { display: grid; gap: 14px; }
.sr-pod__t { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sr-pod__name { font-size: clamp(22px, 1.8vw, 28px); font-weight: 680; letter-spacing: -.03em; line-height: 1.15; cursor: pointer; }
.sr-pod__name .sr-verified { display: inline-block; vertical-align: .08em; margin-left: 6px; }
.sr-card__m { color: var(--ink-3); font-size: 14.5px; margin-top: 4px; }
.sr-pod__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-pod__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.sr-pod__nums b { display: block; font-size: 21px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.sr-pod__nums span { color: var(--ink-3); font-size: 13px; }
.sr-pod__act { display: flex; gap: 10px; flex-wrap: wrap; }
.sr-pod__act .sr-ip { flex: 1 1 200px; }
.sr-pod--1 { order: 2; }
.sr-pod--2 { order: 1; }
.sr-pod--3 { order: 3; }

/* ── Filtre rayı + liste ───────────────────────────────── */
.sr-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(32px, 3.6vw, 64px); align-items: start; }
.sr-rail { position: sticky; top: 88px; display: grid; gap: 30px; max-height: calc(100vh - 110px); overflow: auto; padding: 4px 6px 24px 2px; scrollbar-width: thin; }
.sr-rail__h { display: flex; justify-content: space-between; align-items: baseline; }
.sr-rail__h h3 { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.sr-rail__h button { font-size: 14px; color: var(--ink-3); }
.sr-rail__h button:hover { color: var(--ink); text-decoration: underline; }
.sr-fg { display: grid; gap: 12px; }
.sr-fg__l { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.sr-fg__l [data-term] { color: var(--ink-3); cursor: help; font-size: 15px; }
.sr-checks { display: grid; gap: 2px; }
.sr-check { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; font-size: 15px; color: var(--ink-2); text-align: left; width: 100%; transition: background .15s var(--ease); }
.sr-check:hover { background: var(--bg-2); color: var(--ink); }
.sr-check__b { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; transition: background .15s var(--ease), border-color .15s var(--ease); }
.sr-check__b i { font-size: 14px; color: #fff; opacity: 0; }
.sr-check.is-on { color: var(--ink); }
.sr-check.is-on .sr-check__b { background: var(--ink); border-color: var(--ink); }
.sr-check.is-on .sr-check__b i { opacity: 1; }
.sr-check img { width: 22px; height: 22px; image-rendering: pixelated; }
.sr-check em { margin-left: auto; font-style: normal; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.sr-check.is-zero { opacity: .45; }
.sr-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-seg button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); transition: all .18s var(--ease); }
.sr-seg button:hover { border-color: var(--line-2); color: var(--ink); }
.sr-seg button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.sr-tgl { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; font-size: 15px; color: var(--ink-2); padding: 4px 0; }
.sr-tgl__s { width: 44px; height: 26px; border-radius: 13px; background: var(--line-2); position: relative; transition: background .2s var(--ease); flex: none; }
.sr-tgl__s::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform .25s var(--ease); }
.sr-tgl.is-on { color: var(--ink); }
.sr-tgl.is-on .sr-tgl__s { background: var(--live); }
.sr-tgl.is-on .sr-tgl__s::after { transform: translateX(18px); }
.sr-rail__x, .sr-rail__go { display: none !important; }
.sr-rail.is-sheet .sr-rail__x, .sr-rail.is-sheet .sr-rail__go { display: inline-flex !important; }

.sr-lhead { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.sr-lhead h2 { font-size: clamp(26px, 2.2vw, 34px); font-weight: 680; letter-spacing: -.03em; }
.sr-lhead p { color: var(--ink-3); font-size: 15px; }
.sr-sort { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-2); gap: 2px; }
.sr-sort button { height: 38px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; font-weight: 550; color: var(--ink-2); transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.sr-sort button.is-on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.sr-fbtn { display: none; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sr-chips button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 550; }
.sr-chips button img { width: 16px; height: 16px; image-rendering: pixelated; }
.sr-chips button i { font-size: 15px; opacity: .8; }
.sr-group { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 18px 0 8px; display: flex; align-items: center; gap: 10px; }
.sr-group span { text-transform: none; letter-spacing: 0; font-weight: 450; }

.sr-rows { display: grid; }
.sr-row { border-top: 1px solid var(--line); position: relative; }
.sr-rows .sr-row:last-child { border-bottom: 1px solid var(--line); }
.sr-row__m { display: grid; grid-template-columns: 56px 168px minmax(0, 1fr) 150px 226px 36px; gap: 20px; align-items: center; padding: 14px 8px; border-radius: 16px; cursor: pointer; transition: background .2s var(--ease); }
.sr-row__m:hover, .sr-row__m.is-pv { background: var(--bg-2); }
.sr-rank { font-size: 40px; font-weight: 720; letter-spacing: -.06em; line-height: 1; text-align: center; position: relative; overflow: hidden; height: 44px; font-variant-numeric: tabular-nums; }
.sr-rank span { display: block; }
.sr-rank--spon { font-size: 22px; color: var(--warn); height: auto; display: grid; place-items: center; }
.sr-row .sr-ph { width: 168px; aspect-ratio: 16 / 9; border-radius: 12px; }
.sr-ph .sr-ico--ov { position: absolute; left: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .94); border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.sr-ph .sr-ico--ov img { width: 22px; height: 22px; }
.sr-ph .sr-ico--ov.sr-ico--img img { width: 100%; height: 100%; }
.sr-row .sr-ip { width: 100%; font-size: 13px; padding-left: 12px; gap: 6px; }
.sr-row .sr-ip__c span { display: none; }
.sr-row .sr-ip__c { padding: 0 8px; }
.sr-row__m:hover .sr-ph img { transform: scale(1.05); }
.sr-row__main { display: grid; gap: 8px; min-width: 0; }
.sr-row__name { font-size: 19px; font-weight: 640; letter-spacing: -.02em; line-height: 1.25; display: flex; align-items: center; gap: 7px; min-width: 0; }
.sr-row__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-row__tags { display: flex; gap: 6px; flex-wrap: wrap; overflow: hidden; max-height: 28px; }
.sr-row__ver { color: var(--ink-3); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; }
.sr-row__st { display: grid; gap: 4px; }
.sr-row__on { display: flex; align-items: center; gap: 10px; }
.sr-row__on b { font-size: 18px; font-weight: 650; letter-spacing: -.02em; display: inline-block; }
.sr-row__on svg { width: 64px; height: 22px; flex: none; }
.sr-row__v { color: var(--ink-3); font-size: 14px; }
.sr-row__v b { color: var(--ink-2); font-weight: 600; }
.sr-row__mst { display: none; gap: 14px; align-items: center; font-size: 14px; color: var(--ink-3); }
.sr-row__mst b { color: var(--ink); font-weight: 650; }
.sr-row__go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); transition: transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.sr-row__m:hover .sr-row__go { background: var(--card); color: var(--ink); transform: translateX(2px); }
.sr-empty { padding: 64px 24px; text-align: center; color: var(--ink-3); display: grid; gap: 14px; justify-items: center; }
.sr-empty i { font-size: 34px; color: var(--ink-3); }
.sr-rowsfoot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; color: var(--ink-3); font-size: 14.5px; }

/* Merkez: sahipler bandı */
.sr-owner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 28px); }
.sr-ocard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 42%; border-radius: 24px; overflow: hidden; background: var(--bg-2); min-height: 280px; }
.sr-ocard__b { padding: clamp(24px, 2.6vw, 40px); display: grid; gap: 14px; align-content: center; }
.sr-ocard h3 { font-size: clamp(24px, 2vw, 32px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.sr-ocard p { color: var(--ink-2); font-size: 15.5px; max-width: 40ch; }
.sr-ocard .sr-ph { height: 100%; }
.sr-ocard .sr-ph img { position: absolute; inset: 0; }
.sr-ocard__a { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ── Hover önizlemesi (Vitrin'den) ─────────────────────── */
.sr-pv { position: fixed; z-index: 70; width: 420px; background: var(--card); border-radius: 20px; box-shadow: 0 30px 80px -24px rgba(15, 19, 17, .42), 0 6px 18px rgba(15, 19, 17, .1); overflow: hidden; will-change: transform, opacity; }
.sr-pv__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-3); cursor: pointer; }
.sr-pv__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.sr-pv__media img.is-on { opacity: 1; }
.sr-pv__pill { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .95); font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
.sr-pv__dots { position: absolute; right: 12px; bottom: 16px; z-index: 1; display: flex; gap: 5px; }
.sr-pv__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .6); transition: width .3s var(--ease), background .3s var(--ease); }
.sr-pv__dots i.is-on { width: 16px; background: #fff; }
.sr-pv__b { padding: 16px 18px 18px; display: grid; gap: 12px; }
.sr-pv__t { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.sr-pv__t b { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 660; letter-spacing: -.02em; line-height: 1.25; }
.sr-pv__t b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-pv__t small { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-pv__motd { background: var(--motd); border-radius: 10px; padding: 8px 12px; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-pv__motd > div { overflow: hidden; text-overflow: ellipsis; }
.sr-pv__desc { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.sr-pv__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sr-pv__stats div { background: var(--bg-2); border-radius: 12px; padding: 9px 12px; min-width: 0; }
.sr-pv__stats b { display: block; font-size: 16px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-pv__stats small { color: var(--ink-3); font-size: 12.5px; }
.sr-pv__a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.sr-pv__a .sr-ip { height: 44px; }
.sr-pv__a .sr-ip__c span { display: none; }
.sr-pv__a .sr-ip__c { padding: 0 8px; }

/* ── Altbilgi ──────────────────────────────────────────── */
.sr-foot { margin-top: clamp(80px, 9vw, 144px); border-top: 1px solid var(--line); padding: 48px 0 40px; background: var(--bg); }
.sr-foot__games { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.sr-foot__games button { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; font-weight: 550; transition: border-color .2s var(--ease); }
.sr-foot__games button:hover { border-color: var(--ink-3); }
.sr-foot__games button.is-on { border-color: var(--ink); }
.sr-foot__g { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.sr-foot h4 { font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.sr-foot li { margin-bottom: 9px; }
.sr-foot li a, .sr-foot li button { color: var(--ink-2); font-size: 15px; text-align: left; overflow-wrap: anywhere; }
.sr-foot li a:hover, .sr-foot li button:hover { color: var(--ink); text-decoration: underline; }
.sr-foot__about p { color: var(--ink-2); max-width: 44ch; font-size: 15px; }
.sr-foot__b { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--ink-3); font-size: 13.5px; align-items: center; }
.sr-foot__b .sr-tag { height: 24px; font-size: 12px; }

/* ── Duyarlılık ────────────────────────────────────────── */
@media (max-width: 1360px) {
  .sr-row__m { grid-template-columns: 48px 150px minmax(0, 1fr) 140px 190px 36px; gap: 18px; }
  .sr-row .sr-ph { width: 150px; }
  .sr-hsearch { width: 300px; }
}
@media (max-width: 1280px) {
  .sr-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-cat--xl { grid-column: 1 / -1; grid-row: auto; }
  .sr-cat--xl .sr-cat__img { aspect-ratio: 21 / 9; flex: none; min-height: 0; }
  .sr-cat--w, .sr-cat--full { grid-column: auto; flex-direction: column; }
  .sr-cat--w .sr-cat__img, .sr-cat--full .sr-cat__img { width: auto; aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 1180px) {
  .sr-body { grid-template-columns: minmax(0, 1fr); }
  .sr-rail { display: none; }
  .sr-rail.is-sheet { display: grid; position: fixed; inset: auto 0 0 0; top: auto; max-height: 82vh; z-index: 110; background: var(--bg); border-radius: 24px 24px 0 0; padding: 22px var(--gut) calc(24px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--sh-3); }
  .sr-fbtn { display: inline-flex; }
  .sr-hb span { display: none; }
  .sr-hb { width: 44px; padding: 0; }
  .sr-hero__feat { width: 300px; }
}
@media (max-width: 980px) {
  .sr { --head: 64px; }
  .sr-hsearch { display: none; }
  .sr-hero { height: auto; overflow: visible; background: none; border-radius: 0; }
  .sr-hero__img { position: relative; height: 340px; border-radius: 22px; overflow: hidden; }
  .sr-hero__panel { position: relative; left: auto; bottom: auto; width: auto; margin: -72px 12px 0; padding: 26px 24px 24px; }
  .sr-hero__feat { position: relative; right: auto; bottom: auto; width: calc(100% - 24px); margin: 14px 12px 0; box-shadow: var(--sh-2); border: 1px solid var(--line); }
  .sr-hero__cred { top: 12px; right: 12px; }
  .sr-podium { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(290px, 82%); overflow-x: auto; scroll-snap-type: x mandatory; align-items: start; scrollbar-width: none; }
  .sr-podium > * { scroll-snap-align: start; }
  .sr-pod--1 .sr-ph, .sr-pod .sr-ph { aspect-ratio: 4 / 3; }
  .sr-pod--1, .sr-pod--2, .sr-pod--3 { order: 0; }
  .sr-foot__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-foot__about { grid-column: 1 / -1; }
  .sr-row__m { grid-template-columns: 44px 150px minmax(0, 1fr) 140px 36px; }
  .sr-row__ipc { display: none; }
  .sr-owner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .sr { font-size: 16px; }
  .sr-head__in { gap: 8px; }
  .sr-logo__w { font-size: 21px; }
  .sr-logo__slot { width: 32px; height: 32px; border-radius: 9px; }
  .sr-hb { display: none; }
  .sr-mobmenu { display: block; }
  .sr-login { padding: 0 16px; height: 40px; font-size: 14.5px; }
  .sr-user b { display: none; }
  .sr-user { padding: 0 5px; }
  .sr-pop { position: fixed; left: 12px; right: 12px; top: 64px; min-width: 0; }
  .sr-hero__img { height: 300px; margin-inline: calc(var(--gut) * -1); border-radius: 0; }
  .sr-hero__panel { margin: -56px 0 0; padding: 22px 20px 22px; gap: 18px; border-radius: 22px; }
  .sr-hero__h { font-size: 40px; }
  .sr-qbox input { height: 54px; padding-right: 18px; font-size: 16px; }
  .sr-qbox .sr-btn { display: none; }
  .sr-hero__stats { gap: 22px; }
  .sr-stat b { font-size: 22px; }
  .sr-hero__feat { margin: 12px 0 0; width: 100%; }
  .sr-bento { grid-template-columns: minmax(0, 1fr); }
  .sr-cat--xl .sr-cat__img { aspect-ratio: 16 / 10; }
  .sr-cat--xl .sr-cat__tt h3 { font-size: 26px; }
  .sr-cat--xl .sr-cat__p { padding: 18px 20px 20px; }
  .sr-row__m { grid-template-columns: 26px 100px minmax(0, 1fr) 24px; gap: 10px; padding: 12px 2px; }
  .sr-row .sr-ph { width: 100px; border-radius: 10px; }
  .sr-ph .sr-ico--ov { width: 26px; height: 26px; left: 5px; bottom: 5px; border-radius: 7px; }
  .sr-ph .sr-ico--ov img { width: 17px; height: 17px; }
  .sr-row__st { display: none; }
  .sr-row__mst { display: flex; }
  .sr-row__main { gap: 4px; }
  .sr-rank { font-size: 22px; height: 26px; }
  .sr-row__name { font-size: 16.5px; }
  .sr-row__tags { display: none; }
  .sr-row__go { width: 24px; }
  .sr-lhead { align-items: flex-start; }
  .sr-sort { width: 100%; overflow-x: auto; }
  .sr-sort button { flex: 1; padding: 0 10px; }
  .sr-pod__n { font-size: 84px; }
  .sr-ocard { grid-template-columns: minmax(0, 1fr); }
  .sr-ocard .sr-ph { height: 180px; order: -1; }
  .sr-foot__games button { height: 42px; font-size: 14px; }
}
@media (max-width: 360px) {
  .sr-row__m { grid-template-columns: 22px 84px minmax(0, 1fr) 22px; gap: 8px; }
  .sr-row .sr-ph { width: 84px; }
  .sr-logo__w { font-size: 19px; }
  .sr-hero__h { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .sr *, .sr *::before, .sr *::after { animation: none !important; transition: none !important; }
}
.sr-crumb { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sr-crumb button { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--ink); padding: 4px 10px 4px 8px; margin-left: -8px; border-radius: 999px; transition: background .2s var(--ease); }
.sr-crumb button:hover { background: var(--bg-2); }
.sr-crumb button i { font-size: 16px; }

/* ═══ v5/style-2.css ═══ */
/* sunuculari.com v3 — tekil sunucu sayfası (v2-2 Keşif yapısı, Geist ile), galeri,
   modallar, Sunucu Satın Al paneli ve bildirimler. */

/* ── Tekil sunucu sayfası ──────────────────────────────── */
.sr-dt { padding-top: 22px; }
.sr-back { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px; margin-left: -10px; border-radius: 999px; font-size: 15px; font-weight: 550; color: var(--ink-2); }
.sr-back:hover { background: var(--bg-2); color: var(--ink); }
.sr-dt__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 14px; }
.sr-dt__t { display: flex; align-items: center; gap: 16px; font-size: clamp(32px, 3vw, 46px); font-weight: 720; letter-spacing: -.04em; line-height: 1.08; }
.sr-dt__t .sr-ico { width: 56px; height: 56px; border-radius: 15px; }
.sr-dt__t .sr-ico img { width: 36px; height: 36px; }
.sr-dt__t .sr-ico--img img { width: 100%; height: 100%; }
.sr-dt__t .sr-verified { font-size: 28px; }
.sr-dt__meta { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 16px; color: var(--ink-2); }
.sr-dt__meta > span { display: inline-flex; align-items: center; gap: 8px; }
.sr-dt__meta > span + span::before { content: '·'; margin-right: 6px; color: var(--line-2); }
.sr-dt__acts { display: flex; gap: 6px; flex: none; }
.sr-act { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; font-size: 15px; font-weight: 550; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: transparent; }
.sr-act:hover { background: var(--bg-2); text-decoration-color: currentColor; }
.sr-act i.ri-heart-3-fill { color: #e0294a; }

.sr-mosaic { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: clamp(340px, 34vw, 560px); margin-top: 28px; border-radius: var(--r-xl); overflow: hidden; }
.sr-mosaic__i { position: relative; overflow: hidden; background: var(--bg-3); cursor: zoom-in; }
.sr-mosaic__i:first-child { grid-row: span 2; }
.sr-mosaic__i img { width: 100%; height: 100%; object-fit: cover; transition: filter .3s var(--ease), transform .9s var(--ease); }
.sr-mosaic__i:hover img { filter: brightness(.9); }
.sr-mosaic__all { position: absolute; right: 22px; bottom: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px; background: #fff; border: 1px solid var(--ink); font-size: 14.5px; font-weight: 600; box-shadow: var(--sh-1); }
.sr-mosaic__all:hover { background: var(--bg-2); }
.sr-mcar { display: none; }

/* Sticky bölüm sekmeleri (Vitrin'den) */
.sr-dnav { position: sticky; top: 64px; z-index: 20; background: #fff; margin-top: 28px; border-bottom: 1px solid var(--line); }
.sr-dnav__in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; }
.sr-dnav__in::-webkit-scrollbar { display: none; }
.sr-dnav a { flex: none; height: 38px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 550; color: var(--ink-2); white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease); }
.sr-dnav a:hover { color: var(--ink); background: var(--bg-2); }
.sr-dnav a.is-on { background: var(--ink); color: #fff; }

.sr-dt__cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(40px, 6vw, 96px); margin-top: 36px; align-items: start; }
.sr-blk { padding: 36px 0; border-top: 1px solid var(--line); scroll-margin-top: 140px; }
.sr-blk:first-child { border-top: 0; padding-top: 0; }
.sr-blk__t { font-size: 24px; font-weight: 680; letter-spacing: -.025em; margin-bottom: 20px; }
.sr-blk__p { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 68ch; }
.sr-owner2 { display: flex; align-items: center; gap: 16px; }
.sr-owner2 img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.sr-owner2 b { display: block; font-size: 18px; font-weight: 650; }
.sr-owner2 span { color: var(--ink-3); font-size: 15px; }
.sr-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sr-badge { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; font-weight: 550; }
.sr-badge i { font-size: 16px; color: #2f55e4; }
.sr-badge--own i { color: var(--warn); }
.sr-badge--ok i { color: var(--live); }
.sr-his { display: grid; gap: 24px; }
.sr-hi { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start; }
.sr-hi__i { width: 44px; height: 44px; display: grid; place-items: center; }
.sr-hi__i img { width: 34px; height: 34px; image-rendering: pixelated; }
.sr-hi__i i { font-size: 26px; color: var(--ink-2); }
.sr-hi b { display: block; font-size: 17px; font-weight: 650; }
.sr-hi span { color: var(--ink-3); }

.sr-motd2 { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: #24262b; color: #fff; font-family: var(--f-mono); font-size: 14px; line-height: 1.5; }
.sr-motd2__ic { width: 64px; height: 64px; border-radius: 6px; background: #3a3d44; display: grid; place-items: center; overflow: hidden; }
.sr-motd2__ic img { width: 44px; height: 44px; image-rendering: pixelated; }
.sr-motd2__n { font-family: var(--f-ui); font-weight: 650; font-size: 15px; }
.sr-motd2__r { align-self: start; text-align: right; color: #aaa; font-size: 13px; white-space: nowrap; }
.sr-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-left: 8px; vertical-align: -2px; }
.sr-bars i { width: 3px; background: #55ff55; }
.sr-motd .b, .sr-motd2 .b, .sr-pv__motd .b { font-weight: 700; }
.sr-motd .i, .sr-motd2 .i, .sr-pv__motd .i { font-style: italic; }
.sr-motd .u, .sr-motd2 .u { text-decoration: underline; }
.sr-motd .s, .sr-motd2 .s { text-decoration: line-through; }
.sr-note2 { margin-top: 10px; font-size: 14px; color: var(--ink-3); }

.sr-chart { position: relative; }
.sr-chart__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sr-chart svg { display: block; width: 100%; height: 220px; overflow: visible; }
.sr-chart text { fill: var(--ink-3); font-size: 11.5px; font-family: var(--f-mono); }
.sr-chart__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.sr-chart__nums b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.sr-chart__nums span { font-size: 14px; color: var(--ink-3); }

.sr-ev { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); }
.sr-ev img { width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; object-fit: cover; }
.sr-ev__k { font-size: 12.5px; font-weight: 650; color: var(--acc-ink); text-transform: uppercase; letter-spacing: .07em; }
.sr-ev__t { margin-top: 4px; font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.sr-ev__d { margin-top: 2px; color: var(--ink-3); }
.sr-ev__cd { font-family: var(--f-mono); font-size: 15px; font-weight: 500; margin-top: 8px; }
.sr-upd { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
.sr-upd:first-of-type { border-top: 0; padding-top: 0; }
.sr-upd span { font-size: 14px; color: var(--ink-3); }
.sr-upd b { font-weight: 650; font-size: 17px; }
.sr-rlist { display: grid; }
.sr-r { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.sr-r:first-child { border-top: 0; }
.sr-r img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.sr-r b { display: block; font-weight: 650; }
.sr-r span { color: var(--ink-3); font-size: 15px; }
.sr-cmts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.sr-cmt__h { display: flex; align-items: center; gap: 12px; }
.sr-cmt__h img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.sr-cmt__h b { display: block; font-weight: 650; }
.sr-cmt__h span { font-size: 14px; color: var(--ink-3); }
.sr-cmt p { margin-top: 12px; color: var(--ink-2); }
.sr-report { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14.5px; font-weight: 550; color: var(--ink-3); text-decoration: underline; text-underline-offset: 4px; }
.sr-report:hover { color: var(--danger); }

/* Sticky katıl kartı */
.sr-join { position: sticky; top: 140px; }
.sr-join__card { padding: 26px; border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; box-shadow: 0 8px 28px rgba(16, 18, 24, .10); }
.sr-join__live { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.sr-join__on { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 720; letter-spacing: -.03em; line-height: 1; }
.sr-join__on .sr-live::before { width: 10px; height: 10px; }
.sr-join__max { color: var(--ink-3); font-size: 14px; line-height: 1.3; }
.sr-join__spark { width: 110px; height: 34px; }
.sr-join__spark svg { width: 100%; height: 100%; overflow: visible; display: block; }
.sr-join__ip { margin-top: 18px; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
.sr-join__ipr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 12px 12px 16px; }
.sr-join__ipl { font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.sr-join__ipv { margin-top: 2px; font-family: var(--f-mono); font-size: 17px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-join__facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-2); }
.sr-join__f { padding: 10px 16px; min-width: 0; }
.sr-join__f + .sr-join__f { border-left: 1px solid var(--line-2); }
.sr-join__f b { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 650; }
.sr-join__f span { font-size: 15px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; border-radius: 14px; font-size: 16.5px; font-weight: 650; transition: background-color .2s, transform .15s var(--ease), border-color .2s; }
.sr-cta:active { transform: scale(.985); }
.sr-cta--copy { height: 44px; width: auto; padding: 0 16px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 15px; }
.sr-cta--copy:hover { background: #2a302c; }
.sr-cta--copy.is-done { background: var(--live); }
.sr-cta--vote { margin-top: 14px; background: var(--acc); color: #fff; }
.sr-cta--vote:hover { background: var(--acc-ink); }
.sr-cta--ghost { margin-top: 10px; border: 1px solid var(--line-2); background: #fff; }
.sr-cta--ghost:hover { border-color: var(--ink); }
.sr-join__note { margin-top: 14px; text-align: center; font-size: 14px; color: var(--ink-3); }
.sr-join__rank { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.sr-join__rank b { font-weight: 700; }
.sr-join__more { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.sr-mbar { display: none; }

/* Tam ekran galeri */
.sr-lb { position: fixed; inset: 0; z-index: 130; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #0d0e10; color: #fff; }
.sr-lb__h { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 24px; }
.sr-lb__x { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; font-weight: 600; color: #fff; }
.sr-lb__x:hover { background: rgba(255, 255, 255, .1); }
.sr-lb__c { font-family: var(--f-mono); font-size: 14px; opacity: .8; }
.sr-lb__stage { position: relative; display: grid; place-items: center; padding: 0 88px; min-height: 0; }
.sr-lb__img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain; }
.sr-lb__nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); color: #fff; display: grid; place-items: center; font-size: 22px; }
.sr-lb__nav:hover { background: rgba(255, 255, 255, .1); }
.sr-lb__nav--p { left: 24px; }
.sr-lb__nav--n { right: 24px; }
.sr-lb__cap { text-align: center; font-size: 14px; opacity: .75; padding-top: 14px; }
.sr-lb__th { display: flex; justify-content: center; gap: 8px; padding: 14px 24px 24px; overflow-x: auto; }
.sr-lb__th button { flex: none; width: 96px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; opacity: .45; transition: opacity .2s; }
.sr-lb__th button.is-on, .sr-lb__th button:hover { opacity: 1; }
.sr-lb__th img { width: 100%; height: 100%; object-fit: cover; }

/* Uçan görsel (paylaşılan öğe geçişi) */
.sr-fly { position: fixed; z-index: 125; object-fit: cover; pointer-events: none; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .35); }

/* ── Perde, modal, sağ panel ───────────────────────────── */
.sr-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 100; opacity: 0; }
.sr-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.sr-modal__bg { position: absolute; inset: 0; background: var(--scrim); }
.sr-modal__box { position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--bg); border-radius: 26px; box-shadow: var(--sh-3); }
.sr-modal__box--wide { width: min(760px, 100%); }
.sr-modal__box--sm { width: min(460px, 100%); }
.sr-modal__x { position: absolute; right: 14px; top: 14px; z-index: 2; background: var(--card); box-shadow: var(--sh-1); }
.sr-mhead { position: relative; height: 150px; }
.sr-mhead .sr-ph { position: absolute; inset: 0; }
.sr-mhead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55)); }
.sr-mhead__t { position: absolute; left: 24px; bottom: 18px; right: 24px; color: #fff; z-index: 1; display: flex; align-items: center; gap: 14px; }
.sr-mhead__t .sr-ico { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .92); }
.sr-mhead__t b { font-size: 22px; font-weight: 680; letter-spacing: -.02em; display: block; line-height: 1.2; }
.sr-mhead__t small { opacity: .88; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.sr-mbody { padding: 26px 28px 28px; display: grid; gap: 18px; }
.sr-mbody h3 { font-size: 24px; font-weight: 680; letter-spacing: -.03em; line-height: 1.2; }
.sr-field { display: grid; gap: 8px; }
.sr-field label { font-size: 14px; font-weight: 600; }
.sr-field input { height: 52px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); padding: 0 16px; font-size: 16px; }
.sr-field input:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px var(--bg-2); }
.sr-field small { color: var(--ink-3); font-size: 13.5px; }
.sr-field.is-err input { border-color: var(--danger); }
.sr-field.is-err small { color: var(--danger); }
.sr-ts { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); font-size: 14.5px; }
.sr-ts__b { width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--line-2); background: var(--card); display: grid; place-items: center; flex: none; }
.sr-ts.is-ok .sr-ts__b { border-color: var(--live); background: var(--live); color: #fff; }
.sr-ts__brand { margin-left: auto; text-align: right; font-size: 11px; color: var(--ink-3); line-height: 1.3; }
.sr-ts__brand b { display: block; font-size: 12px; color: var(--ink-2); }
.sr-result { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 12px 0 4px; }
.sr-result__i { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 38px; background: var(--live-soft); color: var(--live); }
.sr-result__i.is-warn { background: var(--warn-soft); color: var(--warn); }
.sr-result h3 { font-size: 26px; }
.sr-result p { color: var(--ink-2); max-width: 40ch; }
.sr-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); color: var(--ink-2); font-size: 14px; text-align: left; }
.sr-note i { font-size: 18px; }
.sr-note--ok { background: var(--live-soft); color: var(--live); }
.sr-steps { display: flex; gap: 8px; margin-right: 52px; }
.sr-steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); font-style: normal; }
.sr-steps i.is-on { background: var(--ink); }
.sr-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sr-opt { text-align: left; border: 1.5px solid var(--line); border-radius: 18px; padding: 18px; display: grid; gap: 8px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.sr-opt:hover { border-color: var(--line-2); }
.sr-opt.is-on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--bg-2); }
.sr-opt i { font-size: 24px; }
.sr-opt b { font-size: 16px; }
.sr-opt small { color: var(--ink-3); font-size: 14px; line-height: 1.45; }
.sr-prev { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; align-items: center; }
.sr-prev .sr-ph { border-radius: 12px; aspect-ratio: 16 / 10; }
.sr-code { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-2); border-radius: 12px; font-family: var(--f-mono); font-size: 13.5px; overflow-wrap: anywhere; }
.sr-code span { flex: 1; min-width: 0; }
.sr-skel { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2)); background-size: 200% 100%; animation: sr-sh 1.2s linear infinite; }
@keyframes sr-sh { to { background-position: -200% 0; } }
.sr-checks--box .sr-check { border: 1px solid var(--line); margin-bottom: 6px; }

/* Giriş Yap */
.sr-auth { display: grid; gap: 16px; }
.sr-auth__h { display: grid; gap: 6px; }
.sr-auth__h p { color: var(--ink-2); }
.sr-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13.5px; }
.sr-or::before, .sr-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sr-sso { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sr-sso button { height: 50px; border-radius: 14px; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 15px; transition: border-color .2s var(--ease); }
.sr-sso button:hover { border-color: var(--ink-3); }
.sr-sso i { font-size: 20px; }
.sr-sso .ri-discord-fill { color: #5865f2; }
.sr-auth__bar { height: 4px; border-radius: 2px; background: var(--bg-3); overflow: hidden; }
.sr-auth__bar i { display: block; height: 100%; width: 0; background: var(--ink); }
.sr-fine { color: var(--ink-3); font-size: 13px; text-align: center; }

/* Sağdan açılan panel (filtre mobil, Sunucu Satın Al) */
.sr-side { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100%); background: var(--bg); z-index: 101; box-shadow: var(--sh-3); display: flex; flex-direction: column; border-top-left-radius: 24px; border-bottom-left-radius: 24px; overflow: hidden; }
.sr-side__bar { display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 16px 0 28px; border-bottom: 1px solid var(--line); flex: none; }
.sr-side__bar b { font-size: 16px; font-weight: 600; margin-right: auto; }
.sr-side__sc { overflow: auto; flex: 1; overscroll-behavior: contain; }
.sr-side__in { padding: 28px 32px 48px; display: grid; gap: 26px; }
.sr-buy__h h2 { font-size: clamp(30px, 2.6vw, 40px); font-weight: 720; letter-spacing: -.04em; line-height: 1.05; }
.sr-buy__h p { color: var(--ink-2); margin-top: 10px; font-size: 16.5px; max-width: 46ch; }
.sr-gseg { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-gseg button { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 14.5px; font-weight: 550; transition: border-color .2s var(--ease), background .2s var(--ease); }
.sr-gseg button:hover { border-color: var(--ink-3); }
.sr-gseg button.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
.sr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sr-plan { position: relative; display: grid; gap: 14px; align-content: start; padding: 20px 18px 18px; border: 1.5px solid var(--line); border-radius: 20px; text-align: left; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.sr-plan:hover { border-color: var(--line-2); transform: translateY(-2px); }
.sr-plan.is-on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--bg-2); }
.sr-plan__n { font-size: 15px; font-weight: 650; }
.sr-plan__p { font-size: 32px; font-weight: 740; letter-spacing: -.04em; line-height: 1; }
.sr-plan__p small { font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 2px; }
.sr-plan ul { display: grid; gap: 7px; }
.sr-plan li { display: flex; gap: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.sr-plan li i { color: var(--live); font-size: 16px; line-height: 1.3; }
.sr-plan__tag { position: absolute; top: -11px; left: 16px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; }
.sr-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sr-perk { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--bg-2); }
.sr-perk i { font-size: 22px; color: var(--ink); }
.sr-perk b { display: block; font-size: 15px; font-weight: 650; }
.sr-perk span { color: var(--ink-3); font-size: 13.5px; line-height: 1.4; display: block; }
.sr-buy__f { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 32px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); flex: none; background: var(--bg); }
.sr-buy__f > div b { display: block; font-size: 22px; font-weight: 720; letter-spacing: -.03em; }
.sr-buy__f > div span { color: var(--ink-3); font-size: 13.5px; }

/* ── Bildirim ─────────────────────────────────────────── */
.sr-toasts { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 140; display: grid; gap: 10px; justify-items: center; pointer-events: none; width: min(560px, calc(100% - 32px)); }
.sr-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 18px 12px 14px; box-shadow: var(--sh-3); font-size: 15px; max-width: 100%; }
.sr-toast i { font-size: 20px; }
.sr-toast small { display: block; opacity: .72; font-size: 13px; }
.sr-toast--ach { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.sr-toast--ach img { width: 36px; height: 36px; image-rendering: pixelated; }

/* ── Duyarlılık ────────────────────────────────────────── */
@media (max-width: 1180px) {
  .sr-dt__cols { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 920px) {
  .sr-dt__cols { grid-template-columns: minmax(0, 1fr); }
  .sr-join { position: static; }
  .sr-cmts { grid-template-columns: 1fr; }
  .sr-chart__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-ev { grid-template-columns: 140px minmax(0, 1fr); }
  .sr-ev > :last-child { grid-column: 1 / -1; }
  .sr-plans { grid-template-columns: minmax(0, 1fr); }
  .sr-plan { grid-template-columns: minmax(0, 1fr) auto; }
  .sr-plan ul { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .sr-dt { padding-top: 10px; }
  .sr-dt__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sr-dt__t { font-size: 30px; gap: 12px; }
  .sr-dt__t .sr-ico { width: 44px; height: 44px; border-radius: 12px; }
  .sr-dt__t .sr-ico img { width: 28px; height: 28px; }
  .sr-dt__meta { gap: 4px 12px; font-size: 15px; }
  .sr-dt__meta > span + span::before { display: none; }
  .sr-mosaic { display: none; }
  .sr-mcar { display: block; position: relative; margin: 18px calc(var(--gut) * -1) 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-3); }
  .sr-mcar__t { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sr-mcar__t::-webkit-scrollbar { display: none; }
  .sr-mcar__t img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
  .sr-mcar__c { position: absolute; right: 12px; bottom: 12px; background: rgba(15, 19, 17, .7); color: #fff; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; font-family: var(--f-mono); }
  .sr-dnav { top: 64px; margin-top: 12px; }
  .sr-dt__cols { margin-top: 24px; }
  .sr-blk { padding: 28px 0; scroll-margin-top: 130px; }
  .sr-ev { grid-template-columns: 1fr; }
  .sr-motd2 { grid-template-columns: 48px minmax(0, 1fr); font-size: 12.5px; }
  .sr-motd2__ic { width: 48px; height: 48px; }
  .sr-motd2__ic img { width: 32px; height: 32px; }
  .sr-motd2__r { display: none; }
  .sr-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; gap: 10px; align-items: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--line); }
  .sr-mbar__i { flex: 1; min-width: 0; }
  .sr-mbar__i b { display: block; font-family: var(--f-mono); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  .sr-mbar__i span { font-size: 13px; color: var(--ink-3); }
  .sr-mbar .sr-btn { height: 46px; padding: 0 16px; }
  .sr-view[data-v="detail"] { padding-bottom: 96px; }
  .sr-modal { padding: 0; align-items: end; }
  .sr-modal__box { border-radius: 24px 24px 0 0; max-height: 92vh; }
  .sr-opts, .sr-perks { grid-template-columns: minmax(0, 1fr); }
  .sr-prev { grid-template-columns: minmax(0, 1fr); }
  .sr-side { border-radius: 0; }
  .sr-side__in { padding: 22px 20px 36px; }
  .sr-buy__f { padding-inline: 20px; }
  .sr-lb__stage { padding: 0 12px; }
  .sr-lb__nav { display: none; }
}

/* ═══ v7/style-3.css ═══ */
/* sunuculari.com v7 — style.css ve style-2.css v3'le birebir aynıdır; bu dosya onların üstüne gelir:
   64 px başlık (oyun değiştirici ▾ + arama ikonu), oyun rafı, sponsorlu vitrin, kart ızgaraları, oyun
   başlık satırı, Öne çıkan slotlar (1-2-3 soldan sağa küçülür, hızlı fotoğraf galerisi), sol filtre
   paneli + sponsorlu satırlar + sıralama satırları, giydirme reklamı,
   katmanlar (tek sıralı oyun değiştirici, arama paneli, mobil filtre sayfası) ve sunucu sayfası
   düzeltmeleri (alt çizgisiz düğmeler, büyük oyuncu sayılı MOTD).
   Hareket: hover 200 ms, fotoğraf geçişi 120 ms, katmanlar 250 ms. Alt çizgi efekti kullanılmaz. */

.sr4 { --head: 64px; }
.sr4 .sr-head__in, .sr4 .sr-head.is-stuck .sr-head__in { height: 64px; gap: 16px; }
.sr4 .sr-view { padding-bottom: 0; }

/* ── Başlık: [oyun ikonu ▾] Sunucuları ──────────────────── */
.sr4 .sr-logo { gap: 4px; }
.sr-logo__ic { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-left: -6px; border-radius: 12px; transition: background .2s var(--ease); }
.sr-logo__ic:hover, .sr-logo__ic[aria-expanded="true"] { background: var(--bg-2); }
.sr-logo__badge { position: absolute; right: 1px; bottom: 1px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 1px 3px rgba(15, 19, 17, .16); display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--ink); transition: transform .2s var(--ease); }
.sr-logo__ic[aria-expanded="true"] .sr-logo__badge { transform: rotate(180deg); }
/* Merkezde dönen oyun ikonu yerine sabit seçici işareti (oyun kolu); oyun sitesinde oyunun ikonu gelir. */
.sr-logo__hub { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 21px; will-change: transform; transition: background .2s var(--ease); }
.sr-logo__ic:hover .sr-logo__hub, .sr-logo__ic[aria-expanded="true"] .sr-logo__hub { background: #2a302c; }
.sr-logo__w { padding: 6px 4px; border-radius: 8px; }
.sr-logo__w:hover { background: var(--bg-2); }
.sr-sbtn i { font-size: 20px; }

/* ── Merkez: bölüm başlıkları ──────────────────────────── */
.sr-shelfw { padding-top: 26px; }
.sr-sec4 { padding-top: clamp(40px, 3.6vw, 60px); }
.sr-sh4 { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.sr-sh4 h1, .sr-sh4 h2 { font-size: clamp(23px, 1.9vw, 29px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.sr-sh4--top h1 { font-size: clamp(26px, 2.2vw, 34px); }
.sr-sh4 .sr-meta { font-size: 14.5px; }
.sr-sh4 .sr-live { gap: 7px; }

/* Oyun rafı: 7 dikey kapak (2:3) */
.sr-shelf { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(12px, 1.15vw, 20px); }
.sr-cover { display: flex; flex-direction: column; min-width: 0; border-radius: 16px; transition: transform .2s var(--ease); }
.sr-cover:hover { transform: translateY(-4px); }
.sr-cover__img { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; background: var(--bg-3); box-shadow: 0 1px 2px rgba(15, 19, 17, .08), 0 12px 26px -16px rgba(15, 19, 17, .45); transition: box-shadow .2s var(--ease); }
.sr-cover:hover .sr-cover__img { box-shadow: 0 2px 4px rgba(15, 19, 17, .08), 0 24px 40px -18px rgba(15, 19, 17, .5); }
.sr-cover__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s var(--ease); }
.sr-cover:hover .sr-cover__img img { transform: scale(1.03); }
.sr-cover__b { display: grid; gap: 3px; padding: 12px 2px 0; }
.sr-cover__t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sr-cover__t .sr-gi { width: 22px; height: 22px; border-radius: 6px; }
.sr-cover__t b { font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-cover__m { display: grid; justify-items: start; font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.sr-cover__m .sr-live { color: var(--ink-2); gap: 6px; }
.sr-cover__m .sr-live::before { width: 6px; height: 6px; }
.sr-cover__m b { font-weight: 600; color: var(--ink); }

/* Kart ızgarası: Şu an popüler / Yeni açılan */
.sr-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.3vw, 22px); }
.sr-card { display: flex; flex-direction: column; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.sr-card:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.sr-card__img { aspect-ratio: 16 / 10; cursor: pointer; }
.sr-card__img > img { position: absolute; inset: 0; transition: transform .2s var(--ease); }
.sr-card:hover .sr-card__img > img, .sr-card__img.is-pv > img { transform: scale(1.03); }
.sr-card__g, .sr-card__on, .sr-card__bd { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 26px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sr-card__g { left: 10px; top: 10px; padding: 0 10px 0 4px; background: rgba(255, 255, 255, .95); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .16); }
.sr-card__g .sr-gi { width: 18px; height: 18px; border-radius: 5px; }
.sr-card__on { left: 10px; bottom: 10px; padding: 0 10px; background: rgba(15, 19, 17, .74); color: #fff; font-weight: 550; }
.sr-card__on .sr-live { gap: 6px; }
.sr-card__on .sr-live::before { width: 7px; height: 7px; }
.sr-card__on b { font-weight: 650; }
.sr-card__bd { right: 10px; top: 10px; padding: 0 10px 0 8px; font-variant-numeric: tabular-nums; }
.sr-card__bd i { font-size: 15px; }
.sr-card__bd.is-soon { background: var(--ink); color: #fff; }
.sr-card__bd.is-new { background: #e2f4ea; color: #0d7a45; }
.sr-card__bd.is-spon { background: rgba(255, 255, 255, .95); color: var(--warn); box-shadow: 0 1px 4px rgba(0, 0, 0, .16); }
.sr-sec4[hidden] { display: none; }
.sr-card__b { display: grid; gap: 12px; padding: 14px; }
.sr-card__t { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: center; }
.sr-card__t .sr-ico { width: 38px; height: 38px; border-radius: 10px; }
.sr-card__t .sr-ico img { width: 24px; height: 24px; }
.sr-card__t .sr-ico--img img { width: 100%; height: 100%; }
.sr-card__t b { display: flex; align-items: center; gap: 6px; font-size: 16.5px; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; cursor: pointer; min-width: 0; }
.sr-card__t b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-card__t b .sr-verified { font-size: 16px; }
.sr-card__t small { display: block; color: var(--ink-3); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-card .sr-ip { width: 100%; height: 40px; font-size: 13px; }

/* İnce sahip şeridi */
.sr-ostrip { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 16px 18px 16px 22px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); }
.sr-ostrip__t { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; }
.sr-ostrip__t b { font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.sr-ostrip__t span { color: var(--ink-2); font-size: 15px; }
.sr-ostrip__a { display: flex; gap: 8px; flex-wrap: wrap; }
.sr4 .sr-foot { margin-top: clamp(56px, 6vw, 96px); }

/* ── Oyun sitesi: başlık satırı (~160 px) ───────────────── */
.sr-gt { display: flex; align-items: center; gap: 20px; padding: 30px 0 28px; }
.sr-gt__cover { flex: none; width: 64px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--bg-3); box-shadow: 0 10px 22px -12px rgba(15, 19, 17, .5); }
.sr-gt__cover img { width: 100%; height: 100%; object-fit: cover; }
.sr-gt__b { display: grid; gap: 10px; min-width: 0; }
.sr-gt__h { font-size: clamp(32px, 3vw, 46px); font-weight: 720; letter-spacing: -.04em; line-height: 1.02; }
.sr-gt__m { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--ink-2); font-size: 15.5px; }
.sr-gt__m b { color: var(--ink); font-weight: 650; }
.sr-gt__m .sr-live { gap: 7px; }

/* ── Oyun sitesi: Öne çıkan slotlar (1-2-3, soldan sağa küçülür) ── */
.sr-feat5 { padding-top: 6px; }
.sr-feat5[hidden] { display: none; }
.sr-sh5 { align-items: center; }
.sr-sh5 .sr-meta { align-items: center; gap: 10px 14px; }
.sr-sh5 .sr-btn--sm { height: 36px; gap: 6px; }
.sr-sh5 .sr-btn--sm i { font-size: 16px; }
/* 1. slot solda ve en büyük, 2. ortada, 3. sağda en küçük; kart tabanları aynı hizada. */
.sr4 .sr-podium { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr); gap: clamp(16px, 1.8vw, 32px); align-items: end; }
.sr4 .sr-pod--1, .sr4 .sr-pod--2, .sr4 .sr-pod--3 { order: 0; }
.sr4 .sr-pod { gap: 14px; }
.sr4 .sr-pod .sr-ph { aspect-ratio: auto; height: 228px; }
.sr4 .sr-pod--1 .sr-ph { height: 292px; }
.sr4 .sr-pod--3 .sr-ph { height: 186px; }
.sr4 .sr-pod__n { font-size: clamp(60px, 5vw, 88px); padding: 10px 16px 0 0; border-top-right-radius: 22px; z-index: 2; pointer-events: none; }
.sr4 .sr-pod--1 .sr-pod__n { font-size: clamp(76px, 6.6vw, 116px); }
.sr4 .sr-pod--3 .sr-pod__n { font-size: clamp(48px, 4vw, 70px); padding: 8px 12px 0 0; }
/* Çentiğin ters köşeleri gölgeyle çizilir; gölge rakamın altında kalmalı, yoksa rakamı keser. */
.sr4 .sr-pod__n::before, .sr4 .sr-pod__n::after { width: 22px; height: 22px; z-index: -1; }
.sr4 .sr-pod__n::before { top: -22px; border-bottom-left-radius: 22px; }
.sr4 .sr-pod__n::after { right: -22px; border-bottom-left-radius: 22px; }
.sr4 .sr-pod__body { gap: 10px; }
.sr4 .sr-pod__name { font-size: clamp(19px, 1.45vw, 23px); }
.sr4 .sr-pod--1 .sr-pod__name { font-size: clamp(21px, 1.75vw, 28px); }
.sr4 .sr-pod--3 .sr-pod__name { font-size: clamp(17px, 1.25vw, 20px); }
.sr4 .sr-pod__nums { padding: 10px 0; }
.sr4 .sr-pod__nums b { font-size: 18px; }
.sr4 .sr-pod--1 .sr-pod__nums b { font-size: 21px; }
.sr4 .sr-pod--3 .sr-pod__nums b { font-size: 16px; }
.sr4 .sr-pod .sr-ico { width: 40px; height: 40px; }
.sr4 .sr-pod--1 .sr-ico { width: 46px; height: 46px; }
.sr4 .sr-pod--3 .sr-pod__act .sr-ip { flex-basis: 140px; }
.sr4 .sr-pod--3 .sr-ip__c span { display: none; }
.sr4 .sr-pod .sr-card__m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Slot galerisi: fare yatay gezdikçe fotoğraf değişir; dokunmatikte kaydırma ve oklar. */
.sr-fc__media { position: relative; overflow: hidden; background: var(--bg-3); cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.sr-fc__imgs { position: absolute; inset: 0; }
.sr-fc__imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .12s linear, transform .2s var(--ease); -webkit-user-drag: none; }
.sr-fc__imgs img.is-on { opacity: 1; }
.sr-fc__media::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 56px; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, 0)); }
.sr-fc__bars { position: absolute; left: 12px; right: 12px; top: 11px; z-index: 2; display: flex; gap: 4px; pointer-events: none; }
.sr-fc__bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .42); transition: background .12s linear; }
.sr-fc__bars i.is-on { background: #fff; }
.sr-fc__cnt { position: absolute; right: 10px; bottom: 10px; z-index: 2; height: 26px; padding: 0 9px; border-radius: 999px; background: rgba(15, 19, 17, .74); color: #fff; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; pointer-events: none; }
.sr-fc__nav { display: none; position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); place-items: center; font-size: 20px; color: var(--ink); }
.sr-fc__nav.is-l { left: 8px; }
.sr-fc__nav.is-r { right: 8px; }
@media (hover: none) { .sr-fc__nav { display: grid; } }

/* Önizleme galerisi: üstte çubuklar, sağ altta sayaç; fareyle gezerken geçiş hızlanır. */
.sr-pv__media::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 56px; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, 0)); }
.sr-pv__media img { transition: opacity .35s var(--ease); -webkit-user-drag: none; }
.sr-pv__media.is-scrub img { transition-duration: .12s; }
.sr-pv__bars { position: absolute; left: 12px; right: 12px; top: 11px; z-index: 2; display: flex; gap: 4px; pointer-events: none; }
.sr-pv__bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .42); transition: background .12s linear; }
.sr-pv__bars i.is-on { background: #fff; }
.sr-pv__cnt { position: absolute; right: 12px; bottom: 12px; z-index: 1; height: 30px; padding: 0 11px; border-radius: 999px; background: rgba(15, 19, 17, .74); color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; pointer-events: none; }

/* ── Oyun sitesi: sol filtre paneli + sıralama ─────────── */
.sr-rank5 { padding-top: clamp(44px, 4vw, 68px); }
.sr4 .sr-body { grid-template-columns: 252px minmax(0, 1fr); gap: clamp(28px, 3vw, 56px); }
.sr4 .sr-rail { top: 84px; gap: 26px; max-height: calc(100vh - 100px); padding: 2px 8px 24px 2px; scrollbar-color: transparent transparent; transition: scrollbar-color .2s; }
.sr4 .sr-rail:hover { scrollbar-color: var(--line-2) transparent; }
.sr-rail__h { min-height: 38px; align-items: center; }
.sr-rail__h h3 { font-size: 19px; }
.sr-rail__h button { height: 30px; padding: 0 10px; margin-right: -6px; border-radius: 999px; font-size: 14px; color: var(--ink-2); transition: background .2s var(--ease), color .2s var(--ease); }
.sr-rail__h button:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.sr-rail__h button[hidden] { display: none; }
.sr-rail__more { justify-self: start; display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 8px; margin-top: -6px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.sr-rail__more:hover { background: var(--bg-2); }
.sr-rail__more i { font-size: 18px; color: var(--ink-3); }
.sr-checks .sr-check { padding: 6px 8px; font-size: 14.5px; }
.sr-checks .sr-check > span:not(.sr-check__b) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-check img { width: 20px; height: 20px; }
.sr-fg .sr-seg button { height: 34px; padding: 0 13px; font-size: 14px; }
.sr-fg--tg { gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.sr-fg--tg .sr-tgl { font-size: 14.5px; padding: 6px 0; }
.sr-lhead5 { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; min-height: 46px; margin-bottom: 12px; }
.sr-lhead5__t { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.sr-lhead5__t h2 { font-size: clamp(23px, 1.9vw, 29px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.sr-lhead5__t span { color: var(--ink-3); font-size: 14.5px; }
.sr-lhead5__t span b { color: var(--ink); font-weight: 650; }
.sr-lhead5__a { display: flex; align-items: center; gap: 10px; }
.sr-fbtn5 { display: none; height: 40px; }
.sr-fbtn5[aria-expanded="true"] { border-color: var(--ink); }
.sr-fbtn5 em { font-style: normal; min-width: 20px; height: 20px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 650; display: inline-grid; place-items: center; padding: 0 6px; }
.sr-fbtn5 em[hidden] { display: none; }
.sr-chips:empty { display: none; }
.sr-chips .sr-chips__clr { background: none; color: var(--ink-2); padding: 0 12px; transition: background .2s var(--ease), color .2s var(--ease); }
.sr-chips .sr-chips__clr:hover { background: var(--bg-2); color: var(--ink); }

.sr4 .sr-row__m { grid-template-columns: 44px 128px minmax(0, 1fr) 140px 196px 108px; gap: 16px; padding: 12px 10px; transition: background .2s var(--ease); }
/* Sponsorlu satırlar: sıralamanın üstünde, sıcak zemin + taç; düzen normal satırla aynı. */
.sr-spon[hidden], .sr-spon:empty { display: none; }
.sr-spon { display: grid; gap: 6px; margin-bottom: 10px; }
.sr-spon .sr-row, .sr-spon .sr-row:last-child { border: 0; }
.sr4 .sr-spon .sr-row__m { background: color-mix(in srgb, var(--warn-soft) 65%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 20%, white); }
.sr4 .sr-spon .sr-row__m:hover { background: var(--warn-soft); }
.sr4 .sr-rank.sr-rank--spon { font-size: 24px; height: auto; color: var(--warn); }
.sr-row__ad { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 4px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, white); color: var(--warn); font-size: 12px; font-style: normal; font-weight: 650; letter-spacing: 0; }
.sr4 .sr-row__m:hover { background: var(--bg-2); }
.sr4 .sr-row__m:hover .sr-ph img { transform: none; }
.sr4 .sr-row .sr-ph { width: 128px; }
.sr4 .sr-rank { font-size: 30px; height: 34px; }
.sr-row__vote { height: 40px; padding: 0 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--acc-ink); font-size: 14.5px; }
.sr-row__vote i { font-size: 16px; }
.sr-row__m:hover .sr-row__vote, .sr-row__vote:focus-visible { background: var(--acc); border-color: var(--acc); color: #fff; }
.sr-row__m .sr-row__vote:hover { background: var(--acc-ink); border-color: var(--acc-ink); color: #fff; }
.sr-row__cp { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); place-items: center; font-size: 17px; color: var(--ink-2); }
.sr-row__cp.is-done { color: var(--live); border-color: var(--live); background: var(--live-soft); }
.sr-more4 { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 22px; color: var(--ink-3); font-size: 14px; }
.sr-more4:empty { display: none; }
.sr-more4 .sr-btn em { font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── Sunucu sayfası ────────────────────────────────────── */
/* Paylaş / Kaydet ve küçük metin düğmeleri: alt çizgi yok, kenarlıklı hap ya da zemin tonu. */
.sr-act { height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); text-decoration: none; transition: background .2s var(--ease), border-color .2s var(--ease); }
.sr-act:hover { background: var(--bg-2); border-color: var(--ink-3); text-decoration: none; }
.sr-act[aria-pressed="true"] { border-color: #e0294a; }
.sr-report { height: 36px; padding: 0 12px; margin-left: -12px; border-radius: 999px; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
.sr-report:hover { background: var(--bg-2); }
.sr-join__more .sr-report:last-child { margin-left: 0; margin-right: -12px; }
.sr4 .sr-foot li a:hover, .sr4 .sr-foot li button:hover { text-decoration: none; }
/* Oyundaki görünümü: sunucu adı MOTD'de zaten yazar, ayrı ad satırı yok; oyuncu sayısı büyük. */
.sr-motd2 { align-items: center; padding: 16px 18px; }
.sr-motd2__n { display: none; }
.sr-motd2 > div:not(.sr-motd2__r) { font-size: 15px; line-height: 1.55; }
.sr-motd2__r { align-self: center; color: #9a9ea6; font-size: 15px; }
.sr-motd2__r .num { font-family: var(--f-ui); font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.sr-motd2__r .sr-bars { height: 18px; margin-left: 12px; vertical-align: -1px; }
.sr-motd2__r .sr-bars i { width: 4px; }

/* ── Giydirme reklamı (site skin) ──────────────────────── */
/* Geniş ekranda: sabit zemin + iki yan panel + üst bant; içerik 1180 px'lik beyaz sütunda kayar.
   Tüm reklam alanı tek tıklanabilir yüzeydir (reklamı veren sunucunun sayfası). */
.sr4 { --skin-w: 1180px; --skin-top: 128px; }
.sr-skin[hidden] { display: none; }
.sr-skin { position: fixed; left: 0; right: 0; top: 64px; bottom: 0; z-index: 0; overflow: hidden; background: #150b22; color: #fff; }
.sr-skin__bg { position: absolute; inset: 0; background-size: cover; background-position: center 35%; }
.sr-skin__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 7, 30, .25), rgba(16, 7, 30, .7) 55%, rgba(16, 7, 30, .85)); }
.sr-skin__side { position: absolute; top: 0; bottom: 0; width: calc((100% - var(--skin-w)) / 2); cursor: pointer; overflow: hidden; }
.sr-skin__side.is-l { left: 0; }
.sr-skin__side.is-r { right: 0; }
.sr-skin__side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.sr-skin__side.is-l img { -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.sr-skin__side.is-r img { -webkit-mask-image: linear-gradient(270deg, #000 55%, transparent); mask-image: linear-gradient(270deg, #000 55%, transparent); }
.sr-skin__side:hover img { transform: scale(1.03); }
.sr-skin__cap { position: absolute; left: 16px; right: 16px; bottom: 44px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.sr-skin__top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: var(--skin-w); height: var(--skin-top); display: flex; align-items: center; gap: 28px; padding: 0 28px; cursor: pointer; outline-offset: -4px; }
.sr-skin__ad { position: absolute; top: 10px; right: 12px; height: 20px; padding: 0 8px; border-radius: 6px; background: rgba(0, 0, 0, .45); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; color: rgba(255, 255, 255, .85); }
.sr-skin__name { font-size: clamp(30px, 2.6vw, 40px); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1; background: linear-gradient(180deg, #fff3cf, #e8b04e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); }
.sr-skin__when { display: grid; gap: 2px; font-size: 16px; font-weight: 650; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.sr-skin__when small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #f2c46d; }
.sr-skin__cd { font-family: var(--f-mono); font-size: 18px; font-weight: 600; padding: 8px 14px; border-radius: 10px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.sr-skin__cta { flex: none; white-space: nowrap; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; background: linear-gradient(180deg, #f8d684, #d9962b); color: #2a1600; font-size: 16px; font-weight: 750; box-shadow: 0 6px 20px -6px rgba(217, 150, 43, .8); transition: transform .2s var(--ease); }
.sr-skin__top:hover .sr-skin__cta { transform: translateY(-1px); }
.sr4.has-skin .sr-view[data-v="game"], .sr4.has-skin .sr-view[data-v="detail"] { position: relative; z-index: 1; max-width: var(--skin-w); margin: var(--skin-top) auto 0; background: var(--bg); border-radius: 22px 22px 0 0; box-shadow: 0 -16px 40px -12px rgba(0, 0, 0, .5); padding-bottom: 48px; }
.sr4.has-skin .sr-view .sr-wrap { padding-inline: 28px; }
.sr4.has-skin .sr-foot { position: relative; z-index: 1; margin-top: 0; }
@media (min-width: 1440px) {
  /* Sütun dar olduğu için sıralama satırları IP kutusu yerine kopyala düğmesi kullanır. */
  .sr4.has-skin .sr-row__m { grid-template-columns: 44px 128px minmax(0, 1fr) 140px 108px 40px; }
  .sr4.has-skin .sr-row__ipc { display: none; }
  .sr4.has-skin .sr-row__cp { display: grid; }
}
/* 1440 px altında yan alan kalmaz: giydirme yalnız üst banner olur, içerik tam genişlikte. */
@media (max-width: 1439px) {
  .sr-skin { position: relative; top: auto; height: 112px; z-index: auto; }
  .sr-skin__side { display: none; }
  .sr-skin__top { width: 100%; max-width: calc(1680px + 2 * var(--gut)); height: 112px; padding: 0 var(--gut); }
  .sr4.has-skin .sr-view[data-v="game"], .sr4.has-skin .sr-view[data-v="detail"] { max-width: none; margin: 0; border-radius: 0; box-shadow: none; padding-bottom: 0; }
  .sr4.has-skin .sr-view .sr-wrap { padding-inline: var(--gut); }
}
@media (max-width: 720px) {
  .sr-skin, .sr-skin__top { height: 92px; }
  .sr-skin__top { gap: 12px; }
  .sr-skin__name { font-size: 21px; }
  .sr-skin__when { font-size: 13px; white-space: nowrap; }
  .sr-skin__when small, .sr-skin__wd, .sr-skin__cd { display: none; }
  .sr-skin__cta { height: 38px; padding: 0 14px; font-size: 14px; }
  .sr-skin__ad { top: auto; bottom: 6px; right: auto; left: var(--gut); height: 16px; font-size: 9.5px; }
}

/* ── Katmanlar ───────────────────────────────────────── */
.sr-ly { position: fixed; inset: 0; z-index: 115; pointer-events: none; }
.sr-ly__bg { position: absolute; inset: 0; background: var(--scrim); pointer-events: auto; }
.sr-ly__box { pointer-events: auto; background: var(--card); outline: none; }
.sr-ly--pop .sr-ly__box { position: fixed; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-3); transform-origin: 24px 0; }
.sr-ly--bottom .sr-ly__box { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow: auto; border-radius: 22px 22px 0 0; box-shadow: var(--sh-3); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sr-ly--right .sr-ly__box { position: absolute; top: 0; right: 0; bottom: 0; width: min(1040px, 100%); display: flex; flex-direction: column; border-radius: 24px 0 0 24px; box-shadow: var(--sh-3); overflow: hidden; }
.sr-ly--pal .sr-ly__box { position: absolute; left: 0; right: 0; top: 11vh; width: min(680px, calc(100% - 24px)); margin: 0 auto; border-radius: 20px; box-shadow: var(--sh-3); overflow: hidden; display: flex; flex-direction: column; max-height: 74vh; }
.sr-ly__grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 10px auto 4px; }

/* Oyun değiştirici */
.sr-ly--pop .sr-sw { width: min(940px, calc(100vw - 24px)); }
.sr-sw { padding: 10px; }
.sr-sw__all { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 12px; text-align: left; transition: background .2s var(--ease); }
.sr-sw__all:hover { background: var(--bg-2); }
.sr-sw__allic { width: 38px; height: 38px; border-radius: 10px; background: var(--bg-2); display: grid; place-items: center; font-size: 18px; }
.sr-sw__all b { display: block; font-size: 15px; font-weight: 650; line-height: 1.3; }
.sr-sw__all small { color: var(--ink-3); font-size: 13px; }
.sr-sw__all > i { margin-left: auto; color: var(--ink-3); }
.sr-sw__all.is-on .sr-sw__allic { background: var(--ink); color: #fff; }
/* Oyunlar tek sırada: kapak üstte, ad tek satır ("CS2" düz yazılır). */
.sr-sw__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.sr-sw__it { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 9px; padding: 8px 8px 10px; border-radius: 14px; text-align: left; min-width: 0; transition: background .2s var(--ease); }
.sr-sw__it:hover { background: var(--bg-2); }
.sr-sw__it.is-on { background: var(--bg-2); box-shadow: inset 0 0 0 1.5px var(--ink); }
.sr-sw__cv { flex: none; width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--bg-3); }
.sr-sw__cv img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s var(--ease); }
/* 3:4 kırpımda logolar kesilmesin: logosu üstte olanlar üstten, altta olanlar alttan hizalanır. */
.sr-sw__it[data-g="mc"] .sr-sw__cv img, .sr-sw__it[data-g="cs"] .sr-sw__cv img { object-position: 50% 0; }
.sr-sw__it[data-g="metin2"] .sr-sw__cv img, .sr-sw__it[data-g="rust"] .sr-sw__cv img, .sr-sw__it[data-g="ark"] .sr-sw__cv img { object-position: 50% 100%; }
.sr-sw__it[data-g="dayz"] .sr-sw__cv img { object-position: 50% 75%; }
.sr-sw__it:hover .sr-sw__cv img { transform: scale(1.03); }
.sr-sw__tx { display: grid; gap: 4px; min-width: 0; }
.sr-sw__tx b { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 650; min-width: 0; line-height: 1.25; white-space: nowrap; }
.sr-sw__tx b > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sr-sw__tx small { font-size: 12.5px; color: var(--ink-3); gap: 6px; white-space: nowrap; min-width: 0; }
.sr-sw__tx small > span { overflow: hidden; text-overflow: ellipsis; }
.sr-sw__tx small::before { width: 6px; height: 6px; }
.sr-sw__tx small b { display: inline; font-size: inherit; font-weight: 600; color: var(--ink-2); }
.sr-sw__ck { position: absolute; right: 14px; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); display: grid; place-items: center; font-size: 16px; color: var(--ink); }

/* Arama paneli */
.sr-pal__in { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line); flex: none; }
.sr-pal__in > i { font-size: 21px; color: var(--ink-3); }
.sr-pal__in input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 17px; outline: none; }
.sr-pal__in input::-webkit-search-cancel-button { display: none; }
.sr-pal__in input:focus-visible { outline: 0; }
.sr-pal__in:focus-within { box-shadow: inset 0 -2px 0 var(--ink); }
.sr-pal__esc { height: 26px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3); font-family: var(--f-mono); }
.sr-pal__sc { display: flex; align-items: center; gap: 6px; padding: 10px 14px 4px; flex-wrap: wrap; flex: none; }
.sr-pal__sc button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 6px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 550; color: var(--ink-2); transition: background .2s var(--ease), border-color .2s var(--ease); }
.sr-pal__sc button:hover { border-color: var(--ink-3); }
.sr-pal__sc button i { font-size: 15px; margin-left: 3px; }
.sr-pal__sc button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.sr-pal__lbl { margin-left: auto; font-size: 12px; color: var(--ink-3); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.sr-pal__res { overflow: auto; padding: 6px 8px 8px; flex: 1; min-height: 0; }
.sr-pres { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.sr-pres.is-hl, .sr-pres:hover { background: var(--bg-2); }
.sr-pres .sr-ico { width: 38px; height: 38px; border-radius: 10px; }
.sr-pres .sr-ico img { width: 24px; height: 24px; }
.sr-pres .sr-ico--img img { width: 100%; height: 100%; }
.sr-pres__t { min-width: 0; }
.sr-pres__t b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; min-width: 0; line-height: 1.3; }
.sr-pres__t b > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-pres__t b .sr-verified { font-size: 15px; }
.sr-pres__t mark { background: #fff0a6; color: inherit; border-radius: 3px; padding: 0 1px; }
.sr-pres__t small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.sr-pres__ip { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-pres__cp { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); font-size: 13px; font-weight: 550; color: var(--ink-2); transition: border-color .2s var(--ease); }
.sr-pres__cp:hover { border-color: var(--ink-3); color: var(--ink); }
.sr-pres__cp.is-done { color: var(--live); border-color: var(--live); background: var(--live-soft); }
.sr-pal__none { padding: 22px 14px; color: var(--ink-3); font-size: 14.5px; }
.sr-pal__none button { height: 30px; padding: 0 12px; margin-left: 4px; border-radius: 999px; background: var(--bg-2); font-weight: 600; color: var(--ink); }
.sr-pal__none button:hover { background: var(--bg-3); }
.sr-pal__f { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 18px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; background: var(--bg-2); flex: none; }
.sr-pal__f kbd { font-family: var(--f-mono); font-size: 11px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--line-2); background: #fff; display: inline-grid; place-items: center; margin-right: 3px; color: var(--ink-2); }

/* Filtreler (1180 px altı): sol paneldeki içerik alt sayfada */
.sr-ly--bottom .sr-flt { display: flex; flex-direction: column; left: max(0px, calc(50% - 340px)); right: max(0px, calc(50% - 340px)); overflow: hidden; }
.sr-flt__b { display: grid; gap: 24px; padding: 8px 20px 18px; overflow: auto; min-height: 0; flex: 1; }
.sr-flt__f { padding: 12px 20px 16px; border-top: 1px solid var(--line); flex: none; }

/* ── Duyarlılık ──────────────────────────────────────── */
/* Sol panel 1181–1360 px arasında listeyi daraltır: IP kutusu yerine kopyala düğmesi. */
@media (max-width: 1360px) and (min-width: 1181px) {
  .sr4 .sr-row__m { grid-template-columns: 44px 128px minmax(0, 1fr) 140px 108px 40px; }
  .sr4 .sr-row__ipc { display: none; }
  .sr4 .sr-row__cp { display: grid; }
}
@media (max-width: 1180px) {
  .sr4 .sr-body { grid-template-columns: minmax(0, 1fr); }
  .sr-fbtn5 { display: inline-flex; }
  .sr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sr-shelf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 6px var(--gut) 10px; scroll-padding-left: var(--gut); }
  .sr-shelf::-webkit-scrollbar { display: none; }
  .sr-cover { flex: none; width: 160px; scroll-snap-align: start; }
}
@media (max-width: 980px) {
  .sr4 .sr-podium { grid-template-columns: none; align-items: start; }
  .sr4 .sr-pod .sr-ph, .sr4 .sr-pod--1 .sr-ph, .sr4 .sr-pod--3 .sr-ph { height: 210px; }
  .sr4 .sr-pod--1 .sr-pod__n, .sr4 .sr-pod--3 .sr-pod__n { font-size: 72px; }
  .sr4 .sr-row__m { grid-template-columns: 44px 128px minmax(0, 1fr) 140px 108px 40px; }
  .sr4 .sr-row__ipc { display: none; }
  .sr4 .sr-row__cp { display: grid; }
  .sr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sr-logo__ic { width: 44px; height: 44px; margin-left: -4px; }
  .sr4 .sr-head__in { gap: 6px; }
  .sr4 .sr-head__act { gap: 2px; }
  .sr4 .sr-head__act .sr-btn--icon { width: 40px; height: 40px; }
  .sr4 .sr-login { padding: 0 14px; }
  .sr4 .sr-logo__w { font-size: 20px; }
  .sr-shelfw { padding-top: 18px; }
  .sr-sh4 { margin-bottom: 14px; }
  .sr-sh4--top h1 { font-size: 25px; }
  .sr-sh4 h2 { font-size: 22px; }
  .sr-sh4 .sr-meta { font-size: 13.5px; gap: 2px 12px; }
  .sr-cover { width: calc((100vw - 60px) / 3.3); }
  .sr-cover__b { padding-top: 8px; }
  .sr-cover__t { gap: 6px; }
  .sr-cover__t .sr-gi { width: 18px; height: 18px; border-radius: 5px; }
  .sr-cover__t b { font-size: 14px; }
  .sr-cover__m { font-size: 12px; }
  .sr-cover__n { display: none; }
  .sr-cards { gap: 10px; }
  .sr-card { border-radius: 16px; }
  .sr-card__g { left: 6px; top: 6px; height: 22px; font-size: 11.5px; padding-right: 8px; }
  .sr-card__g .sr-gi { width: 15px; height: 15px; }
  .sr-card__on { left: 6px; bottom: 6px; height: 22px; font-size: 11.5px; padding: 0 8px; }
  .sr-card__bd { right: 6px; top: auto; bottom: 6px; height: 22px; font-size: 11.5px; padding: 0 8px 0 6px; }
  .sr-card__bd + .sr-card__on { display: none; }
  .sr-card__b { padding: 10px; gap: 8px; }
  .sr-card__t { grid-template-columns: minmax(0, 1fr); }
  .sr-card__t .sr-ico { display: none; }
  .sr-card__t b { font-size: 14.5px; }
  .sr-card__t small { font-size: 12px; }
  .sr-card .sr-ip { height: 36px; font-size: 12px; padding-left: 10px; gap: 4px; }
  .sr-card .sr-ip__c { padding: 0 6px; }
  .sr-card .sr-ip__c span { display: none; }
  .sr-ostrip { padding: 16px; }
  .sr-ostrip__a .sr-btn { flex: 1; }
  .sr-gt { gap: 14px; padding: 18px 0 16px; }
  .sr-gt__cover { width: 48px; height: 72px; border-radius: 8px; }
  .sr-gt__h { font-size: 27px; }
  .sr-gt__b { gap: 6px; }
  .sr-gt__m { font-size: 13.5px; gap: 2px 12px; }
  .sr4 .sr-podium { margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scroll-padding-left: var(--gut); gap: 12px; }
  .sr4 .sr-pod .sr-ph, .sr4 .sr-pod--1 .sr-ph, .sr4 .sr-pod--3 .sr-ph { height: 190px; }
  .sr4 .sr-pod__n, .sr4 .sr-pod--1 .sr-pod__n, .sr4 .sr-pod--3 .sr-pod__n { font-size: 60px; }
  .sr4 .sr-pod .sr-pod__act .sr-ip { flex-basis: 150px; }
  .sr-sh5 .sr-meta { font-size: 13.5px; }
  .sr-rank5 { padding-top: 34px; }
  .sr-lhead5 { gap: 10px; }
  .sr-lhead5__a { width: 100%; justify-content: space-between; }
  .sr-lhead5__a .sr-sort { flex: none; width: auto; }
  .sr-lhead5__a .sr-sort button { height: 32px; padding: 0 10px; font-size: 13.5px; flex: none; }
  .sr-lhead5__a .sr-fbtn5 { padding: 0 14px; }
  .sr4 .sr-row__m { grid-template-columns: 26px 92px minmax(0, 1fr) 40px; gap: 10px; padding: 10px 2px; }
  .sr4 .sr-row .sr-ph { width: 92px; border-radius: 10px; }
  .sr4 .sr-rank { font-size: 21px; height: 26px; }
  .sr4 .sr-row__vote { display: none; }
  .sr-ly--right .sr-ly__box { border-radius: 0; }
  .sr-sw__g { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sr-sw__it { flex-direction: row; align-items: center; gap: 12px; padding: 6px 8px; }
  .sr-sw__cv { width: 36px; border-radius: 6px; }
  .sr-sw__ck { position: static; margin-left: auto; box-shadow: none; background: none; }
  .sr-sw { padding: 4px 12px 16px; }
  .sr-ly--pal .sr-ly__box { top: 8px; max-height: calc(100% - 16px); }
  .sr-pres { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sr-pres__ip { display: none; }
  .sr-pres__cp span { display: none; }
  .sr-pal__f { display: none; }
}
@media (max-width: 374px) {
  .sr4 .sr-mobmenu { display: none; }
}
@media (max-width: 360px) {
  .sr4 .sr-row__m { grid-template-columns: 22px 76px minmax(0, 1fr) 36px; gap: 8px; }
  .sr4 .sr-row .sr-ph { width: 76px; }
  .sr-row__cp { width: 36px; height: 36px; }
}
@media (max-width: 760px) {
  .sr-motd2 { grid-template-columns: 48px minmax(0, 1fr); gap: 6px 12px; padding: 12px 14px; }
  .sr-motd2 > div:not(.sr-motd2__r) { font-size: 12px; }
  .sr-motd2__r { display: block; grid-column: 2; text-align: left; font-size: 12.5px; }
  .sr-motd2__r .num { font-size: 20px; }
  .sr-motd2__r .sr-bars { height: 14px; margin-left: 8px; }
}

/* ═══ v8/style-8.css ═══ */
/* sunuculari.com v8 — v7/style-3.css'in üstüne gelir. Değişenler:
   1) Oyun değiştirici sade liste: ikon + kısa ad + çevrimiçi; kayan vurgu oyunun rengini alır.
   2) Merkezde iki sahip kartı: "Sunucun mu var?" → Sunucu Ekle, "Sunucu kurmayı mı düşünüyorsun?" → Sunucu Satın Al.
   3) SEO alanı: açılır kapanır metin + SSS + popüler aramalar.
   4) Altbilgi: marka + 5 bağlantı sütunu, koyu VGNW bandı, yasal satır.
   Hareket: hover 200 ms, vurgu 220 ms, SEO metni 450 ms, SSS 300 ms. Alt çizgi efekti kullanılmaz. */

/* ── 1) Oyun değiştirici ─────────────────────────────── */
.sr4 .sr-ly--pop .sr-sw { width: 316px; padding: 8px; border-radius: 18px; }
.sr-gs__h { display: flex; justify-content: space-between; padding: 6px 12px 8px 10px; font-size: 12.5px; font-weight: 550; color: var(--ink-3); }
.sr-gs__l { position: relative; display: grid; gap: 2px; }
.sr-gs__hl { position: absolute; left: 0; right: 0; top: 0; height: 48px; border-radius: 12px; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--hlc, #0f1311) 10%, white); transition: background-color .2s var(--ease); }
.sr-gs__it { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; height: 48px; padding: 0 10px 0 8px; border-radius: 12px; text-align: left; }
.sr-gs__it .sr-gi { width: 32px; height: 32px; border-radius: 9px; transition: transform .2s var(--ease); }
.sr-gs__it:hover .sr-gi, .sr-gs__it:focus-visible .sr-gi { transform: scale(1.06); }
.sr-gs__it > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.sr-gs__on { gap: 6px; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.sr-gs__on::before { width: 6px; height: 6px; }
.sr-gs__on b { font-weight: 550; color: var(--ink-2); }
.sr-gs__go { font-size: 17px; line-height: 1; color: var(--ink-3); opacity: 0; transform: translateX(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.sr-gs__it:hover .sr-gs__go, .sr-gs__it:focus-visible .sr-gs__go { opacity: 1; transform: none; }
.sr-gs__it.is-on .sr-gs__go { opacity: 1; transform: none; color: var(--ink); font-size: 18px; }
.sr-gs__it:focus-visible, .sr-gs__all:focus-visible { outline-offset: -2px; border-radius: 12px; }
.sr-gs__all { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; height: 48px; margin-top: 6px; padding: 0 12px 0 8px; border-radius: 12px; text-align: left; position: relative; transition: background .2s var(--ease); }
.sr-gs__all::before { content: ""; position: absolute; left: 8px; right: 8px; top: -4px; height: 1px; background: var(--line); }
.sr-gs__all:hover { background: var(--bg-2); }
.sr-gs__allic { width: 32px; height: 32px; border-radius: 9px; background: var(--bg-2); display: grid; place-items: center; font-size: 17px; transition: background .2s var(--ease), color .2s var(--ease); }
.sr-gs__all:hover .sr-gs__allic { background: var(--card); }
.sr-gs__all.is-on .sr-gs__allic { background: var(--ink); color: #fff; }
.sr-gs__all b { font-size: 15px; font-weight: 600; }
.sr-gs__all small { font-size: 13px; color: var(--ink-3); }

/* ── 2) Sahip kartları: üstte ikon + başlık + metin, altta ayrıntı + düğme ── */
.sr-own { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sr-own__c { display: flex; flex-direction: column; gap: 20px; padding: 26px; border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line); }
.sr-own__top { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 20px; }
.sr-own__ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-2); }
.sr-own__ft > .sr-btn { flex: none; }
.sr-own__ic { width: 52px; height: 52px; border-radius: 15px; background: var(--card); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); display: grid; place-items: center; font-size: 24px; }
.sr-own__b { min-width: 0; }
.sr-own__b h2 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.sr-own__b p { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; max-width: 54ch; }
.sr-own__l { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ink-2); }
.sr-own__l li { display: inline-flex; align-items: center; gap: 6px; }
.sr-own__l i { color: var(--live); font-size: 16px; }
.sr-own__g { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; color: var(--ink-2); }
.sr-own__g b { color: var(--ink); font-weight: 650; }
.sr-own__gs { display: flex; gap: 3px; }
.sr-own__gs .sr-gi { width: 22px; height: 22px; border-radius: 6px; }

/* ── 3) SEO alanı ────────────────────────────────────── */
.sr-seo { padding-top: clamp(56px, 5vw, 88px); }
.sr-seo__g { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); padding-top: clamp(40px, 3.6vw, 56px); border-top: 1px solid var(--line); }
.sr-seo h2 { font-size: clamp(23px, 1.9vw, 29px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.sr-seo__art > .sr-meta { margin-top: 8px; font-size: 14px; }
.sr-seo__body { --seo-h: 380px; position: relative; height: var(--seo-h); overflow: hidden; margin-top: 22px; max-width: 74ch; }
.sr-seo__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 128px; background: linear-gradient(rgba(255, 255, 255, 0), var(--bg) 88%); pointer-events: none; transition: opacity .3s var(--ease); }
.sr-seo__body.is-open::after { opacity: 0; }
.sr-seo__body p { color: var(--ink-2); font-size: 16px; line-height: 1.75; }
.sr-seo__body .sr-seo__lead { color: var(--ink); font-size: 18px; line-height: 1.6; letter-spacing: -.005em; }
.sr-seo__body h3 { margin: 26px 0 6px; font-size: 18px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; }
.sr-seo__body a { color: var(--ink); font-weight: 600; transition: color .2s var(--ease); }
.sr-seo__body a:hover { color: var(--ink-3); }
.sr-seo__more { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-top: 16px; padding: 0 14px 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 14.5px; font-weight: 550; transition: border-color .2s var(--ease); }
.sr-seo__more:hover { border-color: var(--ink-3); }
.sr-seo__more i { font-size: 18px; transition: transform .3s var(--ease); }
.sr-seo__more[aria-expanded="true"] i { transform: rotate(180deg); }

.sr-faq { interpolate-size: allow-keywords; align-self: start; }
.sr-faq h2 { margin-bottom: 14px; }
.sr-faq__it { border-bottom: 1px solid var(--line); }
.sr-faq__it summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; list-style: none; cursor: pointer; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
.sr-faq__it summary::-webkit-details-marker { display: none; }
.sr-faq__it summary i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; font-size: 18px; font-weight: 400; transition: transform .3s var(--ease), background .2s var(--ease); }
.sr-faq__it summary:hover i { background: var(--bg-3); }
.sr-faq__it[open] summary i { transform: rotate(45deg); }
.sr-faq__it summary:focus-visible { outline-offset: 2px; }
.sr-faq__it::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
.sr-faq__it[open]::details-content { block-size: auto; }
.sr-faq__a { padding: 0 46px 18px 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }

.sr-seo__tags { margin-top: clamp(36px, 3vw, 52px); }
.sr-seo__tags h3 { margin-bottom: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink-3); }
.sr-seo__tags ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-seo__tags a { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); white-space: nowrap; transition: border-color .2s var(--ease), color .2s var(--ease); }
.sr-seo__tags a:hover { border-color: var(--ink-3); color: var(--ink); }

/* ── 4) Altbilgi ─────────────────────────────────────── */
.sr4 .sr-f8 { margin-top: clamp(64px, 6vw, 104px); padding: clamp(48px, 5vw, 72px) 0 28px; background: var(--bg-2); border-top: 1px solid var(--line); }
.sr4.has-skin .sr-f8 { margin-top: 0; }
.sr-f8__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 4fr); gap: 48px; }
.sr-f8__logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.sr-f8__mark { width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 20px; }
.sr-f8__brand p { margin-top: 16px; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 36ch; }
.sr-f8__soc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sr-f8__soc a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); display: grid; place-items: center; font-size: 18px; color: var(--ink-2); transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.sr-f8__soc a:hover { border-color: var(--ink-3); color: var(--ink); transform: translateY(-1px); }
.sr-f8__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.sr-f8__cols h3 { margin-bottom: 16px; font-size: 14px; font-weight: 650; letter-spacing: -.005em; }
.sr4 .sr-f8__cols li { margin-bottom: 11px; }
.sr4 .sr-f8__cols a, .sr4 .sr-f8__cols button { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 14.5px; line-height: 1.35; text-align: left; transition: color .2s var(--ease); }
.sr4 .sr-f8__cols a:hover, .sr4 .sr-f8__cols button:hover { color: var(--ink); }
.sr4 .sr-f8__cols a.is-on { color: var(--ink); font-weight: 600; }
.sr4 .sr-f8__net li { margin: 0; }
.sr-f8__cols .sr-gi { width: 20px; height: 20px; border-radius: 6px; }

.sr-f8__vgnw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); align-items: center; gap: 24px 48px; margin-top: clamp(40px, 4vw, 56px); padding: 28px 28px 28px 32px; border-radius: 24px; background: #0f1311; color: #fff; }
.sr-f8__vgnwlogo { font-size: 32px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.sr-f8__vh p { margin-top: 10px; color: rgba(255, 255, 255, .66); font-size: 14.5px; line-height: 1.55; max-width: 34ch; }
.sr-f8__net { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sr4 .sr-f8__net a, .sr4 .sr-f8__net a:hover { color: #fff; font-size: 15px; }
.sr-f8__net a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 12px 14px 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); transition: background .2s var(--ease), border-color .2s var(--ease); }
.sr-f8__net a:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .18); }
.sr-f8__net b { grid-column: 1; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.sr-f8__net small { grid-column: 1; font-size: 13px; color: rgba(255, 255, 255, .58); }
.sr-f8__net i { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; color: rgba(255, 255, 255, .45); transition: transform .2s var(--ease), color .2s var(--ease); }
.sr-f8__net a:hover i { color: #fff; transform: translate(2px, -2px); }
.sr-f8__vgnw :focus-visible { outline-color: #fff; }

.sr-f8__b { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink-3); }
.sr-f8__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.sr-f8__legal a { color: var(--ink-3); transition: color .2s var(--ease); }
.sr-f8__legal a:hover { color: var(--ink); }
.sr-f8__fine { margin-top: 14px; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
.sr-f8__fine .sr-tag { height: 22px; margin-right: 8px; font-size: 11.5px; vertical-align: 1px; background: var(--bg-3); }

@media (max-width: 1360px) {
  .sr-f8__top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sr-f8__brand { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 32px; }
  .sr-f8__brand p { grid-column: 1; margin-top: 0; max-width: 60ch; }
  .sr-f8__logo { grid-column: 1 / -1; }
  .sr-f8__soc { grid-column: 2; grid-row: 2; margin-top: 0; }
}
@media (max-width: 1180px) {
  .sr-seo__g { grid-template-columns: minmax(0, 1fr); }
  .sr-seo__body { max-width: none; }
  .sr-f8__vgnw { grid-template-columns: minmax(0, 1fr); }
  .sr-f8__vh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; }
  .sr-f8__vh p { margin-top: 0; max-width: none; }
}
@media (max-width: 980px) {
  .sr-own { grid-template-columns: minmax(0, 1fr); }
  .sr-f8__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
}
@media (max-width: 720px) {
  .sr4 .sr-ly--bottom .sr-sw { padding: 4px 12px 16px; }
  .sr-ly--bottom .sr-gs__it, .sr-ly--bottom .sr-gs__all { height: 54px; }
  .sr-ly--bottom .sr-gs__hl { height: 54px; }
  .sr-own__c { gap: 16px; padding: 20px; border-radius: 20px; }
  .sr-own__top { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .sr-own__ic { width: 44px; height: 44px; border-radius: 13px; font-size: 21px; }
  .sr-own__ft { padding-top: 16px; }
  .sr-own__ft > .sr-btn { flex: 1 1 100%; }
  .sr-own__b h2 { font-size: 19px; }
  .sr-own__b p { font-size: 15px; }
  .sr-seo__body { --seo-h: 340px; }
  .sr-seo__body p { font-size: 15.5px; }
  .sr-seo__body .sr-seo__lead { font-size: 17px; }
  .sr-faq__it summary { font-size: 15.5px; padding: 15px 0; }
  .sr-faq__a { padding-right: 0; font-size: 15px; }
  .sr-seo__tags a { height: 36px; padding: 0 13px; font-size: 14px; }
  .sr-f8__brand { display: block; }
  .sr-f8__brand p { margin-top: 14px; }
  .sr-f8__soc { margin-top: 18px; }
  .sr-f8__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .sr-f8__vgnw { padding: 22px 18px; border-radius: 20px; margin-left: calc(var(--gut) * -.5); margin-right: calc(var(--gut) * -.5); }
  .sr-f8__vgnwlogo { font-size: 28px; }
  .sr-f8__net { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sr-f8__net a { padding: 11px 14px; }
  .sr-f8__b { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-faq__it::details-content { transition: none; }
}

/* ═══ v9/style-9.css ═══ */
/* sunuculari.com v9 — v8'in (style-8.css) üstüne gelir.
   1) Altbilgi: v7'deki oyun hapları + bağlama göre sütunlar + en sağda VGNW (sosyal hesap ve tanıtım yok)
   2) Konum yolu ve oyun/mod sayfası başlık satırı (H1 + giriş cümlesi)
   3) Oyun/mod sayfası SEO bloğu (şu an bilgileri, modlar, popüler aramalar, rehberler)
   4) Sayfa ortakları  5) Reklam ver  6) Hakkımızda */

/* ── 1) Altbilgi ───────────────────────────────────────── */
.sr4 .sr-f9 { margin-top: clamp(64px, 6vw, 104px); padding: 44px 0 28px; background: var(--bg); border-top: 1px solid var(--line); }
.sr4.has-skin .sr-f9 { margin-top: 0; }
.sr-f9 .sr-foot__games a { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; font-weight: 550; color: var(--ink); transition: border-color .2s var(--ease); }
.sr-f9 .sr-foot__games a:hover { border-color: var(--ink-3); }
.sr-f9 .sr-foot__games a.is-on { border-color: var(--ink); }
.sr-f9__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.sr-f9__cols h3 { margin-bottom: 16px; font-size: 14px; font-weight: 650; letter-spacing: -.005em; }
.sr4 .sr-f9__cols li { margin-bottom: 11px; }
.sr4 .sr-f9__cols a, .sr4 .sr-f9__cols button { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 14.5px; line-height: 1.35; text-align: left; transition: color .2s var(--ease); }
.sr4 .sr-f9__cols a:hover, .sr4 .sr-f9__cols button:hover { color: var(--ink); }
.sr-f9__vgnw h3 { font-weight: 800; letter-spacing: -.02em; }
.sr-f9__vgnw a i { font-size: 14px; color: var(--ink-3); transition: transform .2s var(--ease), color .2s var(--ease); }
.sr-f9__vgnw a:hover i { color: var(--ink); transform: translate(2px, -2px); }

/* ── 2) Merkez H1, konum yolu ve başlık satırı ────────────── */
.sr4 .sr-hk h1 { margin-bottom: 4px; color: var(--ink-3); font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.sr-hk p { font-size: clamp(26px, 2.2vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.sr-bc ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.sr-bc li { display: inline-flex; align-items: center; min-width: 0; }
.sr-bc li + li::before { content: ""; flex: none; width: 5px; height: 5px; margin: 0 10px 0 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; }
.sr-bc a { color: var(--ink-3); transition: color .2s var(--ease); }
.sr-bc a:hover { color: var(--ink); }
.sr-bc [aria-current] { color: var(--ink-2); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-gt9 { gap: 20px 40px; }
.sr-gt9 .sr-gt__b { gap: 8px; }
.sr-gt__lede { margin-left: auto; max-width: 54ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.sr-dt > .sr-bc { margin: 4px 0 14px; }

/* ── 3) Oyun / mod sayfası SEO bloğu ──────────────────────── */
.sr-seo__side { display: grid; gap: 28px; align-self: start; min-width: 0; }
.sr-facts { padding: 20px 22px 22px; border-radius: 20px; background: var(--bg-2); }
.sr-facts h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.sr-facts h3 .sr-live { gap: 7px; }
.sr-facts h3 em { font-style: normal; color: var(--ink); font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.sr-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 16px 0 0; }
.sr-facts dl > div { min-width: 0; }
.sr-facts dt { font-size: 13px; color: var(--ink-3); }
.sr-facts dd { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 3px 0 0; font-size: 15px; }
.sr-facts dd b { font-size: 21px; font-weight: 720; letter-spacing: -.025em; line-height: 1.2; }
.sr-facts dd a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; transition: color .2s var(--ease); }
.sr-facts dd a:hover { color: var(--ink-3); }
.sr-facts dd small { flex: none; color: var(--ink-3); font-size: 13px; }
.sr-seo__body.is-short { height: auto; }
.sr-seo__body.is-short::after { display: none; }
.sr-seo__links { display: grid; gap: 24px; margin-top: clamp(36px, 3vw, 52px); }
.sr-seo__links .sr-seo__tags { margin-top: 0; }
.sr-seo__tags a.is-on { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.sr-seo__tags a img { width: 18px; height: 18px; margin-right: 8px; image-rendering: pixelated; }
.sr-seo__tags--g a i { margin-right: 7px; font-size: 16px; color: var(--ink-3); }

/* ── 4) Sayfa ortakları ──────────────────────────────────── */
.sr-pg { padding-top: 26px; }
.sr-pg__h { margin-top: 14px; font-size: clamp(36px, 3.4vw, 54px); font-weight: 740; letter-spacing: -.045em; line-height: 1.02; }
.sr-pg__lede { margin-top: 14px; max-width: 60ch; color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.sr-pgs { padding-top: clamp(52px, 4.6vw, 76px); }
.sr-adh__s, .sr-abs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sr-adh__s > div, .sr-abs > div { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 18px 20px; }
.sr-adh__s > div + div, .sr-abs > div + div { border-left: 1px solid var(--line); }
.sr-adh__s > div:first-child, .sr-abs > div:first-child { padding-left: 0; }
.sr-adh__s b, .sr-abs b { font-size: clamp(24px, 2.1vw, 34px); font-weight: 720; letter-spacing: -.035em; line-height: 1.12; }
.sr-adh__s b .sr-live, .sr-abs b .sr-live { gap: 10px; }
.sr-adh__s span, .sr-abs span { color: var(--ink-3); font-size: 14px; }
.sr-adh__s b span, .sr-abs b span { color: inherit; font-size: inherit; }
.sr-adr__i { width: 44px; height: 44px; border-radius: 13px; background: var(--card); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); display: grid; place-items: center; font-size: 21px; }

/* ── 5) Reklam ver ─────────────────────────────────────── */
.sr-adh__g { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
.sr-adh__a { display: flex; flex-wrap: wrap; gap: 10px; }
.sr-adh__tabs { margin-top: 34px; }
.sr-adt { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-adt__b { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px 0 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; font-weight: 550; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.sr-adt__b:hover { border-color: var(--ink-3); }
.sr-adt__b.is-on { border-color: var(--acc); background: var(--acc-soft); color: var(--acc-ink); }

.sr-adps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sr-adp { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--card); transition: border-color .2s var(--ease), box-shadow .25s var(--ease); }
.sr-adp:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.sr-adp__b { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; }
.sr-adp__b h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.sr-adp__w { color: var(--ink-3); font-size: 14px; line-height: 1.45; }
.sr-adp__pr { margin-top: 10px; color: var(--ink-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.sr-adp__pr b { color: var(--ink); font-size: 23px; font-weight: 720; letter-spacing: -.025em; }
.sr-adp__pr small { color: var(--ink-3); font-size: 13.5px; }
.sr-adp__l { display: grid; gap: 7px; margin: 12px 0 18px; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.sr-adp__l li { display: flex; align-items: flex-start; gap: 8px; }
.sr-adp__l i { flex: none; margin-top: 1px; color: var(--live); font-size: 16px; }
.sr-adp__b .sr-btn { margin-top: auto; align-self: flex-start; }

/* Ürünün sayfada nerede göründüğünü anlatan küçük şema; vurgulu alan seçili oyunun rengini alır. */
.sr-wf { display: flex; gap: 6px; height: 156px; margin: 8px 8px 0; padding: 12px 14px; border-radius: 16px; background: var(--bg-2); }
.sr-wf i { display: block; border-radius: 4px; background: #e1e4de; }
.sr-wf .is-hl { background: color-mix(in srgb, var(--acc) 24%, white); box-shadow: inset 0 0 0 1.5px var(--acc); animation: sr-wf 2.6s var(--ease) infinite; }
.sr-wf__pg { order: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 7px; border-radius: 9px; background: #fff; box-shadow: var(--sh-1); }
.sr-wf__hd { flex: none; height: 8px; width: 100%; }
.sr-wf__band { flex: none; height: 13px; }
.sr-wf__pod { flex: none; display: grid; grid-template-columns: 1.3fr 1fr .8fr; align-items: end; gap: 5px; height: 44px; }
.sr-wf__pod i:nth-child(1) { height: 44px; }
.sr-wf__pod i:nth-child(2) { height: 35px; }
.sr-wf__pod i:nth-child(3) { height: 28px; }
.sr-wf__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 20% minmax(0, 1fr); gap: 6px; }
.sr-wf__rail { height: 100%; }
.sr-wf__rows { display: grid; align-content: start; gap: 4px; }
.sr-wf__rows i { height: 10px; }
.sr-wf--skin { padding: 12px 0; }
.sr-wf__side { flex: none; width: 15%; height: 100%; border-radius: 0; }
.sr-wf__side.is-l { order: 0; border-radius: 0 6px 6px 0; }
.sr-wf__side.is-r { order: 2; border-radius: 6px 0 0 6px; }
.sr-wf__shelf { flex: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sr-wf__shelf i { height: 40px; }
.sr-wf__cards { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
@keyframes sr-wf { 0%, 100% { box-shadow: inset 0 0 0 1.5px var(--acc); } 50% { box-shadow: inset 0 0 0 1.5px var(--acc), 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); } }

/* Uygunluk takvimi + sepet */
.sr-cal { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 20px; }
.sr-cal__m { min-width: 0; }
.sr-cal__sc { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--card); overscroll-behavior-x: contain; }
.sr-cal__t { min-width: 880px; }
.sr-cal__r { display: grid; grid-template-columns: 184px repeat(8, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.sr-cal__r--h { border-top: 0; background: var(--bg-2); }
.sr-cal__l { position: sticky; left: 0; z-index: 1; display: grid; align-content: center; gap: 1px; padding: 10px 14px 10px 18px; background: var(--card); border-right: 1px solid var(--line); }
.sr-cal__r--h .sr-cal__l { background: var(--bg-2); color: var(--ink-3); font-size: 13px; font-weight: 600; }
.sr-cal__l b { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.sr-cal__l small { color: var(--ink-3); font-size: 12.5px; line-height: 1.35; }
.sr-cal__wk { display: grid; align-content: center; padding: 10px 6px; text-align: center; }
.sr-cal__wk b { font-size: 13.5px; font-weight: 650; }
.sr-cal__wk small { color: var(--ink-3); font-size: 11.5px; }
.sr-cal__c { display: grid; place-content: center; min-height: 54px; margin: 6px 4px; border-radius: 12px; text-align: center; font-size: 13.5px; line-height: 1.25; }
button.sr-cal__c { border: 1px solid var(--line-2); background: var(--card); transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease); }
button.sr-cal__c:hover { border-color: var(--acc); background: var(--acc-soft); }
.sr-cal__c.is-on { border-color: var(--acc); background: var(--acc); color: #fff; }
button.sr-cal__c.is-on:hover { background: var(--acc); filter: brightness(1.06); }
.sr-cal__c.is-on small { color: rgba(255, 255, 255, .8); }
.sr-cal__c.is-full { color: var(--ink-3); font-size: 12.5px; background: repeating-linear-gradient(-45deg, var(--bg-2) 0 6px, var(--bg-3) 6px 7px); }
.sr-cal__p { display: inline-flex; align-items: center; justify-content: center; gap: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sr-cal__c small { color: var(--ink-3); font-size: 11.5px; }
.sr-cal__sep { padding: 9px 18px; border-top: 1px solid var(--line); background: var(--bg-2); color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.sr-cal__sep span { position: sticky; left: 18px; }
.sr-cal__r.is-flash { animation: sr-calf 1.6s var(--ease); }
@keyframes sr-calf { 0%, 30% { background: var(--acc-soft); } 100% { background: transparent; } }
.sr-cal__key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; color: var(--ink-3); font-size: 13px; }
.sr-cal__key span { display: inline-flex; align-items: center; gap: 7px; }
.sr-cal__key i { width: 14px; height: 14px; border-radius: 4px; }
.sr-cal__key .k-free { border: 1px solid var(--line-2); background: var(--card); }
.sr-cal__key .k-on { background: var(--acc); }
.sr-cal__key .k-full { background: repeating-linear-gradient(-45deg, var(--bg-2) 0 3px, var(--bg-3) 3px 4px); box-shadow: inset 0 0 0 1px var(--line); }

.sr-sum { position: sticky; top: 92px; display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--sh-2); }
.sr-sum__h { display: flex; align-items: baseline; justify-content: space-between; }
.sr-sum__h h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.sr-sum__h span { color: var(--ink-3); font-size: 14px; }
.sr-sum__l { display: grid; gap: 2px; max-height: 296px; margin: 0 -8px; overflow: auto; }
.sr-sum__l li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 28px; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; }
.sr-sum__l li:hover { background: var(--bg-2); }
.sr-sum__ic .sr-gi { width: 28px; height: 28px; }
.sr-sum__hub { background: var(--ink); color: #fff; font-size: 15px; }
.sr-sum__l b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.sr-sum__l small { color: var(--ink-3); font-size: 12.5px; }
.sr-sum__l .num { font-size: 14px; font-weight: 600; }
.sr-sum__x { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); font-size: 16px; transition: background .15s var(--ease), color .15s var(--ease); }
.sr-sum__x:hover { background: var(--bg-3); color: var(--ink); }
.sr-sum__e { display: flex; gap: 10px; padding: 14px; border-radius: 14px; background: var(--bg-2); color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.sr-sum__e i { color: var(--ink-2); font-size: 20px; line-height: 1.1; }
.sr-sum__t { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; }
.sr-sum__t > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sr-sum__t .is-disc { color: var(--up); }
.sr-sum__t .is-tot { color: var(--ink); font-weight: 600; }
.sr-sum__t .is-tot small { color: var(--ink-3); font-size: 12.5px; font-weight: 400; }
.sr-sum__t .is-tot b { display: inline-block; font-size: 27px; font-weight: 740; letter-spacing: -.035em; }
.sr-sum .sr-btn[disabled] { opacity: .45; cursor: not-allowed; }
.sr-sum__n { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }

.sr-adr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sr-adr__c { padding: 22px; border-radius: 20px; background: var(--bg-2); }
.sr-adr__c h3, .sr-abp h3, .sr-abc h3 { margin-top: 14px; font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.sr-adr__c p, .sr-abp p, .sr-abc p { margin-top: 6px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.sr-pg2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: clamp(32px, 5vw, 96px); }
.sr-pg2 .sr-faq h2 { font-size: clamp(23px, 1.9vw, 29px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.sr-adc { display: grid; justify-items: start; gap: 10px; padding: 28px; border-radius: 24px; background: #0f1311; color: #fff; }
.sr-adc h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.sr-adc p { color: rgba(255, 255, 255, .7); font-size: 15px; line-height: 1.6; }
.sr-adc__m { font-family: var(--f-mono); font-size: 15px; color: #fff; }
.sr4 .sr-adc .sr-btn--pri { margin-top: 6px; background: #fff; color: var(--ink); }
.sr4 .sr-adc .sr-btn--pri:hover { background: #e9ece7; }
.sr-adc :focus-visible { outline-color: #fff; }

/* ── 6) Hakkımızda ─────────────────────────────────────── */
.sr-ab__lead { margin-top: 16px; max-width: 64ch; color: var(--ink-2); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; letter-spacing: -.01em; }
.sr-abp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sr-abp article, .sr-abc article { padding: 22px; border: 1px solid var(--line); border-radius: 20px; }
.sr-abst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sr-abst li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 16px; padding: 22px; border-radius: 20px; background: var(--bg-2); }
.sr-abst__n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 18px; font-weight: 700; }
.sr-abst h3 { margin-top: 2px; font-size: 17px; font-weight: 650; }
.sr-abst p { margin-top: 4px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.sr-abt { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.sr-abt__r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 70px minmax(0, 1.3fr); align-items: center; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.sr-abt__r.is-h { border-top: 0; background: var(--bg-2); color: var(--ink-3); font-size: 13px; font-weight: 600; }
.sr-abt__r a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; transition: color .2s var(--ease); }
.sr-abt__r a:hover { color: var(--ink-3); }
.sr-abf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.sr-abf > div { padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; }
.sr-abf dt { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.sr-abf dd { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.sr4 .sr-pgs.sr-abn { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; margin-top: clamp(52px, 4.6vw, 76px); padding: 30px 32px; border-radius: 24px; background: var(--bg-2); }
.sr-abn h2 { font-size: clamp(21px, 1.7vw, 25px); font-weight: 700; letter-spacing: -.025em; }
.sr-abn p { margin-top: 8px; max-width: 62ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.sr-abn__l { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 560px; }
.sr-abn__l a { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 14.5px; font-weight: 550; transition: border-color .2s var(--ease); }
.sr-abn__l a:hover { border-color: var(--ink-3); }
.sr-abn__l i { color: var(--ink-3); font-size: 15px; }
.sr-abc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sr-abc a { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 600; transition: color .2s var(--ease); }
.sr-abc a:hover { color: var(--ink-3); }
.sr-ab__upd { margin-top: 24px; color: var(--ink-3); font-size: 13.5px; }

/* ── duyarlı ───────────────────────────────────────────── */
@media (max-width: 1360px) {
  .sr-abp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .sr-adps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-gt9 { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .sr-gt__lede { grid-column: 1 / -1; max-width: 72ch; margin-left: 0; }
  .sr-cal { grid-template-columns: minmax(0, 1fr); }
  .sr-sum { position: static; box-shadow: none; }
  .sr-pg2 { grid-template-columns: minmax(0, 1fr); }
  .sr4 .sr-pgs.sr-abn { grid-template-columns: minmax(0, 1fr); }
  .sr-abn__l { justify-content: flex-start; max-width: none; }
}
@media (max-width: 980px) {
  .sr-f9__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
  .sr-abst, .sr-adr, .sr-abc { grid-template-columns: minmax(0, 1fr); }
  .sr-abt__r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .sr-abt__r span:nth-child(3) { display: none; }
  .sr-abt__r span:nth-child(4) { grid-column: 2; }
  .sr-abt__r.is-h span:nth-child(4) { display: none; }
}
@media (max-width: 720px) {
  .sr-f9 .sr-foot__games a { height: 42px; font-size: 14px; }
  .sr-hk p { font-size: 25px; }
  .sr-f9__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-gt__lede { font-size: 14.5px; }
  .sr-bc ol { font-size: 13px; }
  .sr-pg { padding-top: 18px; }
  .sr-pg__h { font-size: 34px; }
  .sr-pg__lede { font-size: 16.5px; }
  .sr-adh__a { width: 100%; }
  .sr-adh__a .sr-btn { flex: 1; }
  .sr-adt { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; }
  .sr-adt__b { flex: none; }
  .sr-adh__s, .sr-abs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-adh__s > div:nth-child(3), .sr-abs > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .sr-adh__s > div:nth-child(n+3), .sr-abs > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sr-adps, .sr-abp, .sr-abf { grid-template-columns: minmax(0, 1fr); }
  .sr-cal__r { grid-template-columns: 132px repeat(8, 92px); }
  .sr-cal__t { min-width: 0; width: max-content; }
  .sr-cal__l { padding: 10px 10px 10px 14px; }
  .sr-cal__l b { font-size: 13.5px; }
  .sr-abt__r { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 18px; }
  .sr-abt__r span:nth-child(4) { grid-column: auto; }
  .sr-abt__r.is-h { display: none; }
  .sr4 .sr-pgs.sr-abn { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-wf .is-hl, .sr-cal__r.is-flash { animation: none; }
}

/* ═══ v10/style-10.css ═══ */
/* sunuculari.com v10 — v9'un (style-9.css) üstüne gelir: Sunucunu tanıt sayfası, Rehberler dizini ve
   rehber yazısı. Başlık, rakamlar, adımlar ve tablo Reklam ver / Hakkımızda bileşenlerini kullanır;
   burada yalnız yeni parçalar var. */

.sr-ow .sr-abt__r { grid-template-columns: minmax(0, .9fr) minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.2fr); }

.sr-ow2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sr-ow2__c { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.sr-ow2__c.is-paid { background: var(--bg-2); border-color: transparent; }
.sr-ow2__c h2 { font-size: clamp(21px, 1.7vw, 25px); font-weight: 700; letter-spacing: -.025em; }
.sr-ow2__c > p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.sr-ow2__c .sr-adp__l { margin: 12px 0 0; font-size: 15px; }
.sr-ow2__c .sr-btn { margin-top: auto; }
.sr-ow2__c.is-paid .sr-adp__l { margin-bottom: 20px; }

/* Soru-cevap: başlık sorunun kendisi, ilk cümle cevap. Kapalı akordeon değil, metin hep görünür. */
.sr-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 72px); }
.sr-qa article { padding: 20px 0 22px; border-top: 1px solid var(--line); }
.sr-qa h3 { font-size: 17.5px; font-weight: 650; letter-spacing: -.015em; line-height: 1.35; }
.sr-qa p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }

.sr-owc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 30px 32px; border-radius: 24px; background: #0f1311; color: #fff; }
.sr-owc h2 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 700; letter-spacing: -.03em; }
.sr-owc p { margin-top: 6px; max-width: 62ch; color: rgba(255, 255, 255, .7); font-size: 15.5px; line-height: 1.6; }
.sr4 .sr-owc .sr-btn--pri { background: #fff; color: var(--ink); }
.sr4 .sr-owc .sr-btn--pri:hover { background: #e9ece7; }
.sr-owc :focus-visible { outline-color: #fff; }

/* ── Rehberler dizini ─────────────────────────────────────── */
.sr-gds .sr-sh4 h2 { display: inline-flex; align-items: center; gap: 12px; }
.sr-gds .sr-sh4 .sr-meta a, .sr-art .sr-sh4 .sr-meta a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; transition: color .2s var(--ease); }
.sr-gds .sr-sh4 .sr-meta a:hover, .sr-art .sr-sh4 .sr-meta a:hover { color: var(--ink-3); }
.sr-gdl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sr-gd { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--card); transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
a.sr-gd:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.sr-gd__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.sr-gd__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
a.sr-gd:hover .sr-gd__img img { transform: scale(1.04); }
.sr-gd__b { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.sr-gd__cat { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.sr-gd__b b { font-size: 17px; font-weight: 650; letter-spacing: -.015em; line-height: 1.35; }
.sr-gd__b small { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.sr-gd__m { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; color: var(--ink-3); font-size: 13px; }
.sr-gd__m em { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; background: var(--bg-2); font-style: normal; font-weight: 600; }
.sr-gd.is-soon .sr-gd__img img { filter: saturate(.55); opacity: .8; }

/* ── Rehber yazısı ───────────────────────────────────────── */
.sr-art__h { max-width: 880px; }
.sr-art__cat { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--acc-ink); font-size: 14px; font-weight: 650; }
.sr-art .sr-pg__h { margin-top: 10px; max-width: 24ch; }
.sr-art .sr-pg__lede { max-width: 66ch; font-size: 19px; }
.sr-art__by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 22px; color: var(--ink-3); font-size: 14px; }
.sr-art__by > div { display: grid; line-height: 1.3; }
.sr-art__by > div b { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.sr-art__by > div small { font-size: 13px; }
.sr-art__by > span:not(.sr-art__av) { display: inline-flex; align-items: center; gap: 6px; }
.sr-art__av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--acc-soft); color: var(--acc-ink); font-size: 14px; font-weight: 700; }
.sr-art__hero { margin: 28px 0 0; }
.sr-art__hero img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: 24px; }
.sr-art__hero figcaption { margin-top: 8px; color: var(--ink-3); font-size: 13px; }
.sr-art__g { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: clamp(32px, 5vw, 88px); margin-top: clamp(36px, 3.6vw, 56px); }
.sr-art__b { min-width: 0; max-width: 72ch; }
.sr-art__s { scroll-margin-top: 90px; }
.sr-art__s + .sr-art__s { margin-top: 44px; }
.sr-art__s h2 { margin-bottom: 12px; font-size: clamp(22px, 1.8vw, 27px); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.sr-art__s > p { color: var(--ink-2); font-size: 17px; line-height: 1.75; }
.sr-art__s > p + p { margin-top: 12px; }
.sr-art__s a { color: var(--acc-ink); font-weight: 600; transition: color .2s var(--ease); }
.sr-art__s a:hover { color: var(--ink); }
.sr-art__ol { counter-reset: st; display: grid; gap: 12px; margin: 4px 0 14px; }
.sr-art__ol li { counter-increment: st; position: relative; padding-left: 46px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.sr-art__ol li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; background: var(--acc-soft); color: var(--acc-ink); font-size: 14px; font-weight: 700; }
.sr-art__ul { display: grid; gap: 8px; margin: 4px 0 14px; }
.sr-art__ul li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.sr-art__ul li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.sr-art__tip { display: flex; gap: 10px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.sr-art__tip i { flex: none; color: var(--acc); font-size: 20px; line-height: 1.25; }
.sr-art__tw { overflow-x: auto; margin: 4px 0 14px; border: 1px solid var(--line); border-radius: 16px; }
.sr-art__tw table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.sr-art__tw th, .sr-art__tw td { padding: 12px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-2); }
.sr-art__tw thead th { border-top: 0; background: var(--bg-2); color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.sr-art__tw tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.sr-qa--1 { grid-template-columns: minmax(0, 1fr); }
.sr-art__rel { margin-top: 44px; }

.sr-art__side { position: sticky; top: 92px; display: grid; gap: 20px; min-width: 0; }
.sr-toc h3 { margin-bottom: 10px; color: var(--ink-3); font-size: 12.5px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
.sr-toc ol { display: grid; border-left: 2px solid var(--line); }
.sr-toc a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--ink-3); font-size: 14.5px; line-height: 1.4; transition: color .2s var(--ease), border-color .2s var(--ease); }
.sr-toc a:hover { color: var(--ink); }
.sr-toc a.is-on { border-left-color: var(--acc); color: var(--ink); font-weight: 600; }
.sr-try { padding: 18px; border-radius: 20px; background: var(--bg-2); }
.sr-try h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 10px; font-size: 15px; font-weight: 650; }
.sr-try h3 .sr-live { gap: 7px; }
.sr-try h3 small { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.sr-try ul { display: grid; gap: 2px; margin: 0 -6px; }
.sr-try li { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; transition: background .15s var(--ease); }
.sr-try li:hover { background: var(--card); }
.sr-try__s { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; }
.sr-try__s .sr-ico { flex: none; width: 36px; height: 36px; }
.sr-try__s > span { display: grid; min-width: 0; line-height: 1.3; }
.sr-try__s b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.sr-try__s small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 12.5px; }
.sr-try__on { color: var(--ink-2); font-size: 13px; }
.sr-try__on .sr-live { gap: 6px; }
.sr-try__on .sr-live::before { width: 6px; height: 6px; }
.sr4 .sr-try__cp { display: grid; width: 32px; height: 32px; font-size: 15px; }
.sr-try > a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 600; transition: color .2s var(--ease); }
.sr-try > a:hover { color: var(--ink-3); }

@media (max-width: 1180px) {
  .sr-art__g { grid-template-columns: minmax(0, 1fr); }
  .sr-art__side { position: static; }
  .sr-toc { display: none; }
  .sr-art__b { max-width: none; }
}
@media (max-width: 980px) {
  .sr-ow .sr-abt__r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .sr-qa { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .sr-ow2 { grid-template-columns: minmax(0, 1fr); }
  .sr-ow2__c { padding: 22px 20px; }
  .sr-ow .sr-abt__r { grid-template-columns: minmax(0, 1fr); }
  .sr-owc { padding: 24px 20px; }
  .sr-owc__a, .sr-owc__a .sr-btn { width: 100%; }
  .sr-art .sr-pg__lede { font-size: 17px; }
  .sr-art__hero img { aspect-ratio: 16 / 10; border-radius: 16px; }
  .sr-art__s > p, .sr-art__ol li, .sr-art__ul li { font-size: 16px; }
  .sr-art__tw table { font-size: 14px; }
  .sr-art__tw th, .sr-art__tw td { padding: 10px 12px; }
  .sr-art__tw tbody th { white-space: normal; }
}

/* ═══ v11/style-11.css ═══ */
/* sunuculari.com v11 — v10/style-10.css'in üstüne gelir.
   Giydirme artık sayfayı daraltmıyor: v7'deki iki yan panel + 1180 px sütun kalktı. Yerine:
   1) Sahne: oyun sayfasının en üstünde tam genişlik reklam alanı. Reklamverenin 3 görseli yavaşça yakınlaşarak
      döner, fareyle hafifçe kayar; büyük açılış geri sayımı rakam rakam akar. Kaydırınca görsel yavaş kalır,
      yazılar söner.
   2) Şerit: sahne başlığın altına girince 52 px'lik ince şerit iner ve sayfa boyunca kalır; kapatılabilir.
      Sunucu sayfalarında sahne yok, şerit en üstte akışta durur.
   İçerik her zaman tam genişlik; filtre paneli şerit inince onun altına kayar. */

.sr-stagebox[hidden] { display: none; }

/* ── sahne ─────────────────────────────────────────────── */
.sr-stage { --gold: #f4c76a; position: relative; height: clamp(320px, 25vw, 380px); overflow: hidden; isolation: isolate; background: #120a1f; color: #fff; }
.sr-stage__media { position: absolute; inset: 0; cursor: pointer; }
.sr-stage__par { position: absolute; inset: -10% 0; transform: translate3d(0, calc(var(--sp) * 80px), 0) scale(calc(1 + var(--sp) * .06)); will-change: transform; }
.sr-stage__mv { position: absolute; inset: -18px; transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -9px), 0); transition: transform 1s var(--ease); }
.sr-stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; opacity: 0; transition: opacity 1.2s ease; }
.sr-stage__img.is-on { opacity: 1; animation: sr-stg-kb 9s cubic-bezier(.25, .6, .3, 1) both; }
@keyframes sr-stg-kb { from { transform: scale(1.12); } to { transform: scale(1); } }
.sr-stage__shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(14, 7, 26, .94) 0%, rgba(14, 7, 26, .8) 28%, rgba(14, 7, 26, .28) 60%, rgba(14, 7, 26, .62) 100%),
  linear-gradient(0deg, rgba(14, 7, 26, .5), transparent 42%); }

.sr-stage__in { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: clamp(28px, 3.6vw, 64px); pointer-events: none; opacity: calc(1 - var(--sp) * 1.3); transform: translate3d(0, calc(var(--sp) * -40px), 0); }
.sr-stage__in > * { pointer-events: auto; }

.sr-stage__copy { display: grid; justify-items: start; gap: 12px; min-width: 0; }
.sr-stage__eye { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-stage__eye span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); font-size: 13px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sr-stage__eye span:first-child { background: var(--gold); color: #2a1600; box-shadow: none; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sr-stage__name { margin: 4px 0 0; font-size: clamp(48px, 5.2vw, 84px); font-weight: 800; line-height: .95; letter-spacing: .01em; text-transform: uppercase; background: linear-gradient(180deg, #fff7df 8%, #f4c76a 58%, #c98a22); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45)); cursor: pointer; outline-offset: 6px; }
.sr-stage__perk { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.sr-stage__perk i { color: var(--gold); font-size: 18px; }
.sr-stage__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 6px; }
.sr-stage__cta { position: relative; overflow: hidden; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffe09a, #e2a33a); color: #2a1600; font: inherit; font-size: 16.5px; font-weight: 750; cursor: pointer; box-shadow: 0 12px 30px -12px rgba(226, 163, 58, .95); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.sr-stage__cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-20deg); animation: sr-stg-shine 4s ease-in-out 1.4s infinite; }
@keyframes sr-stg-shine { 0%, 62% { left: -60%; } 100% { left: 130%; } }
.sr-stage__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(226, 163, 58, 1); }
.sr-stage__cta i { font-size: 18px; transition: transform .2s var(--ease); }
.sr-stage__cta:hover i { transform: translateX(3px); }
.sr-stage__date { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .86); }
.sr-stage__date i { color: var(--gold); font-size: 17px; }

/* geri sayım: rakam başına kutu, değişen rakam yukarı kayar */
.sr-stage__cd { display: grid; justify-items: center; gap: 12px; perspective: 700px; }
.sr-stage__cdl { font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.sr-stage__ts { display: flex; gap: 10px; }
.sr-stage__t { display: grid; justify-items: center; gap: 8px; min-width: 86px; padding: 16px 10px 12px; border-radius: 18px; background: rgba(18, 10, 32, .52); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 32px -14px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
.sr-stage__dg { display: flex; font-family: var(--f-mono); font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.sr-stage__dg b { position: relative; display: block; width: .62em; height: 1.04em; overflow: hidden; font-weight: inherit; text-align: center; }
.sr-stage__dg b > span { position: absolute; inset: 0; display: block; }
.sr-stage__dg .is-in { animation: sr-dg-in .44s var(--ease) both; }
.sr-stage__dg .is-out { animation: sr-dg-out .44s var(--ease) both; }
@keyframes sr-dg-in { from { transform: translateY(75%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sr-dg-out { to { transform: translateY(-75%); opacity: 0; } }
.sr-stage__t small { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }

/* görsel seçici: üstüne gelince o görsele geçer, alt çizgi sonraki görsele kalan süre */
.sr-stage__ths { display: grid; gap: 10px; }
.sr-stage__th { position: relative; display: block; width: 124px; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; opacity: .6; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); transition: opacity .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.sr-stage__th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sr-stage__th:hover { opacity: .92; }
.sr-stage__th.is-on { opacity: 1; transform: translateX(-6px); box-shadow: 0 0 0 2px var(--gold), 0 12px 26px -12px rgba(0, 0, 0, .85); }
.sr-stage__th i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.sr-stage__th.is-on i { animation: sr-stg-bar 6.5s linear forwards; }
.sr-stage.is-hold .sr-stage__th.is-on i { animation-play-state: paused; }
@keyframes sr-stg-bar { to { transform: scaleX(1); } }

/* "Reklam" etiketi: üstüne gelince "Bu alanı kirala" açılır, Reklam ver sayfasına gider */
.sr-stage__lbl { position: absolute; z-index: 3; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 0; height: 26px; padding: 0 10px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .9); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s var(--ease), gap .3s var(--ease); }
.sr-stage__lbl span, .sr-stage__lbl i { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; transition: max-width .3s var(--ease); }
.sr-stage__lbl:hover, .sr-stage__lbl:focus-visible { gap: 6px; background: rgba(0, 0, 0, .7); }
.sr-stage__lbl:hover span, .sr-stage__lbl:focus-visible span { max-width: 120px; }
.sr-stage__lbl:hover i, .sr-stage__lbl:focus-visible i { max-width: 16px; }

/* ── şerit ─────────────────────────────────────────────── */
.sr-strip { position: fixed; z-index: 55; top: 64px; left: 0; right: 0; height: 52px; overflow: hidden; background: #170d28; color: #fff; box-shadow: 0 12px 26px -16px rgba(10, 4, 20, .6); transform: translateY(-110%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; }
.sr4.is-strip .sr-strip:not(.is-band) { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.2, 1.3, .35, 1), visibility 0s; }
.sr-strip.is-band { position: relative; top: auto; z-index: auto; height: 56px; transform: none; visibility: visible; box-shadow: none; transition: none; }
.sr-strip__bg { position: absolute; inset: 0; background-size: cover; background-position: center 45%; filter: blur(16px) saturate(1.3); transform: scale(1.25); opacity: .55; }
.sr-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23, 13, 40, .94), rgba(23, 13, 40, .74) 60%, rgba(23, 13, 40, .9)); }
.sr-strip__in { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; gap: 10px; }
.sr-strip__go { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 14px; cursor: pointer; outline-offset: -3px; }
.sr-strip__th { flex: none; width: 56px; height: 32px; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.sr-strip__th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sr-strip__ad { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sr-strip__name { flex: none; font-size: 18px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(180deg, #fff3cf, #f0b955); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr-strip__meta { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(255, 255, 255, .8); font-size: 14px; }
.sr-strip__cd { flex: none; margin-left: auto; color: #ffe3a3; font-family: var(--f-mono); font-size: 14.5px; font-weight: 600; }
.sr-strip__cta { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: 999px; background: linear-gradient(180deg, #ffe09a, #e2a33a); color: #2a1600; font-size: 14px; font-weight: 750; transition: transform .2s var(--ease); }
.sr-strip__go:hover .sr-strip__cta { transform: translateX(2px); }
.sr-strip__x { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .7); font-size: 18px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.sr-strip__x:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* şerit inince yapışkan filtre paneli onun altına kayar */
.sr4.has-stage .sr-rail { transition: top .4s var(--ease), max-height .4s var(--ease); }
.sr4.is-strip .sr-rail { top: 140px; max-height: calc(100vh - 162px); }

/* Reklam ver sayfası: giydirme tel çerçevesi artık tam genişlik sahne */
.sr-wf--skin { padding: 12px 14px; }
.sr-wf__stage { flex: none; height: 36px; margin-inline: -7px; border-radius: 0; }

@media (max-width: 1180px) {
  .sr-stage__th { width: 104px; }
  .sr-stage__t { min-width: 74px; padding: 14px 8px 10px; }
  .sr-stage__dg { font-size: 38px; }
}
@media (max-width: 980px) {
  .sr-stage__in { grid-template-columns: minmax(0, 1fr) auto; }
  .sr-stage__ths { display: none; }
  .sr-strip__meta { display: none; }
}
@media (max-width: 720px) {
  .sr-stage { height: auto; }
  .sr-stage__shade { background: linear-gradient(180deg, rgba(14, 7, 26, .4) 0%, rgba(14, 7, 26, .78) 46%, rgba(14, 7, 26, .95) 100%); }
  /* telefonda sıra: etiketler, ad, hediye, tarih, geri sayım, en altta tam genişlik düğme */
  .sr-stage__in { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 12px; padding-top: 60px; padding-bottom: 24px; }
  .sr-stage__copy, .sr-stage__acts { display: contents; }
  .sr-stage__eye { order: 1; }
  .sr-stage__name { order: 2; font-size: 46px; }
  .sr-stage__perk { order: 3; font-size: 15px; }
  .sr-stage__date { order: 4; font-size: 14.5px; }
  .sr-stage__cd { order: 5; margin-top: 6px; justify-items: stretch; gap: 8px; }
  .sr-stage__cta { order: 6; justify-content: center; height: 50px; margin-top: 6px; }
  .sr-stage__ts { gap: 8px; }
  .sr-stage__t { flex: 1; min-width: 0; padding: 12px 4px 9px; border-radius: 14px; }
  .sr-stage__dg { font-size: 30px; }
  .sr-stage__t small { font-size: 10.5px; letter-spacing: .06em; }
  .sr-strip { height: 48px; }
  .sr-strip.is-band { height: 52px; }
  .sr-strip__go { gap: 10px; }
  .sr-strip__ad { display: none; }
  .sr-strip__name { font-size: 16px; }
  .sr-strip__cd { font-size: 13px; }
  .sr-strip__cta { width: 34px; padding: 0; justify-content: center; }
  .sr-strip__cta span { display: none; }
}
@media (max-width: 400px) {
  .sr-strip__th { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-stage__img.is-on { animation: none; }
  .sr-stage__cta::after { display: none; }
  .sr-stage__th.is-on i { animation: none; transform: scaleX(1); }
  .sr-stage__mv, .sr-strip, .sr4.is-strip .sr-strip:not(.is-band), .sr4.has-stage .sr-rail { transition: none; }
}

/* ═══ v12/style-12.css ═══ */
/* sunuculari.com v12 — v11/style-11.css'in üstüne gelir.
   1) Arama (başlıktan açılan tam genişlik)  2) Çerez tercihleri  3) Sunucu sayfası: bölüm başlığı bağlantıları ve
   oyuncu yorumları  4) Ortak: sayfa başlığı, kod bloğu, seçim kutusu, metin alanı  5) İletişim  6) Site haritası
   7) Yasal metinler  8) Sahiplik doğrulama  9) Oy ödülü  10) Widget  11) Etkinlikler  12) Klanlar  13) Takım bul
   14) Altbilgi */

/* ── 1) Arama ─────────────────────────────────────────── */
.sr-ly--srch .sr-ly__box { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; max-height: 100%; background: transparent; }
.sr-sx__bar { flex: none; height: 64px; background: var(--card); border-bottom: 1px solid var(--line); }
.sr-sx__barin { height: 100%; display: flex; align-items: center; gap: 14px; }
.sr-sx__mag { flex: none; color: var(--ink); font-size: 22px; }
.sr-sx__q { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font-size: 20px; font-weight: 500; letter-spacing: -.012em; }
.sr-sx__q:focus { outline: 0; }
.sr-sx__q::placeholder { color: var(--ink-3); font-weight: 400; }
.sr-sx__clr { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-3); font-size: 20px; transition: color .2s var(--ease); }
.sr-sx__clr:hover { color: var(--ink); }
.sr-sx__scope { position: relative; flex: none; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: var(--bg-2); }
.sr-sx__scope button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; color: var(--ink-3); font-size: 14px; font-weight: 550; white-space: nowrap; transition: color .25s var(--ease); }
.sr-sx__scope button[aria-checked="true"] { color: var(--ink); }
.sr-sx__sp { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--card); box-shadow: var(--sh-1), 0 0 0 1px var(--line); transition: transform .4s cubic-bezier(.3, 1.3, .4, 1); }
.sr-sx__scope[data-on="1"] .sr-sx__sp { transform: translateX(100%); }
.sr-sx__x { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); font-size: 14.5px; font-weight: 550; transition: background .2s var(--ease), color .2s var(--ease); }
.sr-sx__x:hover { background: var(--bg-2); color: var(--ink); }
.sr-sx__body { flex: 0 1 auto; min-height: 0; display: flex; background: var(--card); border-radius: 0 0 28px 28px; box-shadow: 0 40px 80px -30px rgba(15, 19, 17, .38); }
.sr-sx__res { position: relative; flex: 1; min-height: 0; max-height: min(76vh, 760px); overflow: auto; overscroll-behavior: contain; }
.sr-sx__in { position: relative; padding-top: 22px; padding-bottom: 30px; }
.sr-sx__hl { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: 14px; background: var(--bg-2); opacity: 0; pointer-events: none; }
.sr-sx__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 20px 56px; }
.sr-sx__grp + .sr-sx__grp { margin-top: 24px; }
.sr-sx__grp h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 10px; color: var(--ink-3); font-size: 12.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.sr-sx__grp h3 em { color: var(--ink-2); font-style: normal; }
.sr-sx__grp h3 .sr-live { gap: 7px; }
.sr-sx__list { display: grid; gap: 2px; }
.sr-sx__srv, .sr-sx__pg { position: relative; z-index: 1; display: grid; align-items: center; gap: 14px; min-width: 0; padding: 8px 10px; border-radius: 14px; cursor: pointer; text-align: left; }
.sr-sx__srv { grid-template-columns: 76px minmax(0, 1fr) auto minmax(0, 170px) auto; }
.sr-sx__img { position: relative; width: 76px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--bg-3); }
.sr-sx__img > img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.sr-sx__srv.is-hl .sr-sx__img > img { transform: scale(1.07); }
.sr-sx__img .sr-ico { position: absolute; left: 4px; bottom: 4px; width: 24px; height: 24px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .95); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.sr-sx__img .sr-ico img { width: 16px; height: 16px; }
.sr-sx__t { display: grid; gap: 2px; min-width: 0; }
.sr-sx__t b { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15.5px; font-weight: 620; letter-spacing: -.01em; }
.sr-sx__t b > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-sx__t b .sr-verified { font-size: 15px; }
.sr-sx__t small { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--ink-3); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.sr-sx__t mark, .sr-sx__ip mark { background: none; color: var(--ink); font-weight: 760; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--acc) 60%, transparent); }
.sr-sx__on { font-size: 14px; font-weight: 600; white-space: nowrap; }
.sr-sx__on .sr-live { gap: 7px; }
.sr-sx__soon { color: var(--warn); font-size: 13px; }
.sr-sx__ip { min-width: 0; overflow: hidden; color: var(--ink-3); font-family: var(--f-mono); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.sr4 .sr-sx__cp { opacity: 0; transform: translateX(4px); transition: opacity .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
.sr4 .sr-sx__srv.is-hl .sr-sx__cp, .sr4 .sr-sx__cp.is-done, .sr4 .sr-sx__cp:focus-visible { opacity: 1; transform: none; }
.sr-sx__pg { grid-template-columns: 40px minmax(0, 1fr) auto; }
.sr-sx__pi { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg-2); color: var(--ink-2); font-size: 19px; transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.sr-sx__pi img { width: 22px; height: 22px; }
.sr-sx__pi .sr-gi { width: 26px; height: 26px; }
.sr-sx__pg.is-hl .sr-sx__pi { background: var(--card); box-shadow: var(--sh-1); }
.sr-sx__go { color: var(--ink-3); font-size: 18px; opacity: 0; transform: translateX(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.sr-sx__pg.is-hl .sr-sx__go { color: var(--ink); opacity: 1; transform: none; }
.sr-sx__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 4px; }
.sr-sx__chip { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 14.5px; font-weight: 550; transition: border-color .2s var(--ease); }
.sr-sx__chip.is-hl { border-color: transparent; }
.sr-sx__ci { display: grid; place-items: center; width: 26px; height: 26px; }
.sr-sx__ci img { width: 20px; height: 20px; }
.sr-sx__ci .sr-gi { width: 24px; height: 24px; }
.sr-sx__ci i { color: var(--ink-3); font-size: 17px; }
.sr-sx__note { margin: 8px 10px 0; color: var(--ink-3); font-size: 13.5px; }
.sr-sx__wide { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 14px; color: var(--ink-2); font-size: 14.5px; font-weight: 550; transition: border-color .2s var(--ease), color .2s var(--ease); }
.sr-sx__wide i:last-child { margin-left: auto; }
.sr-sx__wide:hover { border-color: var(--ink-3); color: var(--ink); }
.sr-sx__empty { display: grid; justify-items: start; gap: 10px; padding: 14px 10px 6px; }
.sr-sx__empty b { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.sr-sx__empty p { color: var(--ink-2); }
.sr-sx__empty .sr-sx__chips { padding: 0; }

/* ── 2) Çerez tercihleri ──────────────────────────────── */
.sr-ly--ck .sr-ly__box { position: absolute; right: 24px; bottom: 24px; width: min(470px, calc(100% - 32px)); padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--sh-3); }
.sr-ly--bottom .sr-ly__box.sr-ck { padding: 0 20px 24px; }
.sr-ck__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sr-ck__h h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.sr-ck__x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink-3); font-size: 20px; transition: background .2s var(--ease), color .2s var(--ease); }
.sr-ck__x:hover { background: var(--bg-2); color: var(--ink); }
.sr-ck__p { margin-top: 6px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.sr-ck__l { display: grid; margin-top: 14px; }
.sr-ck__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.sr-ck__r b { font-size: 15px; font-weight: 650; }
.sr-ck__r p { color: var(--ink-3); font-size: 13.5px; line-height: 1.45; }
.sr-ck__lock { color: var(--live); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sr-ck__tg { width: auto; padding: 0; }
.sr-ck__f { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; margin-top: 14px; }
.sr-ck__f .sr-btn { height: 40px; padding: 0 14px; font-size: 14px; }
.sr-ck__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--ink-3); font-size: 13.5px; transition: color .2s var(--ease); }
.sr-ck__more:hover { color: var(--ink); }

/* ── 3) Sunucu sayfası: bölüm başlığı + oyuncu yorumları ── */
.sr-blk__hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 20px; }
.sr-blk__hd .sr-blk__t { margin-bottom: 0; }
.sr-blk__more { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 14.5px; font-weight: 600; transition: color .2s var(--ease); }
.sr-blk__more i { transition: transform .2s var(--ease); }
.sr-blk__more:hover { color: var(--ink); }
.sr-blk__more:hover i { transform: translateX(3px); }

.sr-rvs__sum { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "sc meter" "tags tags"; align-items: center; gap: 20px 32px; padding: 24px 26px; border-radius: 22px; background: var(--bg-2); }
.sr-rvs__sc { grid-area: sc; display: grid; }
.sr-rvs__sc b { font-size: 48px; font-weight: 760; letter-spacing: -.045em; line-height: 1; }
.sr-rvs__sc span { margin-top: 6px; font-size: 15px; font-weight: 650; }
.sr-rvs__sc small { color: var(--ink-3); font-size: 13.5px; }
.sr-rvs__meter { grid-area: meter; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--down) 24%, var(--bg-3)); }
.sr-rvs__meter i { display: block; height: 100%; border-radius: 999px; background: var(--live); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) .1s; }
.sr-rvs__sum.is-in .sr-rvs__meter i { transform: scaleX(var(--p)); }
.sr-rvs__tags { grid-area: tags; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sr-rvs__tl { width: 100%; margin-bottom: 2px; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.sr-rvs__tag { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 7px 0 14px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 14px; font-weight: 550; transition: box-shadow .2s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.sr-rvs__tag em { display: grid; place-items: center; min-width: 28px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--live-soft); color: var(--up); font-size: 12.5px; font-style: normal; font-weight: 650; transition: background .25s var(--ease), color .25s var(--ease); }
.sr-rvs__tag.is-bad em { background: #fbe9e7; color: var(--down); }
.sr-rvs__tag:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.sr-rvs__tag[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.sr-rvs__tag[aria-pressed="true"] em { background: rgba(255, 255, 255, .16); color: #fff; }
.sr-rvs__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 24px 0 4px; }
.sr-rvs__cnt { color: var(--ink-3); font-size: 14px; }
.sr-rvs__list { position: relative; }
.sr-rv { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.sr-rv__av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 17px; font-weight: 700; }
.sr-rv__av.is-0 { background: #e6f2ea; color: #1d6b43; }
.sr-rv__av.is-1 { background: #e8edf8; color: #2a4a9a; }
.sr-rv__av.is-2 { background: #f6ebe3; color: #8a4b1d; }
.sr-rv__av.is-3 { background: #f1e8f5; color: #6b3a86; }
.sr-rv__av.is-4 { background: #e4f1f2; color: #1f6a70; }
.sr-rv__av.is-5 { background: #f4f0e1; color: #75621a; }
.sr-rv__b { min-width: 0; }
.sr-rv__m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--ink-3); font-size: 14px; }
.sr-rv__m b { color: var(--ink); font-size: 15.5px; font-weight: 650; }
.sr-rv__ok { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.sr-rv__ok i { color: var(--live); font-size: 15px; }
.sr-rv__pend { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 600; }
.sr-rv__rec { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 14.5px; font-weight: 650; }
.sr-rv__rec i { font-size: 17px; }
.sr-rv__rec.is-up { color: var(--up); }
.sr-rv__rec.is-down { color: var(--down); }
.sr-rv__t { max-width: 68ch; margin-top: 6px; color: var(--ink); font-size: 16.5px; line-height: 1.65; }
.sr-rv__tg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sr-rv__tg span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--bg-2); color: var(--ink-2); font-size: 13px; }
.sr-rv__tg span.is-bad { background: #fbeceb; color: #a1352d; }
.sr-rv__f { display: flex; align-items: center; gap: 4px; margin: 12px 0 0 -10px; }
.sr-rv__hp, .sr-rv__rp { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border-radius: 999px; color: var(--ink-2); font-size: 14px; font-weight: 550; transition: background .2s var(--ease), color .2s var(--ease); }
.sr-rv__hp:hover, .sr-rv__rp:hover { background: var(--bg-2); color: var(--ink); }
.sr-rv__hp i { font-size: 17px; }
.sr-rv__hp em { display: inline-block; color: var(--ink-3); font-style: normal; }
.sr-rv__hp[aria-pressed="true"], .sr-rv__hp[aria-pressed="true"] em { color: var(--up); }
.sr-rv__rp { color: var(--ink-3); font-size: 13.5px; }
.sr-rv__reply { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--bg-2); }
.sr-rv__reply .sr-ico { width: 36px; height: 36px; border-radius: 10px; }
.sr-rv__reply .sr-ico img { width: 22px; height: 22px; }
.sr-rv__reply .sr-ico--img img { width: 100%; height: 100%; }
.sr-rv__rh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 14px; }
.sr-rv__rh b { font-weight: 650; }
.sr-rv__rh span { color: var(--ink-3); font-size: 13px; }
.sr-rv__reply p + p { margin-top: 4px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.sr-rv.is-mine { margin: 8px -16px 0; padding: 22px 16px; border-top: 0; border-radius: 18px; background: color-mix(in srgb, var(--acc) 6%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 22%, white); }
.sr-rvs__empty { padding: 24px 0; color: var(--ink-3); }
.sr-rvs__more { margin-top: 12px; }
.sr-rvs__more em { margin-left: 2px; color: var(--ink-3); font-style: normal; }

.sr-rvc, .sr-lfc { overflow: hidden; }
.sr-rvc__in, .sr-lfc__in { display: grid; gap: 10px; margin-top: 16px; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--card); box-shadow: var(--sh-2); }
.sr-lfc__in { margin: 0 0 20px; }
.sr-rvc__q { font-size: 14.5px; font-weight: 650; }
.sr-rvc__q small { margin-left: 6px; color: var(--ink-3); font-size: 13px; font-weight: 500; }
.sr-rvc__rec { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.sr-rvc__rec button { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border: 1px solid var(--line-2); border-radius: 16px; color: var(--ink-2); font-size: 15.5px; font-weight: 600; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.sr-rvc__rec button i { font-size: 20px; }
.sr-rvc__rec button:hover { border-color: var(--ink-3); color: var(--ink); }
.sr-rvc__rec button[data-v="1"][aria-checked="true"] { border-color: var(--up); background: var(--live-soft); color: var(--up); }
.sr-rvc__rec button[data-v="0"][aria-checked="true"] { border-color: var(--down); background: #fbeceb; color: var(--down); }
.sr-rvc__ta, .sr-ta { width: 100%; min-height: 110px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; font-size: 15.5px; line-height: 1.55; resize: vertical; }
.sr-rvc__ta:focus, .sr-ta:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px var(--bg-2); }
.sr-rvc__meta { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-3); font-size: 13px; }
.sr-rvc__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.sr-rvc__tags button { height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); font-size: 14px; font-weight: 550; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.sr-rvc__tags button:hover { border-color: var(--ink-3); color: var(--ink); }
.sr-rvc__tags button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.sr-rvc__tags button.is-bad[aria-pressed="true"] { border-color: var(--down); background: var(--down); }
.sr-rvc__f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.sr-rvc__f > span { margin-right: auto; color: var(--ink-3); font-size: 13.5px; }

/* ── 4) Ortak ─────────────────────────────────────────── */
.sr-pgh__tabs { margin-top: 30px; }
.sr-select { width: 100%; height: 52px; padding: 0 44px 0 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%236d756f' d='M12 15.6 6.4 10l1.4-1.4 4.2 4.2 4.2-4.2 1.4 1.4z'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--ink); font: inherit; font-size: 16px; appearance: none; -webkit-appearance: none; }
.sr-select:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px var(--bg-2); }
.sr-field .sr-ta { min-height: 150px; }
.sr-field.is-err .sr-ta { border-color: var(--danger); }
.sr-cb { margin: 12px 0 4px; border-radius: 16px; overflow: hidden; background: #111613; color: #e8ede9; }
.sr-cb__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 42px; padding: 0 8px 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); font-size: 12.5px; font-weight: 600; }
.sr-cb__cp { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; color: rgba(255, 255, 255, .82); font-size: 13px; font-weight: 600; transition: background .2s var(--ease), color .2s var(--ease); }
.sr-cb__cp:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sr-cb__cp.is-done { color: #7be0a6; }
.sr-cb pre { margin: 0; padding: 14px 16px 16px; overflow-x: auto; font-family: var(--f-mono); font-size: 13.5px; line-height: 1.7; white-space: pre; }
.sr-cb :focus-visible { outline-color: #fff; }

/* ── 5) İletişim ──────────────────────────────────────── */
.sr-ct__g { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: clamp(28px, 4vw, 72px); margin-top: clamp(32px, 3vw, 48px); }
.sr-ct__card { padding: clamp(22px, 2.4vw, 34px); border: 1px solid var(--line); border-radius: 26px; background: var(--card); box-shadow: var(--sh-2); }
.sr-ct__f { display: grid; gap: 18px; }
.sr-ct__fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.sr-ct__fs legend { margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 600; }
.sr-ct__tp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sr-ct__tp button { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 14px; color: var(--ink-2); font-size: 14.5px; font-weight: 550; text-align: left; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.sr-ct__tp button i { color: var(--ink-3); font-size: 19px; transition: color .2s var(--ease); }
.sr-ct__tp button:hover { border-color: var(--ink-3); color: var(--ink); }
.sr-ct__tp button.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
.sr-ct__tp button.is-on i { color: #fff; }
.sr-ct__hint { margin-top: -4px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.sr-ct__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sr-ct__x { display: grid; gap: 14px; overflow: hidden; }
.sr-ct__x:empty { margin-top: -18px; }
.sr-ct__note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.sr-ct__note i { color: var(--acc); font-size: 18px; }
.sr-ct__sb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sr-ct__sb span { color: var(--ink-3); font-size: 13.5px; }
.sr-ct__side { display: grid; gap: 30px; }
.sr-ct__side h2 { margin-bottom: 14px; color: var(--ink-3); font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.sr-ct__mails { display: grid; gap: 14px; }
.sr-ct__mails li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; }
.sr-ct__mails b { display: block; font-size: 15px; font-weight: 650; }
.sr-ct__mails a { color: var(--ink-2); font-size: 14.5px; transition: color .2s var(--ease); }
.sr-ct__mails a:hover { color: var(--ink); }
.sr-ct__links { display: grid; border-top: 1px solid var(--line); }
.sr-ct__links a { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 550; }
.sr-ct__links i { color: var(--ink-3); transition: transform .2s var(--ease), color .2s var(--ease); }
.sr-ct__links a:hover i { color: var(--ink); transform: translateX(3px); }
.sr-ct__tip { display: flex; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--bg-2); color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.sr-ct__tip i { color: #5865f2; font-size: 20px; }
.sr-ct__ok { display: grid; justify-items: start; gap: 12px; padding: 18px 0; }
.sr-ct__oki { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--live); color: #fff; font-size: 32px; }
.sr-ct__ok h2 { font-size: 26px; font-weight: 720; letter-spacing: -.03em; }
.sr-ct__ok p { max-width: 52ch; color: var(--ink-2); line-height: 1.6; }

/* ── 6) Site haritası ─────────────────────────────────── */
.sr-smp__gs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sr-smp__g { padding: 20px 22px; border: 1px solid var(--line); border-radius: 22px; }
.sr-smp__g h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.sr-smp__g h2 span { display: grid; }
.sr-smp__g h2 small { color: var(--ink-3); font-size: 13px; font-weight: 500; }
.sr-smp__g .sr-gi { width: 36px; height: 36px; border-radius: 10px; }
.sr-smp__g ul, .sr-smp__c ul { display: grid; gap: 2px; }
.sr-smp__g a, .sr-smp__c a { display: block; padding: 4px 0; color: var(--ink-2); font-size: 14.5px; transition: color .2s var(--ease); }
.sr-smp__g a:hover, .sr-smp__c a:hover { color: var(--ink); }
.sr-smp__cs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
.sr-smp__c h2 { margin-bottom: 10px; font-size: 15px; font-weight: 700; }

/* ── 7) Yasal metinler ────────────────────────────────── */
.sr-lg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; color: var(--ink-3); font-size: 14px; }
.sr-lg__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.sr-lg__meta .sr-tag { background: var(--warn-soft); color: var(--warn); }
.sr-lg__ck { margin-top: 14px; }
.sr-lg__q { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; }
.sr-lg__q a { color: var(--ink); font-weight: 600; }
.sr-lg .sr-art__side { gap: 30px; }
.sr-lg__docs h3 { margin-bottom: 8px; color: var(--ink-3); font-size: 12.5px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
.sr-lg__docs ul { display: grid; gap: 2px; margin: 0 -12px; }
.sr-lg__docs a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--ink-2); font-size: 14.5px; transition: background .2s var(--ease), color .2s var(--ease); }
.sr-lg__docs a:hover { background: var(--bg-2); color: var(--ink); }
.sr-lg__docs a.is-on { background: var(--bg-2); color: var(--ink); font-weight: 600; }

/* ── 8) Sahiplik doğrulama ────────────────────────────── */
.sr-vf__g, .sr-rw__g { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: clamp(28px, 4vw, 72px); margin-top: clamp(32px, 3vw, 48px); }
.sr-vf__ms { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.sr-vf__ms button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 18px; text-align: left; transition: border-color .2s var(--ease), box-shadow .25s var(--ease); }
.sr-vf__ms button > i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--bg-2); font-size: 19px; transition: background .25s var(--ease), color .25s var(--ease); }
.sr-vf__ms button b { display: block; font-size: 15px; font-weight: 650; }
.sr-vf__ms button small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.35; }
.sr-vf__ms button:hover { border-color: var(--ink-3); }
.sr-vf__ms button.is-on { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.sr-vf__ms button.is-on > i { background: var(--acc); color: #fff; }
.sr-vf__body { margin-top: 26px; overflow: hidden; }
.sr-vf__body .sr-art__ol li { font-size: 16px; }
.sr-vf__p { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.sr-vf__ck { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.sr-vf__ck input { font-family: var(--f-mono); font-size: 15px; }
.sr-vf__run { display: grid; gap: 10px; margin-top: 20px; }
.sr-vf__run li { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 15px; transition: color .2s var(--ease); }
.sr-run__i { position: relative; flex: none; width: 22px; height: 22px; border: 2px solid var(--line-2); border-radius: 50%; transition: background .25s var(--ease), border-color .25s var(--ease); }
.sr-vf__run li.is-run { color: var(--ink); }
.sr-vf__run li.is-run .sr-run__i { border-top-color: var(--acc); animation: sr-spin .7s linear infinite; }
.sr-vf__run li.is-ok { color: var(--ink-2); }
.sr-vf__run li.is-ok .sr-run__i { border-color: var(--live); background: var(--live); }
.sr-vf__run li.is-ok .sr-run__i::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes sr-spin { to { transform: rotate(360deg); } }
.sr-vf__run li.sr-run__done { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 6px; padding: 16px 18px; border-radius: 18px; background: var(--live-soft); color: var(--ink); }
.sr-run__done > i { color: #2f55e4; font-size: 32px; }
.sr-run__done b { display: block; font-size: 16px; }
.sr-run__done span { color: var(--ink-2); font-size: 14px; }
.sr-vf__side { padding: 22px 24px; border-radius: 22px; background: var(--bg-2); }
.sr-vf__side h2 { margin-bottom: 16px; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.sr-vf__side ul { display: grid; gap: 16px; }
.sr-vf__side li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
.sr-vf__side li > i { color: var(--acc); font-size: 20px; }
.sr-vf__side b { display: block; font-size: 15px; }
.sr-vf__side span { color: var(--ink-2); font-size: 14px; line-height: 1.5; }

/* ── 9) Oy ödülü ──────────────────────────────────────── */
.sr-rw__g { grid-template-columns: minmax(0, 1fr) 380px; }
.sr-rw__steps { display: grid; }
.sr-rw__steps > li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding-bottom: 32px; }
.sr-rw__steps > li::before { content: ""; position: absolute; left: 21px; top: 52px; bottom: 8px; width: 2px; background: var(--line); }
.sr-rw__steps > li:last-child::before { display: none; }
.sr-rw__steps > li > div { min-width: 0; }
.sr-rw__steps h2 { margin-top: 9px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.sr-rw__steps p { max-width: 66ch; margin-top: 6px; color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.sr-rw__side { position: sticky; top: 92px; display: grid; gap: 16px; }
.sr-rw__test { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--sh-2); }
.sr-rw__test h3 { font-size: 17px; font-weight: 700; }
.sr-rw__test > p { color: var(--ink-2); font-size: 14.5px; }
.sr-term { border-radius: 14px; overflow: hidden; background: #111613; }
.sr-term__h { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sr-term__h i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.sr-term__h span { margin-left: 8px; color: rgba(255, 255, 255, .5); font-family: var(--f-mono); font-size: 12px; }
.sr-term__b { min-height: 140px; padding: 12px 14px; color: #d7ddd8; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.7; }
.sr-term__b p { margin: 0; word-break: break-word; }
.sr-term__b .is-ok { color: #7be0a6; }
.sr-term__b .sr-term__mute { color: rgba(255, 255, 255, .4); }
.sr-rw__note { display: flex; gap: 10px; color: var(--ink-3); font-size: 13.5px; line-height: 1.55; }
.sr-rw__note i { font-size: 17px; }
.sr-rw__note a { color: var(--ink-2); font-weight: 600; }

/* ── 10) Widget ───────────────────────────────────────── */
.sr-wd__g { display: grid; grid-template-columns: 360px minmax(0, 1fr); align-items: start; gap: clamp(28px, 4vw, 64px); margin-top: clamp(32px, 3vw, 48px); }
.sr-wd__ctl { display: grid; gap: 22px; }
.sr-wd__f { display: grid; gap: 8px; justify-items: start; }
.sr-wd__l { font-size: 14px; font-weight: 600; }
.sr-wd__tg { justify-items: stretch; gap: 6px; }
.sr-wd__out { display: grid; gap: 16px; min-width: 0; }
.sr-wd__out > *, .sr-vf__main, .sr-ct__card, .sr-wd__ctl { min-width: 0; }
.sr-wd__stage { position: relative; display: grid; place-items: center; min-height: 380px; padding: 60px 24px 36px; border-radius: 26px; background-color: var(--bg-2); background-image: radial-gradient(var(--line-2) 1px, transparent 1px); background-size: 18px 18px; transition: background-color .35s var(--ease); }
.sr-wd__stage[data-theme="dark"] { background-color: #1a1f1c; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); }
.sr-wd__cap { position: absolute; top: 18px; left: 20px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.sr-wd__stage[data-theme="dark"] .sr-wd__cap { color: rgba(255, 255, 255, .5); }
.sr-wdg { --wbg: #fff; --wink: var(--ink); --wmut: var(--ink-3); --wline: var(--line); border: 1px solid var(--wline); background: var(--wbg); color: var(--wink); box-shadow: var(--sh-2); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.sr-wd__stage[data-theme="dark"] .sr-wdg { --wbg: #121614; --wink: #f2f5f3; --wmut: rgba(255, 255, 255, .55); --wline: rgba(255, 255, 255, .12); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); }
.sr-wdg .sr-ico { border-color: var(--wline); }
.sr-wdg--card { width: 320px; max-width: 100%; border-radius: 20px; overflow: hidden; }
.sr-wdg__img { display: block; aspect-ratio: 16 / 8; overflow: hidden; }
.sr-wdg__img img { width: 100%; height: 100%; object-fit: cover; }
.sr-wdg__b { display: grid; gap: 12px; padding: 14px 16px; }
.sr-wdg__t { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sr-wdg__t b { display: block; font-size: 15.5px; font-weight: 650; }
.sr-wdg__t small { color: var(--wmut); font-size: 12.5px; }
.sr-wdg__n { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--wmut); font-size: 13.5px; }
.sr-wdg__n b, .sr-wdg .sr-live b { color: var(--wink); }
.sr-wdg .sr-live { color: var(--wmut); }
.sr-wdg__v { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 14.5px; font-weight: 650; white-space: nowrap; }
.sr-wdg__by { justify-self: center; color: var(--wmut); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.sr-wdg--band { display: flex; align-items: center; gap: 14px; width: min(560px, 100%); height: 72px; padding: 0 14px; border-radius: 16px; font-size: 14px; }
.sr-wdg--band .sr-wdg__t { flex: 1; min-width: 0; }
.sr-wdg--band .sr-wdg__t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-wdg--badge { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px 0 9px; border-radius: 999px; font-size: 13.5px; }
.sr-wdg__r { font-weight: 700; }
.sr-wdg--badge .sr-wdg__by { padding-left: 10px; border-left: 1px solid var(--wline); }

/* ── 11) Etkinlikler ──────────────────────────────────── */
.sr-evs__top { padding-top: clamp(32px, 3vw, 48px); }
.sr-evf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 330px; border-radius: 28px; overflow: hidden; background: #111613; color: #fff; }
.sr-evf__img { position: relative; min-height: 220px; }
.sr-evf__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-evf__b { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(24px, 3vw, 44px); }
.sr-evf__k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: rgba(255, 255, 255, .72); font-size: 13px; font-weight: 600; }
.sr-evf__k .sr-live { gap: 7px; }
.sr-evf__k > span + span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.sr-evf h2 { font-size: clamp(28px, 2.6vw, 40px); font-weight: 740; letter-spacing: -.035em; line-height: 1.05; }
.sr-evf__s { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: rgba(255, 255, 255, .75); font-size: 14.5px; }
.sr-evf__s a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.sr-evf__s .sr-ico { width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .92); }
.sr-evf__s .sr-ico img { width: 18px; height: 18px; }
.sr-evf__s .sr-ico--img img { width: 100%; height: 100%; }
.sr-evf__f { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 8px; }
.sr-evf__cd { font-family: var(--f-mono); font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.sr4 .sr-evf .sr-btn--pri { background: #fff; color: var(--ink); }
.sr4 .sr-evf .sr-btn--pri:hover { background: #e9ece8; }
.sr-evf :focus-visible { outline-color: #fff; }
.sr-evs__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 20px; }
.sr-cls__add { margin-left: auto; }
.sr-cls__tg { width: auto; gap: 12px; padding: 0; font-size: 14.5px; }
.sr-evs__list { position: relative; display: grid; gap: 28px; }
.sr-ev2__day h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.sr-ev2__day h3 em { color: var(--ink-3); font-size: 13px; font-style: normal; font-weight: 600; }
.sr-ev2 { display: grid; grid-template-columns: 70px 96px minmax(0, 1fr) auto auto auto; align-items: center; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.sr-ev2__h { font-family: var(--f-mono); font-size: 18px; font-weight: 600; }
.sr-ev2__img { width: 96px; height: 58px; border-radius: 12px; overflow: hidden; background: var(--bg-3); }
.sr-ev2__img img { width: 100%; height: 100%; object-fit: cover; }
.sr-ev2__t { min-width: 0; }
.sr-ev2__t b { display: block; font-size: 16px; font-weight: 650; }
.sr-ev2__t small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; color: var(--ink-3); font-size: 13.5px; }
.sr-ev2__t small a { color: var(--ink-2); font-weight: 600; transition: color .2s var(--ease); }
.sr-ev2__t small a:hover { color: var(--ink); }
.sr-ev2__ty { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--bg-2); color: var(--ink-2); font-size: 13px; }
.sr-ev2__go { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 14px; }
.sr-ev2__none { padding: 28px 0; color: var(--ink-3); }
.sr-evs__own { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 32px; margin-top: 44px; padding: 26px 28px; border-radius: 24px; background: var(--bg-2); }
.sr-evs__own h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.sr-evs__own p { margin-top: 6px; color: var(--ink-2); }

/* ── 12) Klanlar ──────────────────────────────────────── */
.sr-cls__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sr-cl { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--card); transition: border-color .2s var(--ease), box-shadow .25s var(--ease); }
.sr-cl:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.sr-cl__img { display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--bg-3); }
.sr-cl__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.sr-cl:hover .sr-cl__img img { transform: scale(1.05); }
.sr-cl__b { position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 32px 18px 18px; }
.sr-cl__em { position: absolute; top: -26px; left: 16px; }
.sr-cl__em .sr-ico { width: 50px; height: 50px; border: 0; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 4px var(--card), var(--sh-1); }
.sr-cl__em .sr-ico img { width: 30px; height: 30px; }
.sr-cl__em .sr-ico--img img { width: 100%; height: 100%; }
.sr-cl h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.sr-cl__s { color: var(--ink-3); font-size: 13.5px; }
.sr-cl__s a { color: var(--ink-2); font-weight: 600; }
.sr-cl__l { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.sr-cl__f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 14px; color: var(--ink-3); font-size: 13.5px; }
.sr-cl__f > span { display: inline-flex; align-items: center; gap: 5px; }
.sr-cl__open { height: 24px; padding: 0 9px; border-radius: 999px; background: var(--live-soft); color: var(--up); font-size: 12.5px; font-weight: 600; }
.sr-cl .sr-btn { align-self: flex-start; margin-top: auto; }

/* ── 13) Takım bul ────────────────────────────────────── */
.sr-lfs__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sr-lf { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.sr-lf.is-mine { border-color: color-mix(in srgb, var(--acc) 40%, white); background: color-mix(in srgb, var(--acc) 5%, white); }
.sr-lf__h { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.sr-lf__h b { display: block; font-size: 15.5px; font-weight: 650; }
.sr-lf__h small { color: var(--ink-3); font-size: 13px; }
.sr-lf__need { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--acc-soft); color: var(--acc-ink); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.sr-lf__s { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--bg-2); transition: background .2s var(--ease); }
.sr-lf__s:hover { background: var(--bg-3); }
.sr-lf__s .sr-ico { width: 36px; height: 36px; border-radius: 10px; }
.sr-lf__s .sr-ico img { width: 22px; height: 22px; }
.sr-lf__s .sr-ico--img img { width: 100%; height: 100%; }
.sr-lf__s span { display: grid; min-width: 0; }
.sr-lf__s b { font-size: 14.5px; }
.sr-lf__s small { color: var(--ink-3); font-size: 12.5px; }
.sr-lf__n { color: var(--ink); font-size: 15px; line-height: 1.6; }
.sr-lf__f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; color: var(--ink-3); font-size: 13.5px; }
.sr-lf__f > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.sr-lf__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 7px; background: var(--bg-2); color: var(--ink-2); font-size: 12.5px; }
.sr-lf__f .sr-btn { margin-left: auto; }

/* ── 14) Altbilgi ─────────────────────────────────────── */
.sr4 .sr-f8__legal button { color: var(--ink-3); font-size: inherit; transition: color .2s var(--ease); }
.sr4 .sr-f8__legal button:hover { color: var(--ink); }

/* ── duyarlı ──────────────────────────────────────────── */
@media (max-width: 1180px) {
  .sr-smp__gs, .sr-cls__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sr-smp__cs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sr-lfs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-ev2 { grid-template-columns: 60px 84px minmax(0, 1fr) auto auto; }
  .sr-ev2__go { display: none; }
}
@media (max-width: 980px) {
  .sr-sx__cols { grid-template-columns: minmax(0, 1fr); }
  .sr-sx__srv { grid-template-columns: 64px minmax(0, 1fr) auto auto; }
  .sr-sx__img { width: 64px; height: 42px; }
  .sr-sx__ip { display: none; }
  .sr-ct__g, .sr-vf__g, .sr-rw__g, .sr-wd__g { grid-template-columns: minmax(0, 1fr); }
  .sr-rw__side { position: static; }
  .sr-ct__tp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-evf { grid-template-columns: minmax(0, 1fr); }
  .sr-cls__grid, .sr-smp__gs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sr-sx__barin { gap: 8px; }
  .sr-sx__q { font-size: 17px; }
  .sr-sx__scope { display: none; }
  .sr-sx__x { padding: 0 8px; }
  .sr-sx__body { border-radius: 0 0 22px 22px; }
  .sr-sx__res { max-height: calc(100dvh - 64px); }
  .sr-sx__srv { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
  .sr-sx__img { width: 56px; height: 40px; }
  .sr4 .sr-sx__cp { display: none; }
  .sr-ly--ck .sr-ly__box { right: 16px; bottom: 16px; }
  .sr-ck__f { grid-template-columns: minmax(0, 1fr); }
  .sr-rvs__sum { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sc" "meter" "tags"; padding: 20px; }
  .sr-rvs__sc b { font-size: 40px; }
  .sr-rv { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  .sr-rv__av { width: 38px; height: 38px; font-size: 15px; }
  .sr-rv__t { font-size: 15.5px; }
  .sr-rv.is-mine { margin: 8px -12px 0; padding: 20px 12px; }
  .sr-rvc__in, .sr-lfc__in { padding: 18px; }
  .sr-rvc__rec button { height: 50px; font-size: 14.5px; }
  .sr-ct__row { grid-template-columns: minmax(0, 1fr); }
  .sr-ct__card { padding: 20px; border-radius: 22px; }
  .sr-smp__gs, .sr-cls__grid, .sr-lfs__grid { grid-template-columns: minmax(0, 1fr); }
  .sr-smp__cs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-vf__ck { grid-template-columns: minmax(0, 1fr); }
  .sr-ev2 { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; }
  .sr-ev2__img, .sr-ev2__ty { display: none; }
  .sr-ev2__h { font-size: 15px; }
  .sr-ev2 .sr-btn { width: 40px; padding: 0; font-size: 0; gap: 0; }
  .sr-ev2 .sr-btn i { font-size: 18px; }
  .sr-evs__own { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .sr-evf__cd { font-size: 24px; }
  .sr-cls__add { margin-left: 0; }
  .sr-wd__stage { min-height: 300px; padding: 52px 14px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-rvs__meter i, .sr-sx__sp, .sr-sx__img > img, .sr-cl__img img { transition: none; }
  .sr-vf__run li.is-run .sr-run__i { animation: none; }
}