@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Noto+Sans:wght@400;600;700&display=swap');

/* Sunucular (page-specific) modern styles – fully scoped to .sunucular-modern */
.sunucular-modern {
  --sm-bg:#0b0b10; --sm-bg-soft:#12121a; --sm-card:#15151c; --sm-border:#23232b; --sm-muted:#9aa0a6; --sm-text:#e6e6e6; --sm-brand:#FF4D6D; --sm-brand-2:#FFB300;
  /* accent fallbacks */
  --sm-accent-sponsor: #ffb156;
  --sm-accent-fav: #ff4d6d;
  --sm-accent-all: #7aa8ff;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,77,109,.10), transparent),
    radial-gradient(900px 560px at -10% 10%, rgba(255,179,0,.10), transparent);
  color: var(--sm-text);
  font-family: 'Inter', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}
.sunucular-modern .sm-container{ max-width:1200px; margin:0 auto; padding:24px; }
.sunucular-modern .sm-hero{ border:1px solid var(--sm-border); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,255,0.00)); border-radius:20px; padding:24px 24px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); backdrop-filter: blur(6px); }
.sunucular-modern .sm-hero h1{ margin:0 0 6px; font-size:28px; letter-spacing:.2px; }
.sunucular-modern .sm-hero p{ margin:0; color:var(--sm-muted); }

/* Header gap fix: rely on global .hf-modern offset only */
.sunucular-modern{
  --sm-header-h: 0px; /* was 96px (and 110px on mobile) */
  padding-top: 0;     /* remove extra page offset */
}
/* Tighter top padding inside the page container */
.sunucular-modern .sm-container{
  padding-top: 6px; /* was 18px */
}
@media (max-width: 600px){
  .sunucular-modern{ --sm-header-h: 0; padding-top: 0; }
}

/* Sub-cards spacing */
.sunucular-modern .sm-hero.sm-hero-block{ margin-top:14px; }

/* Filters grid container */
.sunucular-modern .sm-filter-grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
@media (min-width: 980px){ .sunucular-modern .sm-filter-grid{ grid-template-columns: 1.2fr 1fr; } }
/* Force stacked filter cards on all sizes */
.sunucular-modern .sm-filter-grid{ grid-template-columns: 1fr !important; }

/* Section mini header inside cards */
.sunucular-modern .sm-hero .sm-section-title{ margin-top:0; margin-bottom:12px; padding:10px 12px; }
.sunucular-modern .sm-hero .sm-section-title h2{ font-size:16px; }
.sunucular-modern .sm-hero .sm-kicker{ font-size:11px; }

/* Filters */
.sunucular-modern .sm-filters{ display:grid; gap:12px; grid-template-columns:1fr; margin-top:6px; }
/* changed: make columns fluid to prevent overflow and mid-width wrapping */
.sunucular-modern .sm-filters .sm-row{ display:grid; gap:12px; grid-template-columns: 1fr 170px 170px 180px 150px; align-items:center; }
/* allow controls to shrink inside grid tracks without overflowing */
.sunucular-modern .sm-filters .sm-control{ position:relative; min-width:0; }
.sunucular-modern .sm-input, .sunucular-modern .sm-select{ width:100%; padding:10px 12px; border:1px solid var(--sm-border); background: var(--sm-bg-soft); color:var(--sm-text); border-radius:10px; outline:none; }
.sunucular-modern .sm-checkbox { display:flex; align-items:center; gap:8px; color:var(--sm-muted); }

/* --- Filters 2.0: refined rows and controls --- */
.sunucular-modern .sm-filters{ gap: 14px; }
/* Ensure the new control row uses flex, not the generic grid above */
.sunucular-modern .sm-filters .sm-row--controls{ display:flex !important; flex-wrap:wrap; gap:10px 12px; align-items:stretch; }
/* Full-width search row */
.sunucular-modern .sm-filters .sm-row--search-wide{ display:flex !important; }
.sunucular-modern .sm-filters .sm-row--search-wide .sm-control--search{ flex:1 1 100%; }
/* Separator between view and sort */
.sunucular-modern .sm-sep{ opacity:.45; padding:0 4px; align-self: center; height: 48px; display:inline-flex; align-items:center; }
@media (max-width: 640px){ .sunucular-modern .sm-sep{ display:none; } }

/* Search with leading icon */
.sunucular-modern .sm-control--search{ position: relative; flex: 1 1 360px; min-width: 240px; }
.sunucular-modern .sm-control--search .sm-input{ padding-left: 40px; height: 42px; }
.sunucular-modern .sm-control--search::before{
  content: "\f002"; /* fa-magnifying-glass */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--sm-muted); font-size: 14px; pointer-events: none;
}

