/* ============================================================
   Statify Responsive Fix
   Tarih: 2026-07-27

   Bu dosya tüm responsive/mobil düzeltmeleri içerir.
   header.ejs inline stillerinden SONRA yüklenir.

   Breakpoints:
   - Masaüstü: >1024px (varsayılan, query yok)
   - Tablet:   769px – 1024px
   - Telefon:  ≤768px
   ============================================================ */

/* ────────────────────────────────────────────
   GLOBAL: Yatay Overflow Engelleme
   ──────────────────────────────────────────── */
html {
  overflow-x: hidden !important;
}

.app-main {
  overflow-x: hidden !important;
}

.container,
.page,
main {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Hero pseudo-element taşma düzeltmesi */
.premium-hero,
.premium-servers-hero {
  overflow: hidden !important;
}

/* ────────────────────────────────────────────
   TABLET: 769px – 1024px
   Sidebar solda kalır (76px icon rail),
   içerik alanı daraltılır
   ──────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {

  /* İçerik container'ı */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Topbar daraltma */
  .topbar {
    margin: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
  }

  .topbar .topbar-row {
    padding: 10px 16px !important;
    gap: 12px !important;
  }

  /* Topbar başlık taşma önleme */
  .topbar-page-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 40vw !important;
  }

  /* Server listesi: tek sütun */
  .server-list-row {
    grid-template-columns: 1fr !important;
  }

  /* Server kartları grid: 2 sütun */
  .premium-server-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 0 12px !important;
  }

  /* İstatistik kartları: 2 sütun (3'ten düşür) */
  .premium-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 0 12px !important;
  }

  /* Profil layoutları: tek sütun */
  .profile-layout,
  .profile-layout-neo,
  .profile-layout-signature {
    grid-template-columns: 1fr !important;
  }

  .profile-columns {
    grid-template-columns: 1fr !important;
  }

  /* Hero alanları */
  .premium-hero {
    padding: 80px 20px 60px !important;
    margin: 20px auto 40px !important;
    max-width: 100% !important;
    border-radius: 32px !important;
  }

  .premium-servers-hero {
    margin: 20px 0 !important;
    padding: 60px 16px 50px !important;
    border-radius: 32px !important;
  }

  /* Section başlıklar */
  .premium-section {
    padding: 0 12px !important;
  }

  .premium-section-head {
    padding: 0 !important;
    margin-bottom: 24px !important;
  }

  .premium-section-head h2 {
    font-size: 2.2rem !important;
  }

  /* Server satır düzeni */
  .premium-server-row {
    padding: 20px 24px !important;
    gap: 16px !important;
  }

  .premium-server-icon,
  .premium-server-icon-fallback {
    width: 64px !important;
    height: 64px !important;
    border-radius: 20px !important;
  }

  .premium-server-name {
    font-size: 1.3rem !important;
  }

  /* Sort tabs: yatay scroll */
  .premium-floating-sortbar {
    max-width: 100% !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .premium-sort-tabs {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* Liderlik tablosu */
  .leaderboard-grid,
  .server-showcase-grid {
    grid-template-columns: 1fr !important;
  }

  /* Mağaza grid */
  .store-grid,
  .store-items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Kategori grid */
  .server-categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  }

  /* Home featured/showcase */
  .home-showcase-grid,
  .home-featured-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Sunucularım sayfası */
  .my-server-content-grid {
    grid-template-columns: 1fr !important;
  }

  /* Server detay stat grid */
  .server-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Server panel tabs */
  .server-panel-tabs {
    flex-wrap: wrap !important;
  }

  .server-panel-tab {
    flex: 1 1 calc(50% - 6px) !important;
    justify-content: center !important;
  }

  /* Profil KPI grid */
  .profile-activity-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Swipe panel */
  .swipe-panel {
    max-width: 100% !important;
  }

  /* Profil overflow düzeltmesi (tooltip taşmasını engelle) */
  .profile-vertical-card,
  .profile-avatar-badge-strip,
  .profile-vertical-shell,
  .profile-left-column,
  .profile-achievements-wrapper,
  .profile-vertical-body,
  .profile-right-column,
  .profile-activity-summary-card,
  .guild-activity-panel,
  .profile-stats-grid {
    overflow: hidden !important;
  }
}