/* Toggle switches */
.sunucular-modern .sm-toggle{ display:inline-flex; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--sm-border); border-radius:12px; background: rgba(255,255,255,.02); color: var(--sm-muted); cursor: pointer; user-select: none; height:48px; }
.sunucular-modern .sm-toggle input{ position: absolute; opacity: 0; width: 0; height: 0; }
.sunucular-modern .sm-switch{ position: relative; width: 42px; height: 24px; border-radius: 999px; background: #1a1a22; border:1px solid var(--sm-border); flex: 0 0 42px; transition: .2s ease; }
.sunucular-modern .sm-switch::after{ content:""; position:absolute; width: 16px; height: 16px; border-radius: 50%; background: #c9ced6; left: 4px; top: 50%; transform: translateY(-50%); transition: .2s ease; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.sunucular-modern .sm-toggle input:checked + .sm-switch{ background: linear-gradient(135deg, #10b981, #34d399); border-color: transparent; }
.sunucular-modern .sm-toggle input:checked + .sm-switch::after{ left: calc(100% - 4px - 16px); background: #fff; }
.sunucular-modern .sm-toggle .sm-toggle-label{ color: var(--sm-text); font-weight: 600; }

/* Sort segmented control */
.sunucular-modern .sm-sort-group{ display:inline-flex; gap:6px; padding:4px; border:1px solid var(--sm-border); border-radius:12px; background: rgba(255,255,255,.02); box-shadow: 0 6px 16px rgba(0,0,0,.20) inset, 0 2px 8px rgba(0,0,0,.10); height:48px; align-items:center; }
.sunucular-modern .sm-sort-btn{ appearance:none; -webkit-appearance:none; border:none; outline:none; background: transparent; color: var(--sm-muted); font-weight:800; 
  /* center text perfectly */
  display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 14px; line-height:1; border-radius:10px; cursor:pointer; transition: .15s ease; }
.sunucular-modern .sm-sort-btn:hover{ color: #d5d8dd; background: rgba(255,255,255,.03); }
.sunucular-modern .sm-sort-btn.active{ color:#fff; background: linear-gradient(135deg, var(--sm-brand), #ff7c96); box-shadow: 0 2px 10px rgba(255,77,109,.35); }
.sunucular-modern .sm-sort-btn:focus-visible{ outline: 2px solid rgba(122,168,255,.55); outline-offset: 2px; }
.sunucular-modern .sm-inline-label{ color: var(--sm-muted); font-weight: 700; align-self:center; }

/* Buttons */
.sunucular-modern .sm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid var(--sm-border); color:var(--sm-text); background: var(--sm-bg-soft); text-decoration:none; font-weight:600; }
.sunucular-modern .sm-btn.sm-primary{ background: linear-gradient(135deg, var(--sm-brand), #ff7c96); border-color: transparent; color:#fff; }
.sunucular-modern .sm-btn.sm-secondary{ background: transparent; }
.sunucular-modern .sm-btn.sm-small{ padding:8px 10px; font-size:13px; }
/* View toggle refinement */
.sunucular-modern .sm-view-toggle{ display:inline-flex; gap:8px; border:1px solid var(--sm-border); border-radius:12px; padding:4px; background: rgba(255,255,255,.02); height:48px; align-items:center; }
.sunucular-modern .sm-view-toggle .sm-view-btn{ border:none; background: transparent; color: var(--sm-muted); border-radius:10px; 
  /* center like sort buttons */
  display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 12px; line-height:1; }
.sunucular-modern .sm-view-toggle .sm-view-btn.sm-primary{ color:#fff; background: linear-gradient(135deg, var(--sm-brand), #ff7c96); box-shadow: 0 2px 10px rgba(255,77,109,.35); }

/* Reset button styles and alignment */
.sunucular-modern .sm-flex-spacer{ flex: 1 1 auto; min-width: 12px; }
.sunucular-modern .sm-reset{ height:48px; display:inline-flex; align-items:center; gap:8px; padding:0 14px; font-weight:800; border-radius:12px; }
.sunucular-modern .sm-reset i{ font-size:14px; }

/* Sections */
.sunucular-modern .sm-section-title{ 
  display:flex; align-items:center; justify-content:space-between;
  margin-top:28px; margin-bottom:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid var(--sm-border);
  border-radius:14px; padding:12px 14px; gap:12px;
  position: relative;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.sunucular-modern .sm-section-title::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:14px 0 0 14px;
  background: linear-gradient(180deg, var(--sm-accent-all), transparent 70%);
}
.sunucular-modern .sm-section-title.is-sponsor::before{ background: linear-gradient(180deg, var(--sm-accent-sponsor), transparent 70%); }
.sunucular-modern .sm-section-title.is-fav::before{ background: linear-gradient(180deg, var(--sm-accent-fav), transparent 70%); }

.sunucular-modern .sm-title-wrap{ display:flex; align-items:flex-start; gap:10px; }
.sunucular-modern .sm-kicker{ font-size:12px; letter-spacing:.4px; text-transform:uppercase; color:var(--sm-muted); padding:4px 8px; border:1px solid var(--sm-border); border-radius:999px; }
.sunucular-modern .sm-section-title h2{ margin:0; font-size:20px; letter-spacing:.3px; }
.sunucular-modern .sm-count{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--sm-border); background: rgba(255,255,255,.02); color:#ddd; font-weight:700; }
.sunucular-modern .sm-actions-rt{ display:flex; align-items:center; gap:8px; }

/* compact pill tweak to blend with new header */
.sunucular-modern .sm-pill{ background: rgba(255,255,255,.03); color:#aeb2b8; }

/* Lists */
.sunucular-modern .sm-carousel{ display:grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap:14px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.sunucular-modern .sm-carousel .sm-card{ scroll-snap-align:start; }
.sunucular-modern .sm-grid{ display:grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap:14px; }
@media (min-width:700px){ .sunucular-modern .sm-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width:1024px){ .sunucular-modern .sm-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* List view layout */
.sunucular-modern.view-list .sm-grid{ display:block; }
.sunucular-modern.view-list .sr-row{ display:block; }
.sunucular-modern.view-list .sm-card{ 
  display:grid; 
  grid-template-columns: 220px 1fr auto; 
  grid-template-rows: auto auto; 
  grid-template-areas: 
    "media top actions"
    "media main actions";
  gap:14px; align-items:center; min-height:auto; 
}
.sunucular-modern.view-list .sm-media{ grid-area: media; align-self:stretch; }
.sunucular-modern.view-list .sm-media img{ aspect-ratio: 16/10; height:100%; object-fit: cover; }
.sunucular-modern.view-list .sm-top{ grid-area: top; padding:0; min-height:auto; }
.sunucular-modern.view-list .sm-main{ grid-area: main; }
.sunucular-modern.view-list .sm-actions{ grid-area: actions; justify-content:flex-end; align-self:center; }
.sunucular-modern.view-list .sm-hostname-text{ -webkit-line-clamp: 1; line-clamp: 1; max-height: 1.5em; }
.sunucular-modern.view-list .sm-meta{ flex-wrap:wrap; }
.sunucular-modern.view-list .sm-map{ max-width: 100%; }

@media (max-width: 900px){
  .sunucular-modern.view-list .sm-card{ 
    grid-template-columns: 160px 1fr; 
    grid-template-rows: auto auto auto; 
    grid-template-areas: 
      "media top"
      "media main"
      "media actions"; 
  }
  .sunucular-modern.view-list .sm-actions{ justify-content:flex-start; align-self:flex-start; }
}
@media (max-width: 560px){
  .sunucular-modern.view-list .sm-card{ 
    grid-template-columns: 1fr; 
    grid-template-rows: auto auto auto auto; 
    grid-template-areas: 
      "media"
      "top"
      "main"
      "actions"; 
  }
}

/* Mobile improvements for list view: hide map image and collapse layout */
@media (max-width: 900px){
  .sunucular-modern.view-list .sm-media{
    display: none !important; /* hide map image on mobile list view */
  }
  .sunucular-modern.view-list .sm-card{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "top"
      "main"
      "actions";
  }
  .sunucular-modern.view-list .sm-actions{
    justify-content: flex-start;
    align-self: auto;
  }
}

@media (max-width: 560px){
  .sunucular-modern.view-list .sm-card{
    gap: 10px;
    padding: 14px;
  }
}

/* Cards */
.sunucular-modern .sr-row{ display: contents; }
.sunucular-modern .sm-card{ position:relative; display:flex; flex-direction:column; gap:12px; border:1px solid var(--sm-border); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)); border-radius:18px; padding:16px; transition: .25s ease; box-shadow: 0 10px 30px rgba(0,0,0,.25); min-height: 230px; }
.sunucular-modern .sm-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
/* changed: keep top row in one line on desktop to avoid jumps */
.sunucular-modern .sm-top{ display:flex; align-items:center; gap:12px; flex-wrap: nowrap; padding-right: 0; position: relative; }
.sunucular-modern .sm-game-icon{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background: rgba(255,255,255,.02); border:1px solid var(--sm-border); }
.sunucular-modern .sm-game-icon img{ width:20px; height:20px; }
/* changed: let IP area shrink and ellipsis properly; keep copy button from wrapping */
.sunucular-modern .sm-ip{ display:flex; align-items:center; gap:8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; flex: 1 1 auto; min-width: 0; }
.sunucular-modern .sm-ip span{ flex: 1 1 auto; min-width: 0; }
.sunucular-modern .sm-copy{ border:1px solid var(--sm-border); background: transparent; color: var(--sm-muted); border-radius:8px; padding:6px 8px; cursor:pointer; flex: 0 0 auto; }
.sunucular-modern .sm-rep{ margin-left:auto; }
.sunucular-modern .sm-rep-value{ background: rgba(255,255,255,.03); border:1px solid var(--sm-border); border-radius:999px; padding:6px 10px; font-weight:700; color:#ffd479; font-size:12px; }
/* ensure consistent content height so action buttons align */
.sunucular-modern .sm-main{ display:flex; flex-direction:column; gap:10px; flex: 1 1 auto; }
.sunucular-modern .sm-hostname{ font-weight:700; letter-spacing:.2px; }
.sunucular-modern .sm-meta{ display:flex; align-items:center; gap:8px; color:var(--sm-muted); font-size:13px; }
/* --- Equalize vertical rhythm across cards --- */
/* Reserve space whether meta/map chip exists or not */
.sunucular-modern .sm-meta{ 
  min-height: 28px; /* keeps progress bar at same baseline */
  align-items: center; 
  flex-wrap: wrap; 
}
/* Anchor actions to the card bottom for all cards */
.sunucular-modern .sm-card{ display:flex; }
.sunucular-modern .sm-main{ flex:1 1 auto; }
.sunucular-modern .sm-actions{ margin-top:auto; padding-top:8px; min-height:44px; }
/* Stabilize numeric widths to avoid micro-jumps */
.sunucular-modern .sm-players-line, 
.sunucular-modern .sm-ip { font-variant-numeric: tabular-nums; }

.sunucular-modern .sm-map{ 
  display:inline-flex; align-items:center; gap:8px; 
  border:1px solid rgba(122,168,255,.25); 
  background: linear-gradient(135deg, rgba(122,168,255,.12), rgba(122,168,255,.06)); 
  color:#cfe1ff; 
  border-radius:999px; padding:6px 10px; 
  line-height:1; 
  max-width: 100%;
}

/* Rank badge */
.sunucular-modern .sm-rank-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-weight:800; font-size:12px; border:1px solid var(--sm-border); }
.sunucular-modern .sm-rank-badge i{ font-size:12px; }
/* 1. sıra: altın */
.sunucular-modern .sm-rank-badge.rank-1{ background: linear-gradient(135deg, #ffd700, #ffb300); color:#2b2b2b; border-color: rgba(0,0,0,.12); box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset; }
.sunucular-modern .sm-rank-badge.rank-1 i{ color:#7a5d00; }
/* 2. sıra: gümüş */
.sunucular-modern .sm-rank-badge.rank-2{ background: linear-gradient(135deg, #dcdfe6, #c0c4cc); color:#2b2b2b; border-color: rgba(0,0,0,.12); }
.sunucular-modern .sm-rank-badge.rank-2 i{ color:#6b7280; }
/* 3. sıra: bronz */
.sunucular-modern .sm-rank-badge.rank-3{ background: linear-gradient(135deg, #e0b084, #c18f6b); color:#2b2b2b; border-color: rgba(0,0,0,.12); }
.sunucular-modern .sm-rank-badge.rank-3 i{ color:#7c4f2e; }
/* 4-10: mavi vurgu */
.sunucular-modern .sm-rank-badge.rank-top10{ background: linear-gradient(135deg, #90caf9, #64b5f6); color:#0b2540; border-color: rgba(0,0,0,.12); }
.sunucular-modern .sm-rank-badge.rank-top10 i{ color:#0b4778; }
/* Diğerleri: nötr */
.sunucular-modern .sm-rank-badge.rank-rest{ background: rgba(255,255,255,.03); color:#aeb2b8; border-color: var(--sm-border); }
.sunucular-modern .sm-rank-badge.rank-rest i{ color:#9aa0a6; }

/* Players */
.sunucular-modern .sm-players{ display:flex; flex-direction:column; gap:6px; }
.sunucular-modern .sm-players-line{ display:flex; align-items:center; gap:10px; min-height: 22px; }
.sunucular-modern .sm-players-label{ font-weight:700; }
.sunucular-modern .sm-players-status{ color:#ff7373; font-size:11px; }
/* NEW: online status color */
.sunucular-modern .sm-players-status.on{ color:#22c55e; }
.sunucular-modern .sm-players-bar{ height:8px; background:#2B2B35; border-radius:999px; overflow:hidden; border:1px solid var(--sm-border); }
.sunucular-modern .sm-players-bar-fill{ height:100%; width:0%; background: linear-gradient(90deg, #6b7280, #9ca3af); transition: width .4s ease; }
.sunucular-modern .sm-players-bar-fill.red{ background: linear-gradient(90deg, #ef4444, #f87171); }
.sunucular-modern .sm-players-bar-fill.orange{ background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.sunucular-modern .sm-players-bar-fill.green{ background: linear-gradient(90deg, #10b981, #34d399); }

/* Actions */
.sunucular-modern .sm-actions{ display:flex; align-items:center; gap:10px; margin-top:2px; flex-wrap: wrap; }
/* Sponsor badge: inline in flow, right-aligned on desktop */
.sunucular-modern .sm-badge-sponsor{ background: linear-gradient(135deg, #ffd166, #fca311); color:#2b2b2b; font-weight:800; padding:4px 8px; border-radius:999px; font-size:11px; border:1px solid rgba(0,0,0,.15); position: static; margin-left:auto; flex:0 0 auto; align-self:center; }

/* Empty */
.sunucular-modern .sm-empty-note{ color:var(--sm-muted); border:1px dashed var(--sm-border); padding:18px; border-radius:12px; text-align:center; }

/* Isolation to avoid global layout shifts */
.sunucular-modern, .sunucular-modern * { box-sizing: border-box; }

/* Prevent long hostnames/ips from pushing layout */
.sunucular-modern .sm-hostname-text,
.sunucular-modern .sm-ip span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%; }
/* allow hostname to take up to two lines without shifting siblings */
.sunucular-modern .sm-hostname-text{ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }

/* Slight spacing from global header */
.sunucular-modern .sm-container{ padding-top: 18px; }

@media (max-width: 900px){
  .sunucular-modern .sm-filters .sm-row{ grid-template-columns: 1fr 1fr; }
  .sunucular-modern .sm-checkbox{ order: 2; }
  /* Make CTA row stack nicely on mobile */
  .sunucular-modern .sm-filters .sm-row--cta{ flex-direction: column; align-items: stretch; }
  .sunucular-modern .sm-view-toggle{ width: 100%; justify-content: center; }
  .sunucular-modern .sm-reset{ width: 100%; }
}
@media (max-width: 600px){
  .sunucular-modern .sm-hero{ border-radius: 14px; padding:16px; }
  .sunucular-modern .sm-btn{ width: 100%; }
  .sunucular-modern .sm-section-title{ flex-direction: column; align-items:flex-start; gap:8px; }
  .sunucular-modern .sm-actions .sm-btn{ width: 100%; }
}

/* --- Stable layout fixes (no global impact) --- */
/* 1) Filters: avoid overflow between 900-1200px widths */
.sunucular-modern .sm-filters .sm-row{ grid-template-columns: minmax(220px,1fr) repeat(4, minmax(140px, 180px)); }
/* 2) Hostname: real multi-line clamp with stable height */
.sunucular-modern .sm-hostname-text{ 
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  line-clamp: 2; /* standard */
  -webkit-box-orient: vertical; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: normal; /* override the nowrap above for clamping */
  max-height: 2.8em; /* ~2 lines */
}

/* 3) Let flex children actually truncate instead of growing and wrapping */
.sunucular-modern .sm-ip, 
.sunucular-modern .sm-main{ min-width: 0; }
.sunucular-modern .sm-rep{ flex-shrink: 0; }

/* 4) Stabilize card header & actions heights to prevent jank between cards */
.sunucular-modern .sm-top{ min-height: 34px; }
.sunucular-modern .sm-actions{ min-height: 40px; }

/* 5) Carousel: prevent bounce when horizontal scrollbar appears/disappears */
.sunucular-modern .sm-carousel{ 
  scrollbar-gutter: stable both-edges; 
  overscroll-behavior-x: contain; 
  scroll-snap-stop: always; 
}
/* Optional: thinner scrollbars (Firefox) */
.sunucular-modern .sm-carousel{ scrollbar-width: thin; }

/* --- Snapshot-based jank fixes --- */
/* Prevent IP row jumping when copy label changes (Kopyala -> Kopyalandı) */
.sunucular-modern .sm-copy{ min-width: 96px; text-align:center; }
@media (max-width: 520px){ .sunucular-modern .sm-copy{ min-width: auto; } }

/* Reserve exactly two lines for the hostname to align cards even when titles are short */
.sunucular-modern .sm-hostname-text{ line-height: 1.35; min-height: calc(1.35em * 2); }

/* Players block: keep a stable block height so actions align perfectly */
.sunucular-modern .sm-players{ min-height: 56px; }

/* Action row: stretch buttons consistently and avoid vertical wobble */
.sunucular-modern .sm-actions{ align-items: center; gap: 12px; }

/* Minor: ensure map pill doesn't collapse and cause reflow */
.sunucular-modern .sm-map{ min-height: 26px; display:inline-flex; align-items:center; }

/* --- Sponsor vs elements overlap fix (new inline layout) --- */
/* Remove reserved padding; keep desktop single-row, allow wrap on narrow */
.sunucular-modern .sm-top{ padding-right: 0; }
@media (max-width: 640px){
  .sunucular-modern .sm-top{ flex-wrap: wrap; row-gap: 8px; }
  .sunucular-modern .sm-badge-sponsor{ order: 3; margin-left: 0; align-self: flex-end; }
}

/* --- RP badge inline next to map --- */
.sunucular-modern .sm-rep-inline{ display:inline-flex; margin-left: 8px; }
.sunucular-modern .sm-rep-inline .sm-rep-value{ padding:4px 8px; font-size:11px; }
/* Ensure any previous absolute styles are neutralized */
.sunucular-modern .sm-rep{ position: static; margin-left: 0; }

/* IP, oyun logosunun sağına zaten geliyor; küçük aralık için: */
.sunucular-modern .sm-top{ gap: 10px; }
/* --- Keep IP and copy button strictly on one line next to the game icon --- */
.sunucular-modern .sm-top{ flex-wrap: nowrap; padding-right: 0; }
.sunucular-modern .sm-ip{ flex: 1 1 auto; min-width: 0; }
.sunucular-modern .sm-ip span{ flex: 1 1 auto; min-width: 0; }
/* Ensure copy button keeps width but stays inline */
.sunucular-modern .sm-copy{ flex: 0 0 auto; }
/* Update: responsive wrapping rules for .sm-top */
@media (min-width: 641px){
  .sunucular-modern .sm-top{ flex-wrap: nowrap; }
}
@media (max-width: 640px){
  .sunucular-modern .sm-top{ flex-wrap: wrap; row-gap: 8px; }
}
/* Remove duplicate global override */
/* The following rule is intentionally left minimal to avoid overriding media queries */
.sunucular-modern .sm-top{ padding-right: 0; gap: 10px; }
/* --- Fixed header offset (restored) --- */
.sunucular-modern{ --sm-header-h: 96px; padding-top: var(--sm-header-h); }
@media (max-width: 600px){
  .sunucular-modern{ --sm-header-h: 110px; }
}

/* --- Map media block (card header image) --- */
.sunucular-modern .sm-media{ position: relative; border-radius: 14px; overflow: hidden; border:1px solid var(--sm-border); background: #0f0f14; }
.sunucular-modern .sm-media img{ display:block; width:100%; height:auto; aspect-ratio: 16/9; object-fit: cover; filter: saturate(1.05) contrast(1.02); }
/* Optional overlay placeholders (can be populated later) */
.sunucular-modern .sm-media .sm-media-chip{ position:absolute; top:8px; right:8px; background: rgba(0,0,0,.55); color:#fff; font-weight:700; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.1); }

/* Hide dedicated Sponsor section (title + carousel) */
.sunucular-modern .sm-section-title.is-sponsor,
.sunucular-modern .sm-section-title.is-sponsor + .sm-carousel{ display:none !important; }

/* Highlight sponsor cards inside the unified list */
.sunucular-modern .sm-card--sponsor{
  border-color:#ffb156 !important;
  box-shadow: 0 12px 34px rgba(255,177,86,.25), 0 0 0 1px rgba(255,177,86,.15) inset;
}
.sunucular-modern .sm-card--sponsor:hover{
  box-shadow: 0 18px 44px rgba(255,177,86,.35), 0 0 0 1px rgba(255,177,86,.2) inset;
}

/* Make IP area clearly clickable */
.sunucular-modern .sm-ip{ cursor: pointer; }
.sunucular-modern .sm-ip:hover span{ text-decoration: underline; text-underline-offset: 2px; }

/* Toast notifications (top-right) */
.sunucular-modern .sm-toast-container{ position: fixed; top: 14px; right: 14px; z-index: 9999; display:flex; flex-direction:column; gap:8px; pointer-events: none; }
.sunucular-modern .sm-toast{ pointer-events: auto; background: rgba(20,20,28,.92); color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); transform: translateY(-8px); opacity:0; transition: opacity .22s ease, transform .22s ease; font-weight:700; font-size:13px; }
.sunucular-modern .sm-toast.show{ opacity:1; transform: translateY(0); }
.sunucular-modern .sm-toast.hide{ opacity:0; transform: translateY(-8px); }
.sunucular-modern .sm-toast.error{ background: linear-gradient(135deg, #7a0f0f, #b91c1c); border-color: rgba(255,255,255,.15); }

/* === Game Modes chips === */
/* Use flex so chips auto-fill the row with equal widths. Toggle stays fixed. */
.sunucular-modern .sm-gmodes{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
/* Primary chips: equal width per row, grow to fill space */
.sunucular-modern .sm-gm-chip{ flex: 1 1 var(--gm-chip-basis, 150px); min-width: 120px; display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; background: var(--sm-bg-soft); color: var(--sm-text); border:1px solid var(--sm-border); border-radius:12px; font-weight:700; text-decoration:none; transition: .2s ease; }
/* The toggle button keeps fixed square size and sits at end of first line */
.sunucular-modern .sm-gm-toggle{ flex: 0 0 44px; width:44px; height:44px; border-radius:12px; border:1px solid var(--sm-border); background: var(--sm-bg-soft); color: var(--sm-text); margin-left:auto; }
.sunucular-modern .sm-gm-chip:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.sunucular-modern .sm-gm-chip.active{ border-color: #2e7d32; box-shadow: 0 0 0 1px rgba(46,125,50,.35) inset; background: linear-gradient(135deg, rgba(46,125,50,.18), rgba(46,125,50,.08)); }
/* Extras occupy a new full-width row when open */
.sunucular-modern .sm-gm-more-wrap{ flex: 1 1 100%; display: none; }
.sunucular-modern .sm-gmodes.is-open .sm-gm-more-wrap{ display: inline-flex; }
/* Make all controls equal height and stretch */
.sunucular-modern .sm-filters .sm-row--controls{ align-items: stretch !important; }
.sunucular-modern .sm-row--controls > .sm-view-toggle,
.sunucular-modern .sm-row--controls > .sm-sort-group,
.sunucular-modern .sm-row--controls > .sm-toggle,
.sunucular-modern .sm-row--controls > .sm-reset{
  height: 48px; /* uniform height */
}
.sunucular-modern .sm-view-toggle .sm-view-btn,
.sunucular-modern .sm-sort-btn{ height: 36px; line-height: 1; }
/* Equal-height and alignment hardening */
.sunucular-modern .sm-row--controls > *{ margin:0; }
.sunucular-modern .sm-row--controls .sm-sort-group{ white-space: nowrap; }
.sunucular-modern .sm-row--controls .sm-toggle .sm-toggle-label{ line-height: 1; }
/* === Final filter controls alignment polish === */
/* Ensure every control in the row has exactly the same visual height and centered content */
.sunucular-modern .sm-row--controls > .sm-view-toggle,
.sunucular-modern .sm-row--controls > .sm-sort-group,
.sunucular-modern .sm-row--controls > .sm-toggle,
.sunucular-modern .sm-row--controls > .sm-reset,
.sunucular-modern .sm-row--controls > .sm-sep{
  height: 48px;
  display: inline-flex;
  align-items: center;
}
/* Prevent text wrapping that can increase control height */
.sunucular-modern .sm-row--controls .sm-inline-label,
.sunucular-modern .sm-row--controls .sm-toggle .sm-toggle-label{ 
  white-space: nowrap; 
  line-height: 1; 
}
/* Keep inner pieces vertically centered and consistent */
.sunucular-modern .sm-row--controls .sm-sort-group{ align-items: center; }
.sunucular-modern .sm-row--controls .sm-view-toggle{ align-items: center; }
.sunucular-modern .sm-row--controls .sm-toggle .sm-switch{ align-self: center; }
/* Tweak separator to visually match neighbors */
.sunucular-modern .sm-row--controls .sm-sep{ height: 48px; line-height: 48px; }
/* === In-card header polish (Oyun Modları / Filtreler) === */
.sunucular-modern .sm-hero.sm-hero-block .sm-section-title{
  display:flex; align-items:center; gap:10px;
  height: 52px; padding: 0 16px 0 18px; margin: 0 0 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18,18,26,.85), rgba(18,18,26,.65));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: saturate(1.1) blur(3px);
  position: relative; overflow: hidden;
}
.sunucular-modern .sm-hero.sm-hero-block .sm-section-title::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, #7aa8ff, rgba(122,168,255,0));
}
.sunucular-modern .sm-hero.sm-hero-block .sm-section-title::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(255,255,255,.06), transparent 38%),
    radial-gradient(60% 130% at -20% 0%, rgba(122,168,255,.06), transparent 60%);
}
.sunucular-modern .sm-hero.sm-hero-block .sm-section-title .sm-kicker{
  padding:0; border:none; background:transparent;
  color:#aebfe0; font-size:11px; letter-spacing:.45px; text-transform:uppercase; font-weight:800; opacity:.95;
}
.sunucular-modern .sm-hero.sm-hero-block .sm-section-title h2{
  margin:0; font-size:17px; font-weight:800; color:#fff; letter-spacing:.2px;
}
/* tighten wrapper spacing for title row inside cards */
.sunucular-modern .sm-hero.sm-hero-block .sm-title-wrap{ display:flex; align-items:center; gap:10px; }

/* === Main section header – Design v2 (glass bar) === */
.sunucular-modern .sm-section-title{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:56px; padding:0 16px 0 18px; margin-top:28px; margin-bottom:14px;
  border-radius:16px; position:relative; overflow:hidden;
  background: linear-gradient(180deg, rgba(18,18,26,.9), rgba(18,18,26,.72));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: saturate(1.05) blur(3px);
}
.sunucular-modern .sm-section-title::before{
  content:""; position:absolute; left:6px; top:6px; bottom:6px; width:3px; border-radius:8px;
  background: linear-gradient(180deg, #7aa8ff, rgba(122,168,255,0));
}
.sunucular-modern .sm-section-title::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(0deg, rgba(255,255,255,.05), transparent 40%);
}
.sunucular-modern .sm-title-wrap{ display:flex; align-items:center; gap:12px; }
.sunucular-modern .sm-section-title h2{ margin:0; font-size:20px; letter-spacing:.25px; color:#fff; font-weight:800; }
.sunucular-modern .sm-kicker{ height:28px; display:inline-flex; align-items:center; padding:0 10px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color:#aeb7c5; font-size:12px; letter-spacing:.5px; text-transform:uppercase; font-weight:800; }
.sunucular-modern .sm-actions-rt{ display:flex; align-items:center; gap:10px; }
.sunucular-modern .sm-section-title .sm-count,
.sunucular-modern .sm-section-title .sm-pill{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; border-radius:999px; 
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); color:#e3e6eb; font-weight:800;
}
.sunucular-modern .sm-section-title .sm-count i,
.sunucular-modern .sm-section-title .sm-pill i{
  display:inline-grid; place-items:center; font-size:12px; color:#d1d6de;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:4px 6px; border-radius:6px;
}
/* Sponsor/fav color accents stay compatible */
.sunucular-modern .sm-section-title.is-sponsor::before{ background: linear-gradient(180deg, #ffb156, rgba(255,177,86,0)); }
.sunucular-modern .sm-section-title.is-fav::before{ background: linear-gradient(180deg, #ff4d6d, rgba(255,77,109,0)); }

/* === Detail page (sd-*) === */
.sd-page .sd-container{ max-width: 1150px; margin:0 auto; padding: 18px 18px 28px; }
.sd-card{ border:1px solid var(--sm-border); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border-radius:18px; box-shadow:0 14px 36px rgba(0,0,0,.28); }
.sd-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--sm-border); }
.sd-card-body{ padding:16px; }
/* Player chart sizing to avoid zero-height rendering */
.sd-card.sd-chart .sd-card-body{ position: relative; height: 320px; }
.sd-card.sd-chart .sd-card-body canvas{ width: 100%; /* remove !important to avoid blurry scaling */ display:block; }

/* Top grid */
.sd-grid{ display:grid; gap:14px; grid-template-columns: 1.2fr .8fr; align-items:stretch; }
@media (max-width: 960px){ .sd-grid{ grid-template-columns: 1fr; } }

/* Info card */
.sd-info .sd-info-row{ display:flex; gap:18px; align-items:flex-start; padding:16px; }
.sd-media{ flex:0 0 120px; height:120px; border-radius:14px; overflow:hidden; border:1px solid var(--sm-border); background:#0f0f14; display:grid; place-items:center; }
.sd-media img{ width:100%; height:100%; object-fit:cover; }
.sd-info-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.sd-hostname{ font-size:1.25rem; font-weight:800; line-height:1.2; color:#fff; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; }
.sd-ip{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--sm-border); border-radius:10px; background: rgba(255,255,255,.02); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; cursor:pointer; }
.sd-ip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sd-ip .sd-copy{ border:1px solid var(--sm-border); background: transparent; color: var(--sm-text); border-radius:8px; padding:6px 8px; cursor:pointer; }
.sd-meta{ display:flex; gap:10px; flex-wrap:wrap; color:#c9ced6; font-weight:700; }
.sd-map{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(122,168,255,.25); background: linear-gradient(135deg, rgba(122,168,255,.12), rgba(122,168,255,.06)); color:#cfe1ff; border-radius:999px; padding:6px 10px; line-height:1; }
.sd-rep{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,212,121,.25); background: linear-gradient(135deg, rgba(255,212,121,.12), rgba(255,212,121,.06)); color:#ffe29f; border-radius:999px; padding:6px 10px; line-height:1; }
.sd-online{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(16,185,129,.25); background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.06)); color:#b7f6dc; border-radius:999px; padding:6px 10px; line-height:1; }
.sd-online.off{ border-color: rgba(239,68,68,.25); background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.06)); color:#ffc0c0; }
.sd-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.sd-tag{ border:1px solid var(--sm-border); background:#23232b; color:#ff3b3b; font-weight:700; border-radius:8px; padding:4px 10px; }

/* NEW: Player count badge styles (green/orange/red) */
.sd-players-badge{ display:inline-flex; align-items:center; gap:8px; line-height:1; border-radius:999px; padding:6px 10px; font-weight:800; }
.sd-players-badge i{ opacity:.9; }
.sd-players-badge.green{ border:1px solid rgba(16,185,129,.28); background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(16,185,129,.06)); color:#c7f4e3; }
.sd-players-badge.orange{ border:1px solid rgba(245,158,11,.28); background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(245,158,11,.07)); color:#ffe1b3; }
.sd-players-badge.red{ border:1px solid rgba(239,68,68,.28); background: linear-gradient(135deg, rgba(239,68,68,.16), rgba(239,68,68,.07)); color:#ffc7c7; }

/* NEW: Steam connect CTA button */
.sd-connect-btn{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:800; width:fit-content; color:#e8f0ff; 
  background: linear-gradient(135deg, #1b2838, #2a475e); border:1px solid rgba(122,168,255,.25); box-shadow: 0 8px 20px rgba(42,71,94,.35); transition: transform .15s ease, filter .15s ease; }
.sd-connect-btn i{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#cfe1ff; }
.sd-connect-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 26px rgba(42,71,94,.42); }
.sd-connect-btn:active{ transform: translateY(0); }

/* Mini chart */
.sd-mini .sd-mini-body{ height: 250px; display:flex; align-items:center; justify-content:center; }

/* Actions row */
.sd-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between; margin: 14px 0; }
.sd-actions-left, .sd-actions-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sd-fav .fav-star{ font-size:1.2em; }
.sd-vote-msg{ margin-top:6px; color:#ff3b3b; font-weight:700; }

/* Chart card */
.sd-chart-head{ gap: 10px; }
.sd-chart-actions{ display:flex; align-items:center; gap:8px; }
.sd-zoom{ border:1px solid var(--sm-border); background: transparent; color: var(--sm-text); border-radius:8px; width:36px; height:36px; display:inline-grid; place-items:center; }

/* Players list */
.sd-player-list{ display:flex; flex-direction:column; gap:8px; }
/* Strict 3-col grid: Name | Score (centered) | Time */
.sd-player-row{ 
  display:grid; 
  grid-template-columns: 1fr 110px 1fr; /* symmetric so middle column sits on card center */
  column-gap: 16px; 
  align-items:center; 
  padding:10px 12px; 
  border:1px solid var(--sm-border); 
  border-radius:10px; 
  background: rgba(255,255,255,.02); 
}
.sd-player-name{ font-weight:700; color:#fff; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; justify-self:start; text-align:left; }
/* Score: fixed width, centered in the card */
.sd-player-score{ 
  color:#c9ced6; font-weight:600; white-space: nowrap; 
  font-variant-numeric: tabular-nums; 
  -webkit-font-smoothing: antialiased; 
  text-align: center; 
  justify-self: center; 
  width: 110px; 
}
/* Time: right column, right-aligned, no wrap */
.sd-player-time{ color:#c9ced6; font-weight:600; white-space: nowrap; font-variant-numeric: tabular-nums; justify-self:end; text-align:right; }
.sd-list-sort .sm-btn{ height: 36px; }
.sd-empty{ color: var(--sm-muted); }
/* Responsive stacking on small screens */
@media (max-width: 560px){
  .sd-player-row{ grid-template-columns: 1fr; row-gap: 6px; }
  .sd-player-time, .sd-player-score{ justify-self:start; text-align:left; width:auto; }
}

/* --- Mobilde başlıklar ve sağ taraf alt alta gelsin, fontlar küçülsün --- */
@media (max-width: 600px){
  .sunucular-modern .sm-section-title{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    height: auto;
    min-height: 48px;
    padding: 8px 8px 8px 14px;
  }
  .sunucular-modern .sm-title-wrap{
    gap: 8px;
  }
  .sunucular-modern .sm-section-title h2{
    font-size: 15px;
    line-height: 1.2;
    word-break: break-word;
  }
  .sunucular-modern .sm-kicker{
    font-size: 10px;
    height: 22px;
    padding: 0 8px;
  }
  .sunucular-modern .sm-section-title .sm-count,
  .sunucular-modern .sm-section-title .sm-pill{
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    gap: 6px;
  }
  .sunucular-modern .sm-section-title .sm-count i,
  .sunucular-modern .sm-section-title .sm-pill i{
    font-size: 11px;
    padding: 3px 5px;
  }
  .sunucular-modern .sm-actions-rt{
    gap: 6px;
  }
}

/* Mobilde filtre kartı başlığı ve butonları daha iyi hizalansın */
@media (max-width: 600px){
  .sunucular-modern .sm-hero.sm-hero-block .sm-section-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    height: auto;
    min-height: 40px;
    padding: 8px 8px 8px 12px;
  }
  .sunucular-modern .sm-hero.sm-hero-block .sm-title-wrap {
    gap: 6px;
  }
  .sunucular-modern .sm-hero.sm-hero-block .sm-section-title h2 {
    font-size: 13px;
    line-height: 1.2;
    word-break: break-word;
  }
  .sunucular-modern .sm-hero.sm-hero-block .sm-kicker {
    font-size: 9px;
    height: 18px;
    padding: 0 7px;
  }
  /* Filtre kartı içindeki butonlar ve view/sort grupları da küçülsün */
  .sunucular-modern .sm-row--controls > .sm-view-toggle,
  .sunucular-modern .sm-row--controls > .sm-sort-group,
  .sunucular-modern .sm-row--controls > .sm-toggle,
  .sunucular-modern .sm-row--controls > .sm-reset,
  .sunucular-modern .sm-row--controls > .sm-sep {
    height: 38px;
    min-height: 32px;
  }
  .sunucular-modern .sm-view-toggle .sm-view-btn,
  .sunucular-modern .sm-sort-btn {
    height: 28px;
    font-size: 12px;
    padding: 0 8px;
  }
  .sunucular-modern .sm-sort-group {
    gap: 4px;
    padding: 2px;
  }
  .sunucular-modern .sm-toggle .sm-toggle-label {
    font-size: 12px;
  }
  .sunucular-modern .sm-btn.sm-small {
    font-size: 12px;
    padding: 6px 8px;
  }
  .sunucular-modern .sm-reset {
    font-size: 12px;
    padding: 0 8px;
    height: 38px;
  }
  .sunucular-modern .sm-row--controls {
    gap: 8px 6px !important;
  }
  .sunucular-modern .sm-sep {
    height: 32px;
    line-height: 32px;
    padding: 0 2px;
    font-size: 13px;
  }
  .sunucular-modern .sm-control--search .sm-input {
    height: 36px;
    font-size: 13px;
    padding-left: 34px;
  }
  .sunucular-modern .sm-control--search::before {
    left: 8px;
    font-size: 12px;
  }
}

/* Mobilde oyun modları kutuları ve satırı daha iyi hizalansın, taşmasın */
@media (max-width: 600px){
  .sunucular-modern .sm-gmodes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch;
  }
  .sunucular-modern .sm-gm-chip,
  .sunucular-modern .sm-gm-toggle {
    min-width: 0;
    font-size: 13px;
    padding: 8px 6px;
    height: 38px;
    border-radius: 10px;
  }
  .sunucular-modern .sm-gm-chip {
    flex: unset;
    width: 100%;
    justify-content: center;
  }
  .sunucular-modern .sm-gm-toggle {
    grid-column: 2;
    width: 100%;
    margin-left: 0 !important;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sunucular-modern .sm-gm-more-wrap {
    grid-column: 1 / span 2;
    display: none;
    gap: 8px;
    margin-top: 2px;
  }
  .sunucular-modern .sm-gmodes.is-open .sm-gm-more-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobilde grafik başlığı ve chart-range butonları daha kompakt ve düzgün hizalı olsun */
@media (max-width: 600px) {
  .sd-card-head,
  .sd-chart-head {
    gap: 6px;
    padding: 7px 6px;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
  }
  .sd-card-head .sm-title-wrap,
  .sd-chart-head .sm-title-wrap {
    gap: 5px;
    flex-direction: column;
    align-items: flex-start;
  }
  .sd-card-head h2,
  .sd-chart-head h2 {
    font-size: 14px;
    line-height: 1.15;
    margin: 0;
    word-break: break-word;
  }
  .sd-card-head .sm-kicker,
  .sd-chart-head .sm-kicker {
    font-size: 9px;
    height: 18px;
    padding: 0 7px;
    margin-bottom: 2px;
  }
  .sd-chart-actions {
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  .sd-chart-actions .sm-btn.sm-small {
    font-size: 12px;
    padding: 6px 8px;
    height: 26px;
    min-width: 0;
    border-radius: 7px;
  }
  .sd-chart-actions .sm-btn.sm-small.active {
    font-size: 12px;
    padding: 6px 8px;
    background: #ff4d6d;
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(255,77,109,.18);
  }
  .sd-chart-actions .sd-zoom {
    width: 28px;
    height: 28px;
    font-size: 13px;
    border-radius: 7px;
    padding: 0;
  }
}

/* === Make Sunucular background same as index === */
.sunucular-modern{
  /* map CT/T to local palette */
  --sm-ct: var(--sm-accent-all);
  --sm-t:  var(--sm-brand-2);
  /* index-modern base background */
  background:
    /* CT (blue) */
    radial-gradient(1400px 780px at 85% -12%, color-mix(in oklab, var(--sm-ct) 22%, transparent) 0%, transparent 72%),
    /* Accent (pink) for more color */
    radial-gradient(1100px 620px at -15% 15%, color-mix(in oklab, var(--sm-brand) 18%, transparent) 0%, transparent 74%),
    /* neutral lift near bottom */
    radial-gradient(900px 520px at 50% 105%, rgba(255,255,255,.06), transparent 70%),
    /* lighter base */
    linear-gradient(180deg, #0f1118 0%, #0c0f16 100%);
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
}
/* keep content above motion layers */
.sunucular-modern > *{ position: relative; z-index: 1; }

.sunucular-modern::before{
  content:"";
  position: fixed;
  inset: -25% -15% -15% -15%;
  z-index: 0;
  pointer-events: none;
  background:
    /* CT stronger */
    radial-gradient(1300px 760px at 88% -12%, color-mix(in oklab, var(--sm-ct) 34%, transparent) 0%, transparent 70%),
    /* T stronger */
    radial-gradient(1100px 600px at -16% 18%, color-mix(in oklab, var(--sm-t) 30%, transparent) 0%, transparent 72%),
    /* Accent extra color bottom-right */
    radial-gradient(950px 560px at 78% 110%, color-mix(in oklab, var(--sm-brand) 22%, transparent) 0%, transparent 70%);
  filter: blur(70px) saturate(1.12) brightness(1.06);
  opacity: .66;
  transform: translate3d(0,0,0);
  animation: sm-aurora-float 28s ease-in-out infinite alternate;
  will-change: transform;
}
.sunucular-modern::after{
  /* softer vignette + slightly stronger top sheen (same as index) */
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% -15%, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 70%, rgba(0,0,0,.26) 100%),
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 30%);
  opacity: .50;
}

/* uses existing @keyframes im-aurora-float */
/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .sunucular-modern::before{ animation: none; }
}

/* Respect reduced motion (also disable new animations) */
@media (prefers-reduced-motion: reduce){
  .sunucular-modern::before,
  .sunucular-modern::after{
    animation: none !important;
    opacity: .5;
  }
}

/* Ensure main container sits above background layers */
.sunucular-modern .sm-container,
.sd-page .sd-container{ position: relative; z-index: 1; }


/* Mobile: hide all "Bağlan" actions (list cards + detail page) */
@media (max-width: 900px){
  /* Common card actions */
  .sunucular-modern .sm-actions .sm-btn--connect,
  .sunucular-modern .sm-actions .btn-connect,
  .sunucular-modern .sm-actions button[data-action="connect"],
  .sunucular-modern .sm-actions a[href^="steam://"],
  .sunucular-modern .sm-actions a[href*="connect"]
  { display: none !important; }

  /* Detail page CTA and any connect anchors */
  .sd-connect-btn,
  .sd-actions a[href^="steam://"],
  .sd-actions a[href*="connect"]
  { display: none !important; }
}

/* Header gap – final reduction: cancel body padding on desktop */
@media (min-width: 992px){
  .sunucular-modern{
    margin-top: calc(var(--hf-header-h, 72px) * -1); /* neutralize .hf-modern desktop offset */
  }
}

/* keep local paddings tight */
.sunucular-modern{
  --sm-header-h: 0;
  padding-top: 40px !important;
}
.sunucular-modern .sm-container{
  padding-top: 0 !important;
}

/* Mobilde liste görünümü daha da kompakt ve sunucu ismi link gibi görünsün */
@media (max-width: 600px){
  .sunucular-modern.view-list .sm-card {
    padding: 7px 4px;
    gap: 6px;
    border-radius: 8px;
    min-height: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.13);
  }
  .sunucular-modern.view-list .sm-main {
    gap: 4px;
  }
  .sunucular-modern.view-list .sm-hostname-text {
    font-size: 13px;
    line-height: 1.15;
    min-height: 0;
    max-height: 2em;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    color: #7aa8ff;
    transition: color .15s;
  }
  .sunucular-modern.view-list .sm-hostname-text:hover {
    color: #ff4d6d;
  }
}

/* Mobilde liste görünümü daha kompakt ve sade olsun */
@media (max-width: 600px){
  .sunucular-modern.view-list .sm-card {
    padding: 10px 8px;
    gap: 8px;
    border-radius: 10px;
    min-height: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
  }
  .sunucular-modern.view-list .sm-media {
    border-radius: 8px;
  }
  .sunucular-modern.view-list .sm-top {
    gap: 6px;
    min-height: 24px;
  }
  .sunucular-modern.view-list .sm-game-icon {
    width: 20px; height: 20px; border-radius: 5px;
  }
  .sunucular-modern.view-list .sm-game-icon img {
    width: 14px; height: 14px;
  }
  .sunucular-modern.view-list .sm-ip {
    font-size: 12px;
    gap: 4px;
  }
  .sunucular-modern.view-list .sm-badge-sponsor {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 999px;
  }
  .sunucular-modern.view-list .sm-main {
    gap: 6px;
  }
  .sunucular-modern.view-list .sm-hostname-text {
    font-size: 13px;
    line-height: 1.2;
    min-height: 0;
    max-height: 2.2em;
  }
  .sunucular-modern.view-list .sm-meta {
    font-size: 11px;
    gap: 5px;
    min-height: 18px;
  }
  .sunucular-modern.view-list .sm-map {
    padding: 3px 7px;
    font-size: 11px;
    min-height: 18px;
    border-radius: 999px;
    gap: 4px;
  }
  .sunucular-modern.view-list .sm-rank-badge {
    font-size: 10px;
    padding: 2px 7px;
    gap: 4px;
    border-radius: 999px;
  }
  .sunucular-modern.view-list .sm-rank-badge i {
    font-size: 10px;
  }
  .sunucular-modern.view-list .sm-players-label {
    font-size: 12px;
  }
  .sunucular-modern.view-list .sm-players-bar {
    height: 6px;
    border-radius: 6px;
  }
  .sunucular-modern.view-list .sm-actions {
    gap: 6px;
    min-height: 32px;
    margin-top: 4px;
    flex-wrap: wrap;
  }
  .sunucular-modern.view-list .sm-btn {
    font-size: 12px;
    padding: 7px 0;
    border-radius: 8px;
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
  .sunucular-modern.view-list .sm-btn.sm-primary {
    font-size: 13px;
    padding: 8px 0;
  }
}

/* Mobilde liste görünümünde İncele butonunu gizle */
@media (max-width: 600px){
  .sunucular-modern.view-list .sm-actions .sm-btn.sm-primary {
    display: none !important;
  }
}

/* Mobilde liste görünümünde kartın altındaki boşluk azaltılsın */
@media (max-width: 600px){
  .sunucular-modern.view-list .sm-main {
    gap: 2px;
    padding-bottom: 0;
  }
  .sunucular-modern.view-list .sm-actions {
    min-height: 18px;
    margin-top: 2px;
    padding-top: 2px;
    gap: 4px;
  }
  .sunucular-modern.view-list .sm-players {
    min-height: 32px;
  }
}