/* ────────────────────────────────────────────
   TELEFON: ≤768px
   Sidebar alt dock, içerik tam genişlik
   ──────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Dinamik viewport yüksekliği (mobil tarayıcı adres çubuğu) */
  .app-shell {
    height: 100dvh !important;
  }

  .app-main {
    height: 100dvh !important;
    padding-bottom: 96px !important; /* dock (64px) + alt boşluk (16px) + nefes (16px) */
    box-sizing: border-box !important;
  }

  /* İçerik tam genişlik */
  .container,
  .page {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* Topbar düzeltmeleri */
  .topbar {
    margin: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: auto !important;
    border-radius: 0 !important;
  }

  .topbar .topbar-row {
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  /* Topbar başlık taşma önleme */
  .topbar-page-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 45vw !important;
    font-size: 1.1rem !important;
    padding-left: 8px !important;
  }

  /* Topbar kicker: telefonda gizle (yer kazanmak için) */
  .topbar-kicker {
    display: none !important;
  }

  /* Auth button küçültme */
  .topbar-auth-btn {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
  }

  /* User menü */
  .topbar-user-name {
    display: none !important; /* Sadece avatar göster */
  }

  /* Hero alanları: tam genişlik */
  .premium-hero {
    padding: 60px 16px 40px !important;
    border-radius: 24px !important;
    margin: 12px 0 32px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .premium-servers-hero {
    padding: 50px 14px 36px !important;
    margin: 12px 0 !important;
    border-radius: 24px !important;
  }

  .premium-hero-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
  }

  .premium-hero-subtitle {
    font-size: 1rem !important;
  }

  /* Butonlar: tam genişlik */
  .premium-btn {
    padding: 14px 24px !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .premium-actions {
    width: 100% !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }

  /* İstatistik kartları: tek sütun */
  .premium-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
    margin-bottom: 32px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .premium-stat-card {
    padding: 28px 16px !important;
    border-radius: 24px !important;
  }

  .premium-stat-card h2 {
    font-size: 2.8rem !important;
  }

  /* Section başlıklar */
  .premium-section {
    margin-bottom: 48px !important;
    padding: 0 !important;
  }

  .premium-section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
  }

  .premium-section-head h2 {
    font-size: 1.7rem !important;
  }

  /* Server kartları: tek sütun */
  .premium-server-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .premium-server-card {
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  /* Server satırları: dikey yığın */
  .premium-server-row {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 20px !important;
    gap: 12px !important;
  }

  .premium-rank-badge {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
  }

  .premium-server-icon,
  .premium-server-icon-fallback {
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
  }

  .premium-server-name {
    font-size: 1.2rem !important;
  }

  .premium-metrics-row {
    gap: 12px !important;
  }

  .premium-metric {
    font-size: 0.85rem !important;
  }

  /* Aksiyon butonları: tam genişlik */
  .premium-action-col {
    align-items: stretch !important;
    margin-top: 4px !important;
  }

  .premium-action-col-buttons {
    flex-direction: row !important;
    width: 100% !important;
  }

  .premium-vote-btn,
  .premium-join-btn {
    flex: 1 !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
  }

  /* Sort tabs */
  .premium-floating-sortbar {
    top: 70px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
    justify-content: flex-start !important;
  }

  .premium-sort-tabs {
    border-radius: 16px !important;
    max-width: 100% !important;
  }

  .premium-sort-tab {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
  }

  /* Server list satır düzeni */
  .server-list-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .server-list-metrics {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .server-list-action {
    justify-content: stretch !important;
  }

  /* Profil layoutları */
  .profile-layout,
  .profile-layout-neo,
  .profile-layout-signature,
  .profile-columns {
    grid-template-columns: 1fr !important;
  }

  /* Profil KPI grid */
  .profile-activity-kpi-grid {
    grid-template-columns: 1fr !important;
  }

  /* Profil tablolar: mobilde gizle */
  .profile-vote-table-head,
  .profile-global-stats-table-head {
    display: none !important;
  }

  /* Liderlik tablosu */
  .leaderboard-grid {
    grid-template-columns: 1fr !important;
  }

  /* Kategori grid */
  .server-categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }

  /* Mağaza */
  .store-grid,
  .store-items-grid {
    grid-template-columns: 1fr !important;
  }

  /* Sunucularım */
  .my-server-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .my-server-content-grid {
    grid-template-columns: 1fr !important;
  }

  /* Server detay */
  .server-stat-grid {
    grid-template-columns: 1fr !important;
  }

  .server-panel-tabs {
    flex-wrap: wrap !important;
  }

  .server-panel-tab {
    flex: 1 1 calc(50% - 6px) !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
  }

  .server-showcase-grid {
    grid-template-columns: 1fr !important;
  }

  .server-sortbar {
    grid-template-columns: 1fr !important;
  }

  /* Swipe panel */
  .swipe-panel {
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Home showcase/featured */
  .home-showcase-grid,
  .home-featured-grid {
    grid-template-columns: 1fr !important;
  }

  .home-server-metrics {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }

  /* Profil overflow düzeltmesi */
  .profile-vertical-card,
  .profile-avatar-badge-strip,
  .profile-vertical-shell,
  .profile-left-column,
  .profile-achievements-wrapper,
  .profile-vertical-body,
  .profile-right-column,
  .profile-activity-summary-card,
  .guild-activity-panel,
  .profile-stats-grid {
    overflow: hidden !important;
  }

  /* Server mini vote grid */
  .server-mini-vote-grid {
    grid-template-columns: 1fr !important;
  }

  /* Admin panel */
  .admin-stats-grid,
  .admin-panel-grid {
    grid-template-columns: 1fr !important;
  }

  /* Boost badge mobil konum */
  .boost-badge {
    right: 16px !important;
    font-size: 0.7rem !important;
  }
}

/* ────────────────────────────────────────────
   ÇOK KÜÇÜK EKRANLAR: ≤400px
   ──────────────────────────────────────────── */
@media (max-width: 400px) {

  .topbar-page-title {
    max-width: 35vw !important;
    font-size: 0.95rem !important;
  }

  .topbar-auth-btn {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
  }

  .premium-hero-title {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }

  .premium-stat-card h2 {
    font-size: 2.2rem !important;
  }

  .premium-section-head h2 {
    font-size: 1.4rem !important;
  }

  .premium-server-name {
    font-size: 1.05rem !important;
  }

  .premium-server-icon,
  .premium-server-icon-fallback {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
  }

  /* Bottom dock küçültme */
  .side-island {
    height: 56px !important;
    bottom: 10px !important;
    width: calc(100% - 24px) !important;
    left: 12px !important;
  }

  .side-nav-link {
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
  }

  .side-nav-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .app-main {
    padding-bottom: 84px !important;
  }

  /* Kategori grid daha küçük */
  .server-categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  }
}

/* Ensure user profile dropdown is always fixed above all layout layers & scroll containers */
.topbar-user-dropdown {
  position: fixed !important;
  top: 68px !important;
  right: 24px !important;
  width: min(300px, 90vw) !important;
  max-height: calc(100vh - 85px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 999999 !important;
}

@media (max-width: 768px) {
  .topbar-user-dropdown {
    top: 62px !important;
    right: 12px !important;
    width: calc(100vw - 24px) !important;
    max-width: 320px !important;
    max-height: calc(100vh - 140px) !important;
  }
}

/* 
  Kırmızımsı (pembe) scrollbarı (kayar çubuğu) tasarımın büyüklük veya boyutlarına
  dokunmadan, SADECE KAYDIRMA ÇUBUĞUNU ekranın (tarayıcı penceresinin) TAM EN SAĞ KENARINA çıkarma:
*/
html, body {
  overflow-y: auto !important;
  height: auto !important;
  margin: 0;
  padding: 0;
}

.app-shell, .app-main {
  height: auto !important;
  overflow: visible !important;
}

/* Masaüstü Sol Panel (side-island) kaydırma esnasında ekranda yerinden kıpırdamasın */
.side-island, .side-nav {
  position: sticky !important;
  top: 18px !important;
  max-height: calc(100vh - 36px);
}

/* Statify © 2026 Üst Barın (Topbar) hiçbir şekilde aşağı veya yukarı hareket etmesini ve sarsılmasını önleme */
.topbar {
  position: sticky !important;
  top: 0 !important;
  margin-top: 0 !important;
  z-index: 1000 !important;
}