/* =========================================================
   Xbox360TrYama - Optimize Premium Style
   Hakkımızda alanı eklendi + destekle alanı kaldırıldı
   ========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #02070c;
  --bg-soft: #06141a;
  --panel: rgba(8, 18, 24, 0.94);
  --panel2: rgba(11, 24, 32, 0.96);
  --panel3: rgba(10, 28, 36, 0.96);
  --green: #20ff6b;
  --green2: #12b84a;
  --cyan: #45f3ff;
  --blue: #3498db;
  --yellow: #ffd54f;
  --orange: #ffb300;
  --text: #ffffff;
  --muted: #a8c6c8;
  --danger: #e74c3c;
  --border: rgba(69, 243, 255, 0.24);
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.32);
  --radius: 18px;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(69, 243, 255, 0.16), transparent 32%),
    radial-gradient(circle at top right, rgba(32, 255, 107, 0.12), transparent 30%),
    linear-gradient(180deg, var(--bg), var(--bg-soft) 56%, var(--bg));
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
  z-index: -1;
}

img {
  max-width: 100%;
}

button,
a,
input,
select,
textarea {
  font: inherit;
}

/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
  position: sticky;
  top: 0;
  z-index: 999;
  min-height: 86px;
  padding: 12px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(4, 12, 18, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(69, 243, 255, 0.25);
  box-shadow: 0 8px 28px rgba(69, 243, 255, 0.08);
}

.logo {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  max-width: 360px !important;
  background: none !important;
  overflow: hidden !important;
  flex-shrink: 0;
}

.logo img {
  display: block !important;
  height: 64px !important;
  width: auto !important;
  max-width: 360px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 4px rgba(69, 243, 255, 0.18));
}

.logo-text {
  display: none !important;
}

.logo-accent,
.logo-text span {
  color: var(--cyan) !important;
}

.nav-right,
#authArea {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}

/* =========================================================
   BUTTONS
   ========================================================= */

button,
.nav-btn,
.admin-btn {
  border: none;
  outline: none;
  background: linear-gradient(135deg, #107c10, #3498db);
  color: white;
  padding: 10px 15px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  position: relative;
  overflow: hidden;
  user-select: none;
}

button:hover,
.nav-btn:hover,
.admin-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: #02070c;
  box-shadow: 0 0 18px rgba(69, 243, 255, 0.38);
}

button:active,
.nav-btn:active,
.admin-btn:active {
  transform: translateY(0) scale(0.98);
}

.nav-btn::after,
button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -90%;
  width: 58%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.30), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}

.nav-btn:hover::after,
button:hover::after {
  animation: shine 0.55s ease;
}

@keyframes shine {
  from { left: -90%; }
  to { left: 130%; }
}

button.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

.btn-spinner,
.loader-dot {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--cyan);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.75s linear infinite;
}

.btn-spinner {
  width: 13px;
  height: 13px;
  margin-right: 7px;
  vertical-align: -2px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   HAKKIMIZDA - PREMIUM SOSYAL ROZET
   ========================================================= */

.about-trigger {
  position: relative;
  width: auto;
  min-width: 104px;
  height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(135deg, rgba(69, 243, 255, 0.18), rgba(32, 255, 107, 0.12));
  border: 1px solid rgba(69, 243, 255, 0.42);
  box-shadow:
    0 0 0 1px rgba(69, 243, 255, 0.10),
    0 0 18px rgba(69, 243, 255, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  overflow: visible;
}

.about-trigger::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 1px solid rgba(69, 243, 255, 0.20);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.about-trigger::after {
  content: "Hakkımızda";
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: max-content;
  padding: 7px 10px;
  border-radius: 999px;
  color: #02070c;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  font-size: 12px;
  font-weight: 950;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30);
}

.about-trigger i {
  color: var(--cyan);
  font-size: 19px;
  filter: drop-shadow(0 0 7px rgba(69, 243, 255, 0.36));
}

.about-trigger:hover {
  transform: translateY(-2px) scale(1.04);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(135deg, rgba(69, 243, 255, 0.30), rgba(32, 255, 107, 0.20));
  box-shadow:
    0 0 0 1px rgba(69, 243, 255, 0.20),
    0 0 22px rgba(69, 243, 255, 0.34);
}

.about-trigger:hover::before,
.about-trigger:hover::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.about-box {
  text-align: center;
  width: min(520px, 94vw) !important;
  overflow: hidden;
  border-color: rgba(69, 243, 255, 0.42) !important;
  background:
    radial-gradient(circle at top left, rgba(69, 243, 255, 0.20), transparent 34%),
    radial-gradient(circle at top right, rgba(32, 255, 107, 0.13), transparent 32%),
    linear-gradient(180deg, rgba(10, 28, 36, 0.98), rgba(4, 10, 15, 0.98)) !important;
}

.about-box h2 {
  margin-top: 10px;
}

.about-intro {
  color: #d8eeee;
  line-height: 1.65;
  margin-bottom: 18px;
}

.social-links {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  padding: 14px 16px;
  border-radius: 16px;
  color: #ffffff !important;
  font-weight: 950;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.social i {
  font-size: 20px;
}

.social:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.32),
    0 0 20px rgba(69, 243, 255, 0.12);
}

.discord {
  background: linear-gradient(135deg, #5865F2, #3947c5);
}

.instagram {
  background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;
  text-align: center;
  padding: 92px 20px 78px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(69, 243, 255, 0.13), rgba(32, 255, 107, 0.08)),
    rgba(6, 18, 24, 0.70);
  border: 1px solid rgba(69, 243, 255, 0.22);
  box-shadow: inset 0 0 38px rgba(69, 243, 255, 0.045);
  z-index: -1;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 64px);
  margin-bottom: 16px;
  font-weight: 950;
  letter-spacing: -1px;
  background: linear-gradient(90deg, #ffffff, var(--cyan), var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(69, 243, 255, 0.18));
}

.hero p {
  color: #bffaff;
  font-size: 18px;
  margin-bottom: 28px;
}

/* =========================================================
   FORM
   ========================================================= */

.search-box {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

input,
select,
textarea {
  background: rgba(6, 18, 24, 0.92);
  color: white;
  border: 1px solid rgba(69, 243, 255, 0.35);
  padding: 12px 14px;
  border-radius: 12px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-box input {
  width: min(420px, 100%);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--green);
  box-shadow:
    0 0 12px rgba(69, 243, 255, 0.22),
    0 0 16px rgba(32, 255, 107, 0.12);
}

textarea {
  resize: vertical;
}

.container {
  width: min(1180px, 92%);
  margin: 44px auto;
}

.section-title,
.comments-section h2,
.profile-section h2,
.modal-content h2,
#adminPanel h2,
#rolePanel h2 {
  font-size: 30px;
  margin-bottom: 24px;
  color: var(--cyan) !important;
  text-shadow:
    0 0 12px rgba(69, 243, 255, 0.30),
    0 0 16px rgba(32, 255, 107, 0.12);
}

/* =========================================================
   GAMES
   ========================================================= */

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 26px;
}

.games-grid > div {
  position: relative;
  background: linear-gradient(180deg, var(--panel3), rgba(5, 12, 18, 0.96)) !important;
  border: 1px solid rgba(69, 243, 255, 0.22) !important;
  border-radius: 22px !important;
  padding: 16px !important;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  animation: cardIn 0.35s ease both;
  contain: content;
}

.games-grid > div::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(130deg, transparent, rgba(69, 243, 255, 0.18), rgba(32, 255, 107, 0.12), transparent);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.games-grid > div:hover {
  transform: translateY(-7px);
  border-color: rgba(69, 243, 255, 0.64) !important;
  box-shadow:
    0 20px 50px rgba(69, 243, 255, 0.13),
    0 0 20px rgba(32, 255, 107, 0.08);
}

.games-grid > div:hover::before {
  opacity: 1;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.games-grid img {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 3 / 4;
  height: auto !important;
  object-fit: cover;
  border-radius: 16px !important;
  margin-bottom: 16px;
  background: #0b0c10;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.games-grid > div:hover img {
  transform: scale(1.025);
  filter: brightness(1.06) contrast(1.05);
}

.games-grid h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.games-grid p {
  color: var(--muted);
  line-height: 1.55;
}

.games-grid a,
.download-btn {
  display: inline-block;
  margin-top: 12px;
  color: #02070c !important;
  background: linear-gradient(135deg, var(--blue), var(--green)) !important;
  padding: 10px 15px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 950;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.games-grid a:hover,
.download-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--cyan), var(--green)) !important;
  box-shadow: 0 0 20px rgba(69, 243, 255, 0.35);
}

/* =========================================================
   MODAL
   ========================================================= */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  justify-content: center !important;
  align-items: center !important;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 18px;
}

.modal[style*="block"] {
  display: flex !important;
}

.modal-content {
  position: relative;
  margin: auto !important;
  width: min(450px, 92vw) !important;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(10, 28, 36, 0.98), rgba(4, 10, 15, 0.98)) !important;
  color: white;
  padding: 28px;
  border-radius: 22px;
  border: 1px solid rgba(69, 243, 255, 0.35);
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.58),
    0 0 28px rgba(69, 243, 255, 0.14);
  animation: premiumModalIn 0.24s ease both;
  -webkit-overflow-scrolling: touch;
}

@keyframes premiumModalIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-content form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.close {
  float: right;
  font-size: 28px;
  cursor: pointer;
  color: var(--cyan);
  transition: transform 0.18s ease, color 0.18s ease;
}

.close:hover {
  color: var(--green);
  transform: rotate(90deg);
}

.game-modal {
  width: min(900px, 95vw) !important;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.game-modal img {
  width: 260px;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 18px;
  border: 2px solid rgba(69, 243, 255, 0.45);
  box-shadow: 0 0 24px rgba(69, 243, 255, 0.18);
  float: left;
  margin: 0 25px 15px 0;
}

.game-modal h2 {
  font-size: 34px;
}

.game-modal p {
  color: #d8e7dd;
  line-height: 1.7;
  font-size: 16px;
}

/* =========================================================
   ADMIN / PROFILE / GLASS
   ========================================================= */

#commentsContainer > div,
#commentFormContainer > div,
#profileContainer > div,
#adminPanel,
#rolePanel,
.comment-card,
.comment-form-card,
.comment-login-card,
.comment-notice,
.empty-comments,
.comments-loading,
.profile-card,
.glass {
  background: linear-gradient(180deg, var(--panel3), rgba(5, 12, 18, 0.96)) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(69, 243, 255, 0.06) !important;
}

#adminPanel,
#rolePanel {
  max-width: 1150px;
  margin: 32px auto !important;
  border-radius: 18px !important;
}

.profile-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
}

.profile-card {
  padding: 20px;
  border-radius: 16px;
}

.glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.avatar,
.avatar-fallback {
  width: 140px;
  height: 140px;
  border-radius: 50%;
}

.avatar {
  object-fit: cover;
  border: 3px solid var(--cyan);
}

.avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  color: #02070c;
  font-size: 50px;
  font-weight: 950;
}

.username {
  color: var(--cyan);
}

.role-badge-box {
  display: inline-block;
  padding: 6px 12px;
  background: #0b0c10;
  border-radius: 10px;
  margin-top: 10px;
}

.verify-box,
.danger-box {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
}

.verify-box {
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.danger-box {
  margin-top: 20px;
  border: 1px solid rgba(231, 76, 60, 0.30);
}

.profile-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.18s ease;
}

.profile-wrapper:hover {
  background: rgba(255, 255, 255, 0.10);
}

.nav-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cyan);
}

.profile-menu {
  position: absolute;
  top: 60px;
  right: 120px;
  background: #1f2833;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(69, 243, 255, 0.18);
}

.profile-menu button {
  background: none !important;
  border: none;
  color: white;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
}

.profile-menu button:hover {
  background: var(--cyan) !important;
  color: black;
}

.hidden {
  display: none !important;
}

/* =========================================================
   COMMENTS
   ========================================================= */

.comments-section,
.profile-section {
  padding: 15px 0 45px;
}

#commentFormContainer {
  margin-bottom: 18px;
}

.comment-form-card,
.comment-login-card,
.comment-notice,
.empty-comments,
.comments-loading {
  border-radius: 18px;
}

.comment-form-card {
  padding: 18px;
}

.comment-form-card textarea,
.reply-form textarea {
  width: 100%;
  line-height: 1.55;
}

.comment-form-card textarea {
  min-height: 105px;
}

.comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.comment-form-footer small {
  color: var(--muted);
}

.comment-login-card {
  text-align: center;
  padding: 32px 22px;
  margin-top: 15px;
}

.comment-login-card .login-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(69, 243, 255, 0.12);
  border: 1px solid rgba(69, 243, 255, 0.35);
  font-size: 26px;
}

.comment-login-card h3 {
  color: white;
  margin-bottom: 8px;
  font-size: 20px;
}

.comment-login-card p {
  color: var(--muted);
  margin-bottom: 18px;
}

.login-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.login-actions .secondary {
  background: rgba(16, 24, 32, 0.95) !important;
  border: 1px solid rgba(69, 243, 255, 0.35) !important;
  color: white !important;
}

.comment-notice {
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.comment-notice.warning {
  background: linear-gradient(180deg, rgba(59, 47, 31, 0.95), rgba(18, 15, 10, 0.95)) !important;
  border-color: rgba(243, 156, 18, 0.35) !important;
}

.comment-notice.error {
  border-color: rgba(231, 76, 60, 0.45) !important;
  color: #ffb3aa;
}

.comments-loading {
  padding: 18px;
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
}

.comment-card {
  color: white;
  padding: 16px;
  border-radius: 18px;
  margin-top: 16px;
  display: flex;
  gap: 14px;
  animation: cardIn 0.28s ease both;
}

.comment-card.pending {
  background: linear-gradient(180deg, rgba(59, 47, 31, 0.96), rgba(20, 15, 9, 0.96)) !important;
  border-color: rgba(243, 156, 18, 0.35) !important;
}

.comment-card.reply {
  margin-left: 20px;
  padding: 13px;
  border-left: 3px solid var(--cyan) !important;
}

.comment-avatar-wrap {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.comment-avatar-img,
.comment-avatar-letter {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.comment-avatar-img {
  object-fit: cover;
  display: block;
}

.comment-avatar-letter {
  background: linear-gradient(135deg, var(--cyan), var(--green));
  color: #020403;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.comment-header strong,
.comment-head strong {
  color: var(--cyan) !important;
}

.comment-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(168, 198, 200, 0.92);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.comment-content p {
  color: #e7f5ec;
  line-height: 1.65;
  overflow-wrap: anywhere;
  margin-bottom: 12px;
}

.role-badge,
.pending-badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.role-admin { background: #e74c3c; color: white; }
.role-operator { background: #f1c40f; color: #080808; }
.role-supporter { background: #3498db; color: white; }

.pending-badge {
  background: rgba(243, 156, 18, 0.16);
  color: #f39c12;
  border: 1px solid rgba(243, 156, 18, 0.35);
}

.comment-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.comment-actions button,
.comment-pagination button {
  background: rgba(8, 20, 28, 0.96) !important;
  border: 1px solid rgba(69, 243, 255, 0.30) !important;
  color: white;
  padding: 7px 11px;
  border-radius: 10px;
}

.comment-actions .approve-btn {
  background: linear-gradient(135deg, #107c10, #2ecc71) !important;
  border: none !important;
}

.comment-actions .delete-btn {
  background: linear-gradient(135deg, #8b1e16, #e74c3c) !important;
  border: none !important;
}

.reply-form {
  background: rgba(5, 8, 7, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px;
  margin-top: 8px;
}

.reply-form textarea {
  min-height: 66px;
  margin-bottom: 10px;
}

.replies-box {
  margin-top: 12px;
}

.empty-comments {
  padding: 28px 20px;
  text-align: center;
  color: white;
}

.empty-comments div {
  font-size: 34px;
  margin-bottom: 8px;
}

.empty-comments p {
  color: var(--muted);
  margin-top: 6px;
}

.comment-pagination {
  margin-top: 24px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.comment-pagination button {
  min-width: 42px;
}

.comment-pagination button.active {
  background: linear-gradient(135deg, var(--cyan), var(--green)) !important;
  color: #02070c !important;
}

/* =========================================================
   TOAST
   ========================================================= */

#customToast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  padding: 12px 18px;
  border-radius: 12px;
  color: white;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#customToast.toast-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#customToast.toast-error { background: #e74c3c; }
#customToast.toast-success { background: #107c10; }

/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #050807;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyan), var(--green));
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--green), var(--cyan));
}

/* =========================================================
   PERFORMANCE / ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@supports (content-visibility: auto) {
  .games-grid,
  .comments-section,
  .profile-section,
  #adminPanel,
  #rolePanel {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {
  .navbar {
    padding: 14px 16px;
    flex-direction: column;
    gap: 14px;
  }

  .nav-right,
  #authArea {
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero {
    padding: 65px 14px 52px;
  }

  .container {
    width: 94%;
    margin: 30px auto;
  }

  .games-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 18px;
  }

  .profile-grid,
  #profileContainer > div {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  .logo {
    max-width: 240px !important;
  }

  .logo img {
    height: 48px !important;
    max-width: 240px !important;
  }
}

@media (max-width: 650px) {
  .game-modal img {
    float: none;
    display: block;
    margin: 0 auto 20px auto;
    width: 220px;
  }

  .game-modal h2 {
    font-size: 26px;
    text-align: center;
  }

  .game-modal p {
    text-align: center;
  }

  .download-btn {
    display: block;
    text-align: center;
  }

  .comment-card {
    flex-direction: column;
  }

  .comment-card.reply {
    margin-left: 0;
  }

  .comment-avatar-wrap,
  .comment-avatar-img,
  .comment-avatar-letter {
    width: 42px;
    height: 42px;
  }

  .comment-form-footer {
    align-items: stretch;
  }

  .comment-form-footer button,
  .reply-form button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  button,
  .nav-btn,
  .admin-btn {
    padding: 9px 11px;
    font-size: 13px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .games-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .games-grid > div {
    padding: 11px !important;
    border-radius: 16px !important;
  }

  .games-grid h3 {
    font-size: 16px;
  }

  .games-grid p {
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .hero h1 {
    font-size: 28px !important;
  }

  .hero p {
    font-size: 14px !important;
  }

  .logo img {
    height: 40px !important;
    max-width: 200px !important;
  }

  .games-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .game-modal {
    width: 95vw !important;
    max-height: 85vh !important;
  }

  .game-modal h2 {
    font-size: 22px !important;
  }

  .game-modal p {
    font-size: 14px !important;
    text-align: center !important;
  }

  button,
  .nav-btn,
  .admin-btn,
  .download-btn {
    width: 100% !important;
    font-size: 14px !important;
    padding: 12px !important;
  }

  .about-trigger {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
  }
}

/* =========================================================
   MOBILE ADS OFF - iOS / Android
   Bu bölüm mobil cihazlarda reklam scriptlerinin oluşturduğu
   iframe/div alanlarını gizler. Masaüstüne dokunmaz.
   ========================================================= */

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  html.mobile-no-ads iframe[src*="effectivecpmnetwork.com"],
  html.mobile-no-ads iframe[src*="highperformanceformat.com"],
  html.mobile-no-ads iframe[src*="adsterra"],
  html.mobile-no-ads iframe[src*="pl29720104"],
  html.mobile-no-ads [id*="adsterra" i],
  html.mobile-no-ads [class*="adsterra" i],
  html.mobile-no-ads [id*="ad-banner" i],
  html.mobile-no-ads [class*="ad-banner" i],
  html.mobile-no-ads [id*="banner-ad" i],
  html.mobile-no-ads [class*="banner-ad" i],
  html.mobile-no-ads .adsbygoogle,
  html.mobile-no-ads .ad-container,
  html.mobile-no-ads .ads-container,
  html.mobile-no-ads .ad-box,
  html.mobile-no-ads .ad-banner,
  html.mobile-no-ads .mobile-ad,
  html.mobile-no-ads .desktop-ad,
  html.mobile-no-ads .social-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  html.mobile-no-ads body {
    padding-bottom: 0 !important;
  }
}

/* =========================================================
   COMMENT EXTRA OPTIMIZATION
   ========================================================= */

.comment-card,
.comment-form-card,
.comment-login-card,
.empty-comments,
.comments-loading {
  will-change: auto;
}

.comment-actions button:disabled,
.comment-form-footer button:disabled,
.reply-form button:disabled {
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.72 !important;
}

.comment-card {
  contain: layout paint;
}

.replies-box {
  contain: layout paint;
}
/* =========================================================
   SOL ALT SORUN BİLDİR BALONU
   ========================================================= */

.support-bubble {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 9000;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #02070c;
  font-size: 28px;
  font-weight: 950;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 0 0 1px rgba(69, 243, 255, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(69, 243, 255, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.support-bubble::before {
  content: "Sorun bildir";
  position: absolute;
  left: 66px;
  bottom: 8px;
  width: max-content;
  max-width: 180px;
  padding: 8px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(8, 18, 24, 0.96);
  border: 1px solid rgba(69, 243, 255, 0.30);
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
}

.support-bubble:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(69, 243, 255, 0.26),
    0 16px 36px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(69, 243, 255, 0.42);
}

.support-bubble:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.support-modal-box {
  width: min(560px, 94vw) !important;
  border-color: rgba(69, 243, 255, 0.45) !important;
  background:
    radial-gradient(circle at top left, rgba(69, 243, 255, 0.18), transparent 34%),
    radial-gradient(circle at top right, rgba(32, 255, 107, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(10, 28, 36, 0.98), rgba(4, 10, 15, 0.98)) !important;
}

.support-intro {
  color: #d8eeee;
  line-height: 1.65;
  margin-bottom: 18px;
}

.support-form {
  display: grid;
  gap: 12px;
}

.support-form label {
  color: var(--cyan);
  font-weight: 900;
  font-size: 14px;
}

.support-form textarea {
  min-height: 130px;
  line-height: 1.55;
}

.support-form small {
  color: var(--muted);
  line-height: 1.5;
}

.support-admin-panel {
  width: min(1150px, 92%);
  margin: 24px auto 40px !important;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--panel3), rgba(5, 12, 18, 0.96)) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(69, 243, 255, 0.06) !important;
}

.support-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.support-admin-head h2 {
  color: var(--cyan) !important;
  margin-bottom: 6px;
}

.support-admin-head p {
  color: var(--muted);
  line-height: 1.5;
}

.support-messages-list {
  display: grid;
  gap: 12px;
}

.support-message-card {
  padding: 15px;
  border-radius: 16px;
  background: rgba(6, 18, 24, 0.86);
  border: 1px solid rgba(69, 243, 255, 0.22);
}

.support-message-card.unread {
  border-color: rgba(32, 255, 107, 0.42);
  box-shadow: 0 0 18px rgba(32, 255, 107, 0.08);
}

.support-message-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.support-message-top strong {
  color: var(--cyan);
}

.support-message-meta {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.support-message-text {
  color: #e7f5ec;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 10px;
}

.support-empty {
  padding: 18px;
  border-radius: 14px;
  color: var(--muted);
  background: rgba(6, 18, 24, 0.72);
  border: 1px dashed rgba(69, 243, 255, 0.24);
  text-align: center;
}

@media (max-width: 650px) {
  .support-bubble {
    left: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
    font-size: 25px;
  }

  .support-bubble::before {
    display: none;
  }

  .support-admin-head {
    align-items: stretch;
  }

  .support-admin-head button {
    width: 100%;
  }
}

.support-bubble:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

.support-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:red;
  color:white;
  font-size:11px;
  display:grid;
  place-items:center;
  font-weight:900;
}
.support-bubble{position:fixed;left:22px;bottom:22px;z-index:9999;}

/* =========================================================
   FINAL SUPPORT + NOTIFICATION SYSTEM FIX
   Bu bölüm en altta olmalı. Eski bozuk support stillerini ezer.
   ========================================================= */

.floating-support-tools {
  position: fixed !important;
  left: 22px !important;
  bottom: 22px !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-start !important;
  pointer-events: none !important;
}

.support-bubble,
.notification-bubble {
  pointer-events: auto !important;
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 999999 !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  font-size: 23px !important;
  line-height: 1 !important;
  color: #02070c !important;
  background: linear-gradient(135deg, var(--cyan), var(--green)) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  box-shadow:
    0 0 0 1px rgba(69, 243, 255, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(69, 243, 255, 0.28) !important;
  overflow: visible !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.notification-bubble {
  background: linear-gradient(135deg, #ffd54f, #45f3ff) !important;
}

.support-bubble:hover,
.notification-bubble:hover {
  transform: translateY(-2px) scale(1.05) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 0 0 1px rgba(69, 243, 255, 0.22),
    0 16px 36px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(69, 243, 255, 0.40) !important;
}

.support-bubble::before,
.notification-bubble::before {
  position: absolute;
  left: 68px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  width: max-content;
  max-width: 190px;
  padding: 8px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(8, 18, 24, 0.96);
  border: 1px solid rgba(69, 243, 255, 0.30);
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32);
}

.support-bubble::before {
  content: "Sorun bildir";
}

.notification-bubble::before {
  content: "Bildirimler";
}

.support-bubble:hover::before,
.notification-bubble:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.support-bubble::after,
.notification-bubble::after,
button.support-bubble::after,
button.notification-bubble::after {
  display: none !important;
  content: none !important;
}

.support-bubble i,
.notification-bubble i {
  font-size: 22px !important;
  color: #02070c !important;
  pointer-events: none !important;
}

.support-badge {
  position: absolute !important;
  top: -7px !important;
  right: -7px !important;
  z-index: 1000000 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 32px !important;
  border-radius: 999px !important;
  background: #e74c3c !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  place-items: center !important;
  border: 2px solid #06141a !important;
  box-shadow: 0 0 14px rgba(231, 76, 60, 0.55) !important;
}

.notification-panel {
  position: fixed !important;
  left: 92px !important;
  bottom: 92px !important;
  z-index: 999998 !important;
  width: min(390px, calc(100vw - 112px)) !important;
  max-height: min(520px, calc(100vh - 130px)) !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at top left, rgba(69, 243, 255, 0.18), transparent 35%),
    linear-gradient(180deg, rgba(10, 28, 36, 0.98), rgba(4, 10, 15, 0.98)) !important;
  border: 1px solid rgba(69, 243, 255, 0.36) !important;
  border-radius: 20px !important;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.60),
    0 0 28px rgba(69, 243, 255, 0.16) !important;
  color: white !important;
}

.notification-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 18px 12px !important;
  border-bottom: 1px solid rgba(69, 243, 255, 0.18) !important;
}

.notification-head h3 {
  margin: 0 0 4px !important;
  color: var(--cyan) !important;
  font-size: 22px !important;
}

.notification-head p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}

.notification-close {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: white !important;
  font-size: 22px !important;
}

.notification-list {
  max-height: 330px !important;
  overflow-y: auto !important;
  padding: 12px !important;
}

.notification-item {
  padding: 13px !important;
  border-radius: 16px !important;
  background: rgba(8, 20, 28, 0.88) !important;
  border: 1px solid rgba(69, 243, 255, 0.20) !important;
  margin-bottom: 10px !important;
}

.notification-item.unread {
  border-color: rgba(255, 213, 79, 0.65) !important;
  box-shadow: 0 0 18px rgba(255, 213, 79, 0.08) !important;
}

.notification-item-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 7px !important;
}

.notification-item-top strong {
  color: var(--cyan) !important;
}

.notification-item-top span {
  color: var(--muted) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

.notification-item p {
  color: #e7f5ec !important;
  line-height: 1.5 !important;
  margin: 0 0 10px !important;
  overflow-wrap: anywhere !important;
}

.notification-actions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.notification-actions button,
.notification-clear-btn,
.support-reply-actions button {
  width: auto !important;
  min-width: auto !important;
  padding: 8px 11px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

.notification-clear-btn {
  margin: 0 12px 12px !important;
  background: linear-gradient(135deg, #8b1e16, #e74c3c) !important;
  color: white !important;
}

.support-admin-panel {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 34px auto 0 !important;
  padding: 20px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at top left, rgba(69, 243, 255, 0.15), transparent 34%),
    linear-gradient(180deg, var(--panel3), rgba(5, 12, 18, 0.96)) !important;
  border: 1px solid rgba(69, 243, 255, 0.24) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(69, 243, 255, 0.06) !important;
}

.support-admin-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}

.support-admin-head h2 {
  margin: 0 0 4px !important;
  color: var(--cyan) !important;
}

.support-admin-head p {
  margin: 0 !important;
  color: var(--muted) !important;
}

.support-messages-list {
  display: grid !important;
  gap: 14px !important;
}

.support-message-card {
  padding: 16px !important;
  border-radius: 18px !important;
  background: rgba(8, 20, 28, 0.88) !important;
  border: 1px solid rgba(69, 243, 255, 0.22) !important;
}

.support-message-card.unread {
  border-color: rgba(255, 213, 79, 0.62) !important;
}

.support-message-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
}

.support-message-top strong {
  color: var(--cyan) !important;
}

.support-message-meta {
  color: var(--muted) !important;
  line-height: 1.55 !important;
  font-size: 13px !important;
}

.support-message-text {
  margin: 12px 0 !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.20) !important;
  color: #e7f5ec !important;
  line-height: 1.6 !important;
  overflow-wrap: anywhere !important;
}

.support-reply-box {
  display: grid !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.support-reply-box label,
.support-form label {
  color: var(--cyan) !important;
  font-weight: 900 !important;
}

.support-reply-box textarea,
.support-form textarea {
  width: 100% !important;
  min-height: 88px !important;
}

.support-form {
  display: grid !important;
  gap: 12px !important;
}

.support-form small,
.support-intro,
.support-empty {
  color: var(--muted) !important;
  line-height: 1.55 !important;
}

.support-empty {
  padding: 16px !important;
  text-align: center !important;
  border-radius: 14px !important;
  background: rgba(8, 20, 28, 0.72) !important;
  border: 1px solid rgba(69, 243, 255, 0.16) !important;
}

@media (max-width: 560px) {
  .floating-support-tools {
    left: 14px !important;
    bottom: 14px !important;
    gap: 10px !important;
  }

  .support-bubble,
  .notification-bubble {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

  .notification-panel {
    left: 12px !important;
    right: 12px !important;
    bottom: 132px !important;
    width: auto !important;
    max-height: calc(100vh - 160px) !important;
  }

  .support-bubble::before,
  .notification-bubble::before {
    display: none !important;
  }
}


/* =========================================================
   SUPPORT ACTION BUTTON FIX - v1.9
   Admin yanıt gönderince talep listeden kalkar.
   Admin yanıt yazmadan talebi kapatabilir.
   ========================================================= */

.support-reply-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.support-secondary-btn {
  background: rgba(8, 20, 28, 0.96) !important;
  border: 1px solid rgba(69, 243, 255, 0.35) !important;
  color: white !important;
}

.support-secondary-btn:hover {
  background: linear-gradient(135deg, var(--cyan), var(--green)) !important;
  color: #02070c !important;
}

.support-danger-btn {
  background: linear-gradient(135deg, #8b1e16, #e74c3c) !important;
  color: white !important;
  border: none !important;
}

.support-danger-btn:hover {
  background: linear-gradient(135deg, #e74c3c, #ff7675) !important;
  color: white !important;
}

/* =========================================================
   PROFILE REDESIGN v2.0 - SADE / MODERN PROFİLİM SAYFASI
   Bu bölüm sadece Profilim sekmesini etkiler.
   ========================================================= */

.profile-section {
  padding: 42px 0 72px !important;
}

.profile-section .container {
  width: min(1080px, 94%) !important;
  margin: 34px auto !important;
}

.profile-section h2 {
  width: fit-content !important;
  margin: 0 auto 26px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  color: #02070c !important;
  background: linear-gradient(135deg, rgba(69, 243, 255, 0.95), rgba(32, 255, 107, 0.88)) !important;
  text-shadow: none !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(69, 243, 255, 0.18) !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  letter-spacing: -0.4px !important;
}

#profileContainer {
  position: relative !important;
}

#profileContainer > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.profile-section .profile-grid,
#profileContainer .profile-grid,
#profileContainer > div.profile-grid {
  display: grid !important;
  grid-template-columns: 310px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

.profile-section .profile-card,
.profile-section .glass,
.profile-section .verify-box,
.profile-section .danger-box,
#profileContainer .profile-card,
#profileContainer .glass,
#profileContainer .verify-box,
#profileContainer .danger-box,
#profileContainer > div:not(.profile-grid) {
  background:
    radial-gradient(circle at top left, rgba(69, 243, 255, 0.10), transparent 32%),
    linear-gradient(180deg, rgba(12, 27, 34, 0.92), rgba(5, 13, 18, 0.92)) !important;
  border: 1px solid rgba(69, 243, 255, 0.18) !important;
  border-radius: 22px !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  padding: 22px !important;
  overflow: hidden !important;
}

.profile-section .profile-card:first-child,
#profileContainer .profile-grid > .profile-card:first-child,
#profileContainer .profile-grid > .glass:first-child {
  position: sticky !important;
  top: 106px !important;
  text-align: center !important;
  display: grid !important;
  justify-items: center !important;
  gap: 12px !important;
}

.profile-section .avatar,
.profile-section .avatar-fallback,
#profileContainer .avatar,
#profileContainer .avatar-fallback {
  width: 118px !important;
  height: 118px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(69, 243, 255, 0.82) !important;
  box-shadow:
    0 0 0 7px rgba(69, 243, 255, 0.08),
    0 16px 32px rgba(0, 0, 0, 0.30),
    0 0 24px rgba(69, 243, 255, 0.16) !important;
}

.profile-section .avatar {
  object-fit: cover !important;
}

.profile-section .avatar-fallback {
  background: linear-gradient(135deg, var(--cyan), var(--green)) !important;
  color: #02070c !important;
  font-size: 42px !important;
  font-weight: 950 !important;
}

.profile-section .username,
#profileContainer .username {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  letter-spacing: -0.4px !important;
  margin-top: 8px !important;
}

.profile-section .role-badge-box,
#profileContainer .role-badge-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: rgba(69, 243, 255, 0.10) !important;
  border: 1px solid rgba(69, 243, 255, 0.22) !important;
  color: var(--cyan) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.profile-section h3,
#profileContainer h3 {
  color: var(--cyan) !important;
  font-size: 19px !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.2px !important;
}

.profile-section p,
#profileContainer p,
.profile-section small,
#profileContainer small {
  color: var(--muted) !important;
  line-height: 1.6 !important;
}

.profile-section label,
#profileContainer label {
  display: block !important;
  margin: 12px 0 7px !important;
  color: #d8eeee !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.profile-section input,
.profile-section select,
.profile-section textarea,
#profileContainer input,
#profileContainer select,
#profileContainer textarea {
  width: 100% !important;
  min-height: 44px !important;
  background: rgba(3, 10, 14, 0.78) !important;
  border: 1px solid rgba(69, 243, 255, 0.20) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  padding: 12px 13px !important;
  box-shadow: none !important;
}

.profile-section input:focus,
.profile-section select:focus,
.profile-section textarea:focus,
#profileContainer input:focus,
#profileContainer select:focus,
#profileContainer textarea:focus {
  border-color: rgba(32, 255, 107, 0.55) !important;
  box-shadow:
    0 0 0 4px rgba(32, 255, 107, 0.08),
    0 0 18px rgba(69, 243, 255, 0.10) !important;
}

.profile-section input[type="file"],
#profileContainer input[type="file"] {
  padding: 10px !important;
  cursor: pointer !important;
}

.profile-section button,
#profileContainer button {
  width: auto !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(69, 243, 255, 0.90), rgba(32, 255, 107, 0.86)) !important;
  color: #02070c !important;
  font-weight: 950 !important;
  border: none !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(69, 243, 255, 0.12) !important;
}

.profile-section button:hover,
#profileContainer button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(69, 243, 255, 0.22) !important;
}

.profile-section .verify-box,
#profileContainer .verify-box {
  border-color: rgba(255, 213, 79, 0.20) !important;
  background:
    radial-gradient(circle at top left, rgba(255, 213, 79, 0.10), transparent 34%),
    linear-gradient(180deg, rgba(24, 22, 13, 0.92), rgba(8, 12, 13, 0.92)) !important;
}

.profile-section .danger-box,
#profileContainer .danger-box {
  border-color: rgba(231, 76, 60, 0.24) !important;
  background:
    radial-gradient(circle at top left, rgba(231, 76, 60, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(24, 12, 12, 0.92), rgba(8, 12, 13, 0.92)) !important;
}

.profile-section .danger-box button,
#profileContainer .danger-box button,
.profile-section button[onclick*="delete"],
#profileContainer button[onclick*="delete"] {
  background: linear-gradient(135deg, #8b1e16, #e74c3c) !important;
  color: #ffffff !important;
}

.profile-section .danger-box button:hover,
#profileContainer .danger-box button:hover {
  background: linear-gradient(135deg, #e74c3c, #ff7675) !important;
  color: #ffffff !important;
}

.profile-section hr,
#profileContainer hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(69, 243, 255, 0.22), transparent) !important;
  margin: 18px 0 !important;
}

.profile-section .profile-card + .profile-card,
.profile-section .glass + .glass,
#profileContainer .profile-card + .profile-card,
#profileContainer .glass + .glass {
  margin-top: 0 !important;
}

/* Profil içindeki küçük bilgi satırları */
.profile-section .profile-info-row,
#profileContainer .profile-info-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(69, 243, 255, 0.10) !important;
}

.profile-section .profile-info-row:last-child,
#profileContainer .profile-info-row:last-child {
  border-bottom: none !important;
}

@media (max-width: 900px) {
  .profile-section .profile-grid,
  #profileContainer .profile-grid,
  #profileContainer > div.profile-grid {
    grid-template-columns: 1fr !important;
  }

  .profile-section .profile-card:first-child,
  #profileContainer .profile-grid > .profile-card:first-child,
  #profileContainer .profile-grid > .glass:first-child {
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 560px) {
  .profile-section {
    padding: 26px 0 54px !important;
  }

  .profile-section .container {
    width: 94% !important;
    margin: 24px auto !important;
  }

  .profile-section .profile-card,
  .profile-section .glass,
  .profile-section .verify-box,
  .profile-section .danger-box,
  #profileContainer .profile-card,
  #profileContainer .glass,
  #profileContainer .verify-box,
  #profileContainer .danger-box {
    padding: 17px !important;
    border-radius: 18px !important;
  }

  .profile-section .avatar,
  .profile-section .avatar-fallback,
  #profileContainer .avatar,
  #profileContainer .avatar-fallback {
    width: 104px !important;
    height: 104px !important;
  }

  .profile-section button,
  #profileContainer button {
    width: 100% !important;
  }
}

/* =========================================================
   GAME DETAIL PAGE + SEO FRIENDLY GAME URL SYSTEM
   ========================================================= */

.game-card {
  cursor: pointer !important;
}

.game-card:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

.game-status.preparing,
.download-warning {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 950;
}

.game-status.preparing {
  background: linear-gradient(135deg, #ffd54f, #f39c12);
  color: #080808;
}

.download-warning {
  color: #ffb3aa !important;
  background: rgba(231, 76, 60, 0.12);
  border: 1px solid rgba(231, 76, 60, 0.28);
}

.download-warning.verify {
  color: #ffd98a !important;
  background: rgba(243, 156, 18, 0.12);
  border-color: rgba(243, 156, 18, 0.30);
}

.games-loading {
  grid-column: 1 / -1;
  color: var(--cyan);
  padding: 20px;
  border-radius: 16px;
  background: rgba(8, 18, 24, 0.86);
  border: 1px solid rgba(69, 243, 255, 0.22);
  text-align: center;
  font-weight: 900;
}

.game-detail-section {
  min-height: calc(100vh - 86px);
  padding: 36px 0 70px;
}

.game-detail-back {
  margin-bottom: 22px;
  width: auto !important;
}

.game-detail-card {
  display: grid;
  grid-template-columns: minmax(230px, 340px) 1fr;
  gap: 28px;
  align-items: start;
  background:
    radial-gradient(circle at top left, rgba(69, 243, 255, 0.18), transparent 36%),
    radial-gradient(circle at bottom right, rgba(32, 255, 107, 0.12), transparent 34%),
    linear-gradient(180deg, var(--panel3), rgba(5, 12, 18, 0.97));
  border: 1px solid rgba(69, 243, 255, 0.30);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 34px);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.36),
    0 0 28px rgba(69, 243, 255, 0.08);
}

.game-detail-card.not-found {
  display: block;
  text-align: center;
}

.game-detail-cover-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(69, 243, 255, 0.34);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
  background: #08121a;
}

.game-detail-cover {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.game-detail-info {
  min-width: 0;
}

.game-detail-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #02070c;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  font-weight: 950;
  font-size: 12px;
}

.game-detail-info h1 {
  color: white;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.05;
  margin-bottom: 18px;
  letter-spacing: -1px;
  text-shadow: 0 0 18px rgba(69, 243, 255, 0.18);
}

.game-detail-info p {
  color: #d8eeee;
  font-size: 17px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.game-detail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.secondary-detail-btn {
  background: rgba(8, 20, 28, 0.96) !important;
  border: 1px solid rgba(69, 243, 255, 0.30) !important;
  color: white !important;
}

@media (max-width: 760px) {
  .game-detail-card {
    grid-template-columns: 1fr;
  }

  .game-detail-cover-wrap {
    max-width: 280px;
    margin: 0 auto;
  }

  .game-detail-info h1,
  .game-detail-info p {
    text-align: center;
  }

  .game-detail-kicker {
    margin-left: auto;
    margin-right: auto;
  }

  .game-detail-actions {
    justify-content: center;
  }
}

/* =========================================================
   PROFILE PHOTO POSITION FIX
   ========================================================= */

.profile-photo-position-editor {
  margin: 18px 0;
  padding: 18px;
  border-radius: 18px;
  background: rgba(6, 18, 24, 0.86);
  border: 1px solid rgba(69, 243, 255, 0.26);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20);
}

.profile-position-preview {
  width: 170px;
  height: 170px;
  margin: 8px auto 14px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(69, 243, 255, 0.82);
  background: #071018;
  box-shadow:
    0 0 0 7px rgba(69, 243, 255, 0.08),
    0 16px 32px rgba(0, 0, 0, 0.30),
    0 0 24px rgba(69, 243, 255, 0.16);
}

.profile-position-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--profile-photo-position, center);
  transform: scale(var(--profile-photo-zoom, 1));
  transform-origin: center;
  transition: object-position 0.12s ease, transform 0.12s ease;
}

.profile-position-value {
  text-align: center;
  color: var(--cyan);
  font-weight: 900;
  margin-bottom: 12px;
}

.profile-photo-position-editor input[type="range"] {
  width: 100% !important;
  accent-color: var(--cyan);
  padding: 0;
  border: none;
  background: transparent;
}

.profile-position-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.profile-secondary-btn {
  background: rgba(8, 20, 28, 0.96) !important;
  border: 1px solid rgba(69, 243, 255, 0.30) !important;
  color: white !important;
}

.profile-photo-live {
  object-position: var(--profile-photo-position, center) !important;
  transform: scale(var(--profile-photo-zoom, 1));
  transform-origin: center;
  clip-path: circle(50% at 50% 50%);
}

/* =========================================================
   GAME GENRE + DETAIL ADMIN EDIT
   ========================================================= */

.game-card {
  cursor: pointer;
}

.game-card-genre {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin-top: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #02070c !important;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2 !important;
}

.game-detail-back,
.secondary-detail-btn {
  display: none !important;
}

.game-detail-admin-panel {
  margin-top: 24px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(6, 18, 24, 0.72);
  border: 1px solid rgba(69, 243, 255, 0.26);
}

.game-detail-admin-panel h3 {
  margin-bottom: 14px;
  color: var(--cyan);
}

.game-detail-admin-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.admin-edit-btn {
  background: linear-gradient(135deg, #f39c12, #ffd54f) !important;
  color: #111 !important;
}

.admin-delete-btn {
  background: linear-gradient(135deg, #8b1e16, #e74c3c) !important;
  color: #fff !important;
}

.admin-save-btn {
  background: linear-gradient(135deg, #107c10, #2ecc71) !important;
  color: #fff !important;
}

.game-detail-edit-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.game-detail-edit-form input,
.game-detail-edit-form textarea,
.game-detail-edit-form select {
  width: 100%;
}

.game-detail-edit-form textarea {
  min-height: 110px;
  line-height: 1.55;
}

@media (max-width: 650px) {
  .game-detail-admin-actions button,
  .game-detail-edit-form button {
    width: 100%;
  }
}

/* =========================================================
   FINAL FIX - Oyun içi ana sayfa butonu + YouTube sosyal butonu
   ========================================================= */
.social.youtube {
  background: linear-gradient(135deg, #ff0000, #b00000) !important;
}

.game-inside-home-btn {
  width: fit-content !important;
  margin: 0 0 18px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

@media (max-width: 650px) {
  .game-inside-home-btn {
    width: 100% !important;
    margin-bottom: 16px !important;
  }
}

/* =========================================================
   FINAL LAYOUT FIX - Admin nav hidden, aligned cards, detail controls
   ========================================================= */


.games-grid {
  align-items: stretch !important;
}

.games-grid > .game-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  cursor: pointer !important;
}

.game-card-image-wrap {
  width: 100%;
  flex: 0 0 auto;
}

.game-card-image-wrap img,
.game-card > img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
}

.game-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 118px !important;
}

.game-card h3 {
  min-height: 52px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.game-card-genre {
  margin-top: auto !important;
  align-self: flex-start !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.game-detail-card {
  position: relative !important;
  align-items: stretch !important;
}

.game-detail-cover-wrap {
  position: relative !important;
}

.game-cover-back-btn {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 5 !important;
  width: auto !important;
  max-width: calc(100% - 24px) !important;
  padding: 8px 11px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  background: rgba(3, 9, 14, 0.82) !important;
  color: #ffffff !important;
  border: 1px solid rgba(69, 243, 255, 0.48) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

.game-cover-back-btn:hover {
  background: linear-gradient(135deg, var(--cyan), var(--green)) !important;
  color: #02070c !important;
}

.game-detail-info {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

.game-detail-actions {
  margin-top: auto !important;
  padding-top: 22px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  text-align: right !important;
}

.game-detail-actions .download-btn,
.game-detail-actions .game-status,
.game-detail-actions .download-warning {
  margin-left: auto !important;
  margin-top: 0 !important;
}

.game-detail-actions .download-warning {
  max-width: 320px !important;
  text-align: center !important;
}

.game-detail-admin-panel {
  display: none !important;
}

.game-admin-outside-panel {
  margin-top: 22px !important;
  padding: 20px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, var(--panel3), rgba(5, 12, 18, 0.96)) !important;
  border: 1px solid rgba(69, 243, 255, 0.26) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), 0 0 18px rgba(69, 243, 255, 0.06) !important;
}

.game-admin-outside-panel h3 {
  color: var(--cyan) !important;
  margin-bottom: 14px !important;
}

.game-detail-admin-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 14px !important;
}

.game-detail-edit-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 760px) {
  .game-detail-actions {
    justify-content: center !important;
    text-align: center !important;
  }

  .game-detail-actions .download-btn,
  .game-detail-actions .game-status,
  .game-detail-actions .download-warning {
    margin-left: 0 !important;
  }

  .game-cover-back-btn {
    font-size: 11px !important;
    padding: 7px 10px !important;
  }

  .game-card-body {
    min-height: 104px !important;
  }
}

/* =========================================================
   FINAL AUTH / NAV FIX - Admin butonu + iç sayfa ana sayfa butonları
   ========================================================= */
#adminNavBtn,
#rolesNavBtn {
  visibility: visible;
  pointer-events: auto;
}

.section-page-container {
  position: relative;
  padding-top: 10px;
}

.section-home-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 0 18px 0 !important;
  padding: 9px 13px !important;
  border-radius: 999px !important;
  background: rgba(3, 9, 14, 0.82) !important;
  color: #ffffff !important;
  border: 1px solid rgba(69, 243, 255, 0.48) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30) !important;
}

.section-home-btn:hover {
  background: linear-gradient(135deg, var(--cyan), var(--green)) !important;
  color: #02070c !important;
}

.forgot-link-btn {
  background: none !important;
  color: var(--cyan) !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  align-self: center !important;
}

.forgot-link-btn::after {
  display: none !important;
}

.forgot-intro {
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 16px;
}

.forgot-password-form,
.forgot-code-area {
  display: grid;
  gap: 12px;
}

.forgot-code-area {
  margin-top: 4px;
}

.forgot-password-form input {
  width: 100%;
}

.forgot-password-form small {
  color: var(--muted);
  line-height: 1.45;
}


/* =========================================================
   FINAL NAV + SORT FIX
   Üstteki Ana Sayfa butonu kaldırıldı; iç sayfa butonları korunur.
   ========================================================= */
#homeNavBtn {
  display: none !important;
}


/* =========================================================
   OYUNA ÖZEL YORUM PANELİ
   ========================================================= */
.game-comments-section {
  margin: 26px 0 0;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--panel3), rgba(5, 12, 18, 0.96)) !important;
  border: 1px solid rgba(69, 243, 255, 0.24) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(69, 243, 255, 0.08) !important;
}

.game-comments-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.game-comments-head h2 {
  margin: 6px 0 0;
  color: #ffffff;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.15;
}

.game-comments-section #gameCommentFormContainer {
  margin-bottom: 18px;
}

.game-comments-section .comment-form-card,
.game-comments-section .comment-login-card,
.game-comments-section .comment-notice,
.game-comments-section .empty-comments,
.game-comments-section .comments-loading,
.game-comments-section .comment-card {
  background: linear-gradient(180deg, rgba(10, 28, 36, 0.96), rgba(5, 12, 18, 0.96)) !important;
}

.game-comment-form-card textarea {
  min-height: 95px;
}

@media (max-width: 700px) {
  .game-comments-section {
    padding: 16px;
    border-radius: 18px;
  }

  .game-comments-head {
    flex-direction: column;
  }
}


/* =========================================================
   ADMIN ÖZEL MAVİ / KIRMIZI TEMA + OYUN KARTI DAHA FAZLA
   ========================================================= */
#adminSection .section-page-container,
#adminPanel,
#rolesSection .section-page-container,
#rolePanel,
.support-admin-panel {
  background:
    radial-gradient(circle at top left, rgba(52, 152, 219, 0.26), transparent 34%),
    radial-gradient(circle at top right, rgba(231, 76, 60, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(6, 18, 32, 0.98), rgba(42, 8, 16, 0.94)) !important;
  border: 1px solid rgba(52, 152, 219, 0.46) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.36),
    0 0 24px rgba(52, 152, 219, 0.16),
    inset 0 0 26px rgba(231, 76, 60, 0.06) !important;
}

#adminPanel h2,
#rolePanel h2,
.support-admin-head h2,
#adminSection h2,
#rolesSection h2 {
  color: #7cc8ff !important;
  text-shadow:
    0 0 14px rgba(52, 152, 219, 0.45),
    0 0 18px rgba(231, 76, 60, 0.22) !important;
}

#adminPanel p,
#rolePanel p,
.support-admin-head p {
  color: #ffd6d6 !important;
}

#adminPanel input,
#adminPanel textarea,
#adminPanel select,
#rolePanel input,
#rolePanel textarea,
#rolePanel select,
.support-admin-panel input,
.support-admin-panel textarea,
.support-admin-panel select {
  background: rgba(4, 12, 24, 0.86) !important;
  border-color: rgba(124, 200, 255, 0.46) !important;
}

#adminPanel button,
#rolePanel button,
.support-admin-panel button {
  background: linear-gradient(135deg, #1d75bd, #cf2f3d) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#adminPanel button:hover,
#rolePanel button:hover,
.support-admin-panel button:hover {
  background: linear-gradient(135deg, #4db8ff, #ff4d5e) !important;
  color: #050b12 !important;
  box-shadow:
    0 0 20px rgba(77, 184, 255, 0.28),
    0 0 18px rgba(255, 77, 94, 0.18) !important;
}

.section-home-btn {
  background: linear-gradient(135deg, rgba(29, 117, 189, 0.92), rgba(207, 47, 61, 0.88)) !important;
  border-color: rgba(124, 200, 255, 0.58) !important;
}

.games-show-more-container {
  width: min(1180px, 92%);
  margin: 26px auto 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.show-more-games-btn {
  min-width: min(320px, 92vw);
  padding: 13px 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(69, 243, 255, 0.92), rgba(32, 255, 107, 0.88)) !important;
  color: #02070c !important;
  font-weight: 950 !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.30),
    0 0 22px rgba(69, 243, 255, 0.22) !important;
}

.show-more-games-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(2, 7, 12, 0.14);
}

.show-more-games-info {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.show-more-games-info.all-visible {
  color: var(--cyan);
}


/* =========================================================
   ADMIN NAV BUTTONS + ROLE MANAGEMENT BAN/PAGING
   ========================================================= */
#adminNavBtn,
#rolesNavBtn,
.admin-nav-special {
  background:
    linear-gradient(135deg, rgba(231, 76, 60, 0.98), rgba(52, 152, 219, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  box-shadow:
    0 0 18px rgba(52, 152, 219, 0.26),
    0 0 16px rgba(231, 76, 60, 0.20) !important;
}

#adminNavBtn:hover,
#rolesNavBtn:hover,
.admin-nav-special:hover {
  background:
    linear-gradient(135deg, #ff3b3b, #45f3ff) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow:
    0 0 24px rgba(69, 243, 255, 0.42),
    0 0 24px rgba(231, 76, 60, 0.32) !important;
}

.role-admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(231, 76, 60, 0.26), transparent 34%),
    radial-gradient(circle at top right, rgba(52, 152, 219, 0.25), transparent 34%),
    linear-gradient(135deg, rgba(34, 11, 18, 0.94), rgba(8, 28, 44, 0.94));
  border: 1px solid rgba(69, 243, 255, 0.22);
  margin-bottom: 16px;
}

.role-admin-head h2 {
  margin-bottom: 8px !important;
}

.role-admin-head p {
  color: #d6e7ee !important;
  line-height: 1.55;
}

.role-filter-box {
  display: grid;
  gap: 8px;
  min-width: 220px;
}

.role-filter-box label {
  color: #bfefff;
  font-weight: 900;
  font-size: 13px;
}

.role-stats-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.role-stats-row span {
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.56), rgba(52, 152, 219, 0.56));
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.role-users-list {
  display: grid;
  gap: 12px;
}

.role-user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(16, 36, 54, 0.94), rgba(38, 12, 22, 0.90));
  border: 1px solid rgba(69, 243, 255, 0.20);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

.role-user-card.is-active {
  border-color: rgba(32, 255, 107, 0.82);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(32, 255, 107, 0.18),
    0 0 18px rgba(32, 255, 107, 0.16);
}

.role-user-card.is-inactive {
  border-color: rgba(231, 76, 60, 0.82);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(231, 76, 60, 0.16),
    0 0 18px rgba(231, 76, 60, 0.14);
}

.role-user-card.is-active .role-user-avatar,
.role-user-card.is-active .role-user-avatar-fallback {
  border-color: rgba(32, 255, 107, 0.95);
  box-shadow: 0 0 14px rgba(32, 255, 107, 0.28);
}

.role-user-card.is-inactive .role-user-avatar,
.role-user-card.is-inactive .role-user-avatar-fallback,
.role-user-card.is-banned .role-user-avatar,
.role-user-card.is-banned .role-user-avatar-fallback {
  border-color: rgba(231, 76, 60, 0.95);
  box-shadow: 0 0 14px rgba(231, 76, 60, 0.24);
}

.role-user-card.is-banned {
  background:
    linear-gradient(135deg, rgba(80, 8, 8, 0.96), rgba(18, 18, 22, 0.96));
  border-color: rgba(231, 76, 60, 0.54);
}

.role-user-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.role-user-left strong {
  color: #fff;
  display: block;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.role-user-left p {
  color: #abcbd2 !important;
  margin: 0 0 7px !important;
  overflow-wrap: anywhere;
}

.role-user-avatar,
.role-user-avatar-fallback {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex: 0 0 54px;
  border: 2px solid rgba(69, 243, 255, 0.62);
}

.role-user-avatar {
  object-fit: cover;
}

.role-user-avatar-fallback {
  display: grid;
  place-items: center;
  font-weight: 950;
  color: #031017;
  background: linear-gradient(135deg, #45f3ff, #e74c3c);
}

.role-user-badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  color: #fff;
  background: rgba(52, 152, 219, 0.65);
}

.role-user-badge.admin { background: #e74c3c; }
.role-user-badge.operator { background: #3498db; }
.role-user-badge.supporter { background: #5865F2; }
.role-user-badge.user { background: #1f8f4d; }
.role-user-badge.banned { background: #111; color: #ff7878; border: 1px solid rgba(231,76,60,.55); }

.role-activity-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.role-activity-badge.active {
  color: #04130a;
  background: linear-gradient(135deg, #20ff6b, #92ffba);
}

.role-activity-badge.inactive {
  color: #fff;
  background: linear-gradient(135deg, #e74c3c, #ff7675);
}

.role-user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.role-user-actions select {
  min-width: 160px;
}

.role-ban-btn,
.role-unban-btn {
  white-space: nowrap;
}

.role-ban-btn {
  background: linear-gradient(135deg, #a61111, #e74c3c) !important;
  color: #fff !important;
}

.role-unban-btn {
  background: linear-gradient(135deg, #0f66a8, #45f3ff) !important;
  color: #021018 !important;
}

.role-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.role-pagination button {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(8, 20, 32, 0.98) !important;
  border: 1px solid rgba(69, 243, 255, 0.28) !important;
  color: #fff !important;
}

.role-pagination button.active {
  background: linear-gradient(135deg, #e74c3c, #3498db) !important;
  box-shadow: 0 0 18px rgba(69, 243, 255, 0.28);
}

.role-admin-empty {
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  background: rgba(8, 18, 28, 0.72);
  border: 1px solid rgba(69, 243, 255, 0.18);
}

@media (max-width: 720px) {
  .role-user-card,
  .role-admin-head {
    align-items: stretch;
    flex-direction: column;
  }

  .role-user-actions {
    justify-content: stretch;
  }

  .role-user-actions select,
  .role-user-actions button,
  .role-filter-box {
    width: 100%;
  }
}


/* =========================================================
   FINAL OPTIMIZATION + SEO/PERFORMANCE POLISH v10.0
   ========================================================= */
.ad-banner.lazy-ad {
  display:flex;
  align-items:center;
  justify-content:center;
  contain:content;
}

.ad-placeholder {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:min(728px, 92vw);
  min-height:90px;
  border:1px dashed rgba(69,243,255,.22);
  border-radius:14px;
  color:rgba(232,249,255,.52);
  background:rgba(255,255,255,.025);
  font-size:13px;
}

.game-card,
.comment-card,
.customize-user-card,
.admin-panel-shell,
.section-page-container,
.game-detail-card {
  content-visibility:auto;
  contain-intrinsic-size:1px 420px;
}

.game-card img,
.game-detail-cover,
.comment-avatar-img,
.nav-avatar {
  height:auto;
  image-rendering:auto;
}

#gamesGrid {
  contain:layout paint;
}

#commentsContainer,
#gameCommentsContainer {
  contain:layout paint;
}

.comment-card[data-comment-theme="cyan"], .comment-card.comment-theme-cyan,
.comment-card[data-comment-theme="blue"], .comment-card.comment-theme-blue,
.comment-card[data-comment-theme="green"], .comment-card.comment-theme-green,
.comment-card[data-comment-theme="gold"], .comment-card.comment-theme-gold,
.comment-card[data-comment-theme="orange"], .comment-card.comment-theme-orange,
.comment-card[data-comment-theme="red"], .comment-card.comment-theme-red,
.comment-card[data-comment-theme="purple"], .comment-card.comment-theme-purple,
.comment-card[data-comment-theme="pink"], .comment-card.comment-theme-pink {
  border-width:1px !important;
  border-style:solid !important;
}

.comment-card[data-comment-theme="cyan"], .comment-card.comment-theme-cyan { border-color:rgba(69,243,255,.58)!important; }
.comment-card[data-comment-theme="blue"], .comment-card.comment-theme-blue { border-color:rgba(45,140,255,.58)!important; }
.comment-card[data-comment-theme="green"], .comment-card.comment-theme-green { border-color:rgba(52,211,153,.58)!important; }
.comment-card[data-comment-theme="gold"], .comment-card.comment-theme-gold { border-color:rgba(255,209,102,.64)!important; }
.comment-card[data-comment-theme="orange"], .comment-card.comment-theme-orange { border-color:rgba(255,159,28,.62)!important; }
.comment-card[data-comment-theme="red"], .comment-card.comment-theme-red { border-color:rgba(255,77,77,.62)!important; }
.comment-card[data-comment-theme="purple"], .comment-card.comment-theme-purple { border-color:rgba(155,92,255,.62)!important; }
.comment-card[data-comment-theme="pink"], .comment-card.comment-theme-pink { border-color:rgba(255,110,199,.62)!important; }

@media (max-width: 768px) {
  .ad-banner.lazy-ad,
  .desktop-ad {
    display:none !important;
  }

  .game-card,
  .comment-card,
  .customize-user-card,
  .admin-panel-shell,
  .section-page-container,
  .game-detail-card {
    contain-intrinsic-size:1px 360px;
  }
}

/* v12.0 yorum avatar yuvarlak güvenlik katmanı */
.comment-card > .comment-avatar-wrap,
.comment-card > .comment-avatar-wrap .comment-avatar-img,
.comment-card > .comment-avatar-wrap .comment-avatar-letter {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
}


/* =========================================================
   v14 yorum avatar/çerçeve son sabitleme
   ========================================================= */
#commentsContainer .comment-card[data-user-id] > .comment-avatar-wrap,
#gameCommentsContainer .comment-card[data-user-id] > .comment-avatar-wrap {
  width:52px !important; height:52px !important; min-width:52px !important; min-height:52px !important;
  max-width:52px !important; max-height:52px !important; flex:0 0 52px !important;
  border-radius:50% !important; overflow:visible !important; position:relative !important; padding:0 !important;
  display:grid !important; place-items:center !important; background:transparent !important;
}
#commentsContainer .comment-avatar-wrap .comment-avatar-img,
#commentsContainer .comment-avatar-wrap .comment-avatar-letter,
#gameCommentsContainer .comment-avatar-wrap .comment-avatar-img,
#gameCommentsContainer .comment-avatar-wrap .comment-avatar-letter {
  width:52px !important; height:52px !important; min-width:52px !important; min-height:52px !important;
  border-radius:50% !important; aspect-ratio:1/1 !important; overflow:hidden !important; object-fit:cover !important;
  position:absolute !important; inset:0 !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important;
}
#commentsContainer .comment-avatar-wrap .comment-avatar-letter,
#gameCommentsContainer .comment-avatar-wrap .comment-avatar-letter {
  display:flex !important; align-items:center !important; justify-content:center !important;
  line-height:1 !important; text-align:center !important; font-weight:900 !important;
}
#commentsContainer .comment-avatar-wrap.xbox-author-frame-active,
#commentsContainer .comment-avatar-wrap.v14-frame-active,
#gameCommentsContainer .comment-avatar-wrap.xbox-author-frame-active,
#gameCommentsContainer .comment-avatar-wrap.v14-frame-active {
  box-shadow:0 0 0 4px var(--avatar-frame-color,#45f3ff), 0 0 18px 4px var(--avatar-frame-glow,rgba(69,243,255,.62)) !important;
}
#commentsContainer .comment-avatar-wrap.xbox-author-frame-active::after,
#commentsContainer .comment-avatar-wrap.v14-frame-active::after,
#gameCommentsContainer .comment-avatar-wrap.xbox-author-frame-active::after,
#gameCommentsContainer .comment-avatar-wrap.v14-frame-active::after {
  content:"" !important; position:absolute !important; inset:-6px !important; border-radius:50% !important;
  border:1px solid var(--avatar-frame-glow,rgba(69,243,255,.42)) !important; pointer-events:none !important;
}


/* v15 yorum çerçeve ve oyun yorum yükleniyor temiz görünüm */
.comment-card[data-user-id] > .comment-avatar-wrap.v15-frame-active,
.comment-card[data-user-id] > .comment-avatar-wrap.xbox-author-frame-active {
  box-shadow: 0 0 0 4px var(--avatar-frame-color, #45f3ff), 0 0 18px 4px var(--avatar-frame-glow, rgba(69,243,255,.66)) !important;
}
.comment-card[data-user-id] > .comment-avatar-wrap .comment-avatar-letter {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
#gameCommentsContainer .comments-loading.is-hidden,
#gameCommentsContainer .comments-loading:empty {
  display: none !important;
}


/* v16 yorum profil çerçevesi son CSS güvenliği */
html body .comment-card[data-user-id] { overflow: visible !important; contain: none !important; content-visibility: visible !important; }
html body .comment-card[data-user-id] > .comment-avatar-wrap.xbox-author-frame-active { outline:none !important; box-shadow:0 0 0 4px var(--avatar-frame-color,#45f3ff),0 0 14px 2px var(--avatar-frame-glow,rgba(69,243,255,.72)) !important; }
html body .comment-card[data-user-id] > .comment-avatar-wrap.xbox-author-frame-active::after { content:none !important; display:none !important; border:0 !important; box-shadow:none !important; }
html body .comment-card[data-user-id] > .comment-avatar-wrap .comment-avatar-letter { border-radius:50% !important; aspect-ratio:1/1 !important; }


/* =========================================================
   v17 yorum çerçevesi tek halka güvenliği
   - Eski v14/v15/v16 ::after dış halkasını kapatır.
   - Yorum temasını inline JS + data/class birlikte kullanır.
   ========================================================= */
html body .comment-card[data-user-id] > .comment-avatar-wrap::before,
html body .comment-card[data-user-id] > .comment-avatar-wrap::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .comment-card[data-user-id] > .comment-avatar-wrap .comment-avatar-img,
html body .comment-card[data-user-id] > .comment-avatar-wrap .comment-avatar-letter {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html body .comment-card[data-user-id] > .comment-avatar-wrap.xbox-author-frame-active,
html body .comment-card[data-user-id] > .comment-avatar-wrap.v17-frame-active {
  outline: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: 0 0 0 4px var(--avatar-frame-color, #45f3ff), 0 0 16px 3px var(--avatar-frame-glow, rgba(69,243,255,.72)) !important;
}


/* =========================================================
   v18.0 - Arama kartı, CSP/performans ve form uyarısı düzeltmeleri
   ========================================================= */
.games-grid.search-active,
#gamesGrid.search-active {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 20px !important;
}

.game-search-match {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-bottom: 8px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #02070c !important;
  background: linear-gradient(135deg, var(--cyan), var(--green)) !important;
  box-shadow: 0 0 12px rgba(69, 243, 255, 0.20) !important;
}

.game-card-body {
  gap: 6px !important;
}

.game-card h3 {
  line-height: 1.22 !important;
  word-break: break-word !important;
}

.game-card-genre {
  max-width: 100% !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(69, 243, 255, 0.22) !important;
  background: rgba(69, 243, 255, 0.06) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ad-placeholder {
  width: min(728px, 92vw) !important;
}

@media (max-width: 768px) {
  .games-grid.search-active,
  #gamesGrid.search-active {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .game-card h3 {
    font-size: 16px !important;
    min-height: 42px !important;
  }

  .game-card-body {
    min-height: 104px !important;
  }
}

@media (max-width: 420px) {
  .games-grid.search-active,
  #gamesGrid.search-active {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   v19 Admin dış tasarım yükleme + hızlı harici çerçeve
   ========================================================= */
.customize-option-btn.has-media {
  min-height: 72px;
  align-items: center;
}

.customize-media-preview {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  overflow: visible;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(69,243,255,.22);
  flex: 0 0 44px;
}

.customize-media-preview img,
.customize-media-preview video {
  width: 54px;
  height: 54px;
  object-fit: contain;
  pointer-events: none;
}

.has-external-avatar-frame {
  position: relative !important;
  overflow: visible !important;
}

.xbox-external-avatar-frame {
  position: absolute !important;
  inset: -10px !important;
  width: calc(100% + 20px) !important;
  height: calc(100% + 20px) !important;
  object-fit: contain !important;
  pointer-events: none !important;
  z-index: 6 !important;
  border-radius: 50% !important;
}

.admin-external-design-manager {
  margin-top: 24px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 213, 79, .32);
  background: linear-gradient(135deg, rgba(255,213,79,.10), rgba(69,243,255,.08));
  box-shadow: 0 18px 45px rgba(0,0,0,.24);
}

.admin-external-design-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.admin-external-design-head i {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,213,79,.16);
  color: var(--yellow);
  border: 1px solid rgba(255,213,79,.30);
}

.admin-external-design-head h3,
.admin-external-design-card h4 {
  margin: 0 0 6px;
  color: #fff;
}

.admin-external-design-head p {
  margin: 0;
  color: var(--muted);
}

.admin-external-design-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-external-design-card {
  padding: 15px;
  border-radius: 16px;
  border: 1px solid rgba(69,243,255,.18);
  background: rgba(2, 7, 12, .62);
  display: grid;
  gap: 10px;
}

.admin-external-design-card input,
.admin-external-design-card select {
  width: 100%;
  border: 1px solid rgba(69,243,255,.22);
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  color: #fff;
  padding: 11px 12px;
}

.admin-design-added-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.admin-design-added-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.admin-design-added-item small,
.admin-design-empty {
  color: var(--muted);
  font-size: 12px;
}

.comment-card.xbox-external-comment-theme {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.comment-card.xbox-external-comment-theme > :not(.xbox-external-comment-overlay) {
  position: relative;
  z-index: 1;
}

.xbox-external-comment-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 0 !important;
  opacity: 0;
  filter: saturate(1.12) contrast(1.04);
  mix-blend-mode: screen;
  animation: xboxCommentDesignOverlayEvery10s 10s ease-in-out infinite;
}

@keyframes xboxCommentDesignOverlayEvery10s {
  0%, 8%, 100% { opacity: 0; transform: scale(1.012); }
  14%, 42% { opacity: .20; transform: scale(1); }
  56% { opacity: 0; transform: scale(1.012); }
}

.admin-design-helper {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin-top: -3px;
}

@media (max-width: 820px) {
  .admin-external-design-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   v23 FIX - Oyun türü rengi + şeffaf WEBM overlay
   ========================================================= */
.game-card .game-card-genre,
.game-card-genre {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-top: auto !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  color: #02070c !important;
  background: linear-gradient(135deg, #45f3ff, #20ff6b) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 0 16px rgba(69,243,255,.24) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.xbox-external-comment-overlay,
.comment-card[data-user-id] > .xbox-external-comment-overlay {
  display: block !important;
  background: transparent !important;
}

img.xbox-external-avatar-frame {
  object-fit: contain !important;
}

img.xbox-external-comment-overlay {
  object-fit: cover !important;
}


/* =========================================================
   v25 FIX - Şeffaf WEBM profil çerçevesi + yorum video overlay
   ========================================================= */
video.xbox-external-avatar-frame,
.xbox-external-avatar-frame video,
.customize-media-preview video {
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
}

video.xbox-external-comment-overlay,
.comment-card[data-user-id] > video.xbox-external-comment-overlay {
  display: block !important;
  object-fit: cover !important;
  background: transparent !important;
}

.admin-external-design-card input[type="file"]::file-selector-button {
  cursor: pointer;
}


/* =========================================================
   v27 ADMIN CUSTOM WEBM FIX
   - Siyah arka planlı WEBM çerçevelerde siyah kısmı görünmez yapar.
   - Özel yorum tasarımı overlay'ini daha belirgin gösterir.
   ========================================================= */
.xbox-external-avatar-frame,
.comment-avatar-wrap .xbox-external-avatar-frame,
.nav-avatar .xbox-external-avatar-frame,
.profile-photo-display-wrap .xbox-external-avatar-frame {
  background: transparent !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.18) contrast(1.08) brightness(1.04) !important;
}

.comment-card[data-user-id].xbox-external-comment-theme {
  border-color: rgba(69,243,255,.78) !important;
}

.comment-card[data-user-id] > .xbox-external-comment-overlay,
.xbox-external-comment-overlay {
  mix-blend-mode: screen !important;
  background: transparent !important;
}

@keyframes xboxCommentDesignOverlayEvery10s {
  0%, 8%, 100% { opacity: 0; transform: scale(1.012); }
  14%, 42% { opacity: .38; transform: scale(1); }
  56% { opacity: 0; transform: scale(1.012); }
}


/* =========================================================
   v29 Oyun hazırlayan admin + yama ilerleme tasarımı
   ========================================================= */
.admin-form-grid select,
.admin-form-grid input[type="number"] {
  width: 100%;
}

.game-card-publish-info {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.game-prepared-by {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  color: #d8f7f3 !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.game-prepared-by i {
  color: var(--cyan);
  flex: 0 0 auto;
}

.game-progress {
  width: 100%;
  padding: 10px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(7, 20, 28, 0.96), rgba(4, 12, 18, 0.96));
  border: 1px solid rgba(69, 243, 255, 0.24);
  box-shadow: inset 0 0 18px rgba(69, 243, 255, 0.04);
}

.game-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: #dffcff;
  font-size: 12px;
  font-weight: 850;
}

.game-progress-head strong {
  color: var(--yellow);
  font-size: 13px;
}

.game-progress-track {
  position: relative;
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.game-progress-track span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green2), var(--green), var(--cyan));
  box-shadow: 0 0 14px rgba(69, 243, 255, 0.45);
  transition: width 0.35s ease;
}

.game-card-action {
  margin-top: auto;
  padding-top: 10px;
}

.game-card-action .download-btn,
.game-card-action .game-status,
.game-card-action .download-warning {
  width: 100%;
  margin: 0 !important;
  text-align: center;
}

.game-card-action .download-warning {
  font-size: 11px;
  line-height: 1.35;
}

.game-detail-publish-info {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.game-detail-publish-info .game-prepared-by {
  font-size: 14px;
}

.game-detail-publish-info .game-progress {
  max-width: 520px;
}

.game-detail-edit-form input:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

@media (max-width: 650px) {
  .game-prepared-by {
    font-size: 11px;
  }

  .game-progress {
    padding: 9px;
  }
}


/* =========================================================
   v29.5 - Kart DIŞINDA oluşan eski/duble durum alanlarını kaldır
   .game-card ve .game-detail-card içindeki mevcut görünüm aynen korunur.
   ========================================================= */
#gamesGrid > .game-card-publish-info,
#gamesGrid > .game-card-action,
#gamesGrid > .game-progress,
#gamesGrid > .game-status,
#gamesGrid > .download-btn,
#gamesGrid > .download-warning,
#gamesGrid > .game-file-contents-btn,
#gamesGrid > :not(.game-card) .game-card-publish-info,
#gamesGrid > :not(.game-card) .game-card-action,
#gamesGrid > :not(.game-card) .game-progress,
#gamesGrid > :not(.game-card) .game-status,
#gamesGrid > :not(.game-card) .download-btn,
#gamesGrid > :not(.game-card) .download-warning,
#gamesGrid > :not(.game-card) .game-file-contents-btn,
#gameDetailContainer > .game-detail-publish-info,
#gameDetailContainer > .game-detail-actions,
#gameDetailContainer > .game-progress,
#gameDetailContainer > .game-status,
#gameDetailContainer > .download-btn,
#gameDetailContainer > .download-warning {
  display: none !important;
}


/* =========================================================
   v29.5 - Ana sayfa kartları sade görünüm
   Ana sayfada yalnızca kapak, oyun adı ve tür gösterilir.
   Oyun detay sayfasındaki indirme/hazırlanma/ilerleme alanlarına dokunulmaz.
   ========================================================= */
#gamesGrid .game-card .game-card-publish-info,
#gamesGrid .game-card .game-card-action,
#gamesGrid .game-card .game-prepared-by,
#gamesGrid .game-card .game-progress,
#gamesGrid .game-card .game-status,
#gamesGrid .game-card .download-btn,
#gamesGrid .game-card .download-warning,
#gamesGrid .game-card .game-search-match {
  display: none !important;
}

#gamesGrid .game-card-body {
  min-height: 118px !important;
}

/* =========================================================
   v30.0 - Oyun kartı kapak görselleri sağlam görünüm
   Yalnızca ana sayfadaki kart kapaklarını etkiler.
   ========================================================= */
#gamesGrid .game-card-image-wrap {
  width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  border-radius: 16px !important;
  background: #08121a !important;
}

#gamesGrid .game-card-image-wrap > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  border-radius: 16px !important;
  transform: none !important;
}

#gamesGrid .game-card:hover .game-card-image-wrap > img {
  transform: none !important;
}


/* =========================================================
   v30.1 - OYUN DETAY KARTI TAM GÖRÜNÜM DÜZELTMESİ
   Yalnızca oyun detayındaki kapak/kart taşmasını düzeltir.
   Ana sayfa kartlarına ve diğer tasarımlara dokunmaz.
   ========================================================= */
#gameDetailContainer,
#gameDetailContainer * {
  box-sizing: border-box;
}

#gameDetailContainer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

#gameDetailContainer .game-detail-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr) !important;
  align-items: start !important;
  overflow: hidden !important;
}

#gameDetailContainer .game-detail-cover-wrap {
  width: 100% !important;
  max-width: 340px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  overflow: hidden !important;
  background: #08121a !important;
}

#gameDetailContainer .game-detail-cover {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  margin: 0 !important;
  transform: none !important;
}

#gameDetailContainer .game-detail-info {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
  #gameDetailContainer .game-detail-card {
    grid-template-columns: 1fr !important;
  }

  #gameDetailContainer .game-detail-cover-wrap {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  #gameDetailContainer .game-detail-info {
    text-align: left !important;
  }
}

@media (max-width: 560px) {
  #gameDetailContainer .game-detail-card {
    padding: 14px !important;
    gap: 18px !important;
    border-radius: 18px !important;
  }

  #gameDetailContainer .game-detail-cover-wrap {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
  }
}

/* =========================================================
   v30.2 - ADMIN STICKER + YORUM STICKER SİSTEMİ
   ========================================================= */

.comment-send-actions,
.reply-send-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.sticker-picker-shell {
  position: relative;
  overflow: visible !important;
}

.sticker-picker-toggle {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  font-size: 22px;
  line-height: 1;
  background: linear-gradient(135deg, rgba(69, 243, 255, 0.18), rgba(32, 255, 107, 0.18));
  border: 1px solid rgba(69, 243, 255, 0.38);
  color: #fff;
  box-shadow: none;
}

.sticker-picker-toggle.small {
  width: 40px;
  min-width: 40px;
  height: 40px;
  font-size: 20px;
}

.sticker-picker-toggle:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(69, 243, 255, 0.34), rgba(32, 255, 107, 0.32));
  color: #fff;
}

.sticker-picker-panel[hidden] {
  display: none !important;
}

.sticker-picker-panel {
  position: absolute;
  z-index: 80;
  right: 12px;
  bottom: 64px;
  width: min(390px, calc(100vw - 48px));
  max-height: 320px;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  border: 1px solid rgba(69, 243, 255, 0.34);
  border-radius: 16px;
  background: rgba(3, 14, 21, 0.98);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 24px rgba(69, 243, 255, 0.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.reply-sticker-picker {
  right: 0;
  bottom: 52px;
  width: min(350px, calc(100vw - 64px));
}

.sticker-option-btn {
  min-width: 0;
  min-height: 92px;
  padding: 7px 5px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 12px;
  border: 1px solid rgba(69, 243, 255, 0.20);
  background: rgba(255, 255, 255, 0.045);
  color: #dffcff;
  box-shadow: none;
}

.sticker-option-btn img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}

.sticker-option-btn span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.sticker-picker-empty {
  grid-column: 1 / -1;
  padding: 18px 10px;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}

.comment-text-with-stickers {
  white-space: normal;
  overflow-wrap: anywhere;
}

.comment-inline-sticker {
  display: inline-block !important;
  width: 104px !important;
  height: 104px !important;
  max-width: 104px !important;
  object-fit: contain !important;
  vertical-align: middle;
  margin: 5px 4px;
  border-radius: 12px;
  background: transparent !important;
  box-shadow: none !important;
}

.admin-sticker-manager {
  display: grid;
  gap: 20px;
}

.admin-sticker-head p {
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.55;
}

.admin-sticker-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(230px, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(69, 243, 255, 0.24);
  border-radius: 15px;
  background: rgba(4, 18, 25, 0.78);
}

.admin-sticker-file-field,
.admin-sticker-code-field {
  display: grid;
  gap: 8px;
  color: #fff;
  font-weight: 800;
}

.admin-sticker-file-field > span,
.admin-sticker-code-field > span {
  font-size: 13px;
  color: #bfeff2;
}

.admin-sticker-file-field input {
  width: 100%;
}

.sticker-code-input-wrap {
  min-height: 45px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(69, 243, 255, 0.30);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
}

.sticker-code-input-wrap strong {
  color: var(--cyan);
  font-size: 18px;
}

.sticker-code-input-wrap input {
  width: 100%;
  min-height: 41px;
  padding: 8px 3px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.admin-sticker-list-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 5px;
}

.admin-sticker-list-title small {
  color: var(--muted);
}

.admin-sticker-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-sticker-card {
  min-width: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(69, 243, 255, 0.22);
  border-radius: 14px;
  background: rgba(5, 20, 27, 0.88);
}

.admin-sticker-card > img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
}

.admin-sticker-card-info {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.admin-sticker-card-info strong {
  color: var(--cyan);
  overflow-wrap: anywhere;
}

.admin-sticker-card-info small {
  color: var(--muted);
  line-height: 1.35;
}

.admin-sticker-empty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed rgba(69, 243, 255, 0.26);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 800px) {
  .admin-sticker-form {
    grid-template-columns: 1fr;
  }

  .admin-sticker-list {
    grid-template-columns: 1fr;
  }

  .sticker-picker-panel {
    right: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .comment-form-footer {
    align-items: flex-end;
  }

  .comment-send-actions {
    width: 100%;
  }

  .comment-send-actions #commentSendBtn,
  .comment-send-actions #gameCommentSendBtn {
    flex: 1;
  }

  .sticker-picker-panel {
    width: min(330px, calc(100vw - 28px));
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-sticker-card {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .admin-sticker-card > img {
    width: 64px;
    height: 64px;
  }

  .admin-sticker-card .delete-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* =========================================================
   v30.3 - YORUM + STICKER AYNI AKIŞ VE SOL HİZA
   Metin ortada, sticker sağda kalma sorununu kesin olarak kapatır.
   ========================================================= */
html body #commentsContainer .comment-content,
html body #gameCommentsContainer .comment-content {
  min-width: 0 !important;
  width: 100% !important;
  text-align: left !important;
  align-items: stretch !important;
}

html body #commentsContainer .comment-text-with-stickers,
html body #gameCommentsContainer .comment-text-with-stickers {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html body #commentsContainer .comment-text-fragment,
html body #gameCommentsContainer .comment-text-fragment {
  display: inline !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  text-align: left !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html body #commentsContainer .comment-inline-sticker,
html body #gameCommentsContainer .comment-inline-sticker {
  position: static !important;
  inset: auto !important;
  float: none !important;
  clear: none !important;
  display: inline-block !important;
  flex: 0 0 96px !important;
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
  max-width: 96px !important;
  max-height: 96px !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  vertical-align: middle !important;
  transform: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #commentsContainer .comment-header,
html body #gameCommentsContainer .comment-header,
html body #commentsContainer .comment-actions,
html body #gameCommentsContainer .comment-actions {
  justify-content: flex-start !important;
  text-align: left !important;
}

@media (max-width: 640px) {
  html body #commentsContainer .comment-inline-sticker,
  html body #gameCommentsContainer .comment-inline-sticker {
    flex-basis: 76px !important;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
  }
}


/* =========================================================
   v31.0 - YORUM METNİ ÜSTTE, STICKERLAR DAİMA ALTTA
   ========================================================= */
html body #commentsContainer .comment-text-with-stickers,
html body #gameCommentsContainer .comment-text-with-stickers {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 8px 0 12px !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
}

html body #commentsContainer .comment-text-block,
html body #gameCommentsContainer .comment-text-block {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  color: inherit !important;
  text-align: left !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.55 !important;
}

html body #commentsContainer .comment-sticker-row,
html body #gameCommentsContainer .comment-sticker-row {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 10px !important;
  text-align: left !important;
}

html body #commentsContainer .comment-inline-sticker,
html body #gameCommentsContainer .comment-inline-sticker {
  position: static !important;
  inset: auto !important;
  float: none !important;
  clear: both !important;
  display: block !important;
  flex: 0 0 96px !important;
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
  max-width: 96px !important;
  max-height: 96px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  vertical-align: top !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #commentsContainer .comment-gif-sticker,
html body #gameCommentsContainer .comment-gif-sticker {
  image-rendering: auto !important;
}

/* =========================================================
   v31.0 - STICKER SEÇİCİ GIF ROZETİ
   ========================================================= */
.sticker-option-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}

.sticker-gif-badge,
.admin-sticker-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 20px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .04em;
}

.sticker-gif-badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  color: #02070c;
  background: linear-gradient(135deg, #ffd54f, #45f3ff);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

.sticker-option-btn.member-gif-sticker {
  border-color: rgba(255, 213, 79, .56) !important;
  background:
    linear-gradient(180deg, rgba(255, 213, 79, .10), rgba(69, 243, 255, .06)) !important;
}

.admin-sticker-preview-wrap {
  position: relative;
  width: 76px;
  height: 76px;
}

.admin-sticker-preview-wrap > img {
  display: block;
  width: 76px !important;
  height: 76px !important;
  object-fit: contain !important;
  border-radius: 11px;
  background: rgba(255,255,255,.04);
}

.admin-sticker-type-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  color: #02070c;
  box-shadow: 0 5px 14px rgba(0,0,0,.34);
}

.admin-sticker-type-badge.gif {
  background: linear-gradient(135deg, #ffd54f, #45f3ff);
}

.admin-sticker-type-badge.image {
  background: linear-gradient(135deg, #45f3ff, #20ff6b);
}

.admin-gif-sticker-card {
  border-color: rgba(255, 213, 79, .38) !important;
}


@media (max-width: 640px) {
  html body #commentsContainer .comment-inline-sticker,
  html body #gameCommentsContainer .comment-inline-sticker {
    flex-basis: 76px !important;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
  }

  .admin-sticker-preview-wrap,
  .admin-sticker-preview-wrap > img {
    width: 64px !important;
    height: 64px !important;
  }
}


/* =========================================================
   v31.1 - ANDROID / iOS RESPONSIVE SON DÜZELTME
   ========================================================= */
:root {
  --xbox-vh: 1vh;
  --xbox-safe-top: env(safe-area-inset-top, 0px);
  --xbox-safe-right: env(safe-area-inset-right, 0px);
  --xbox-safe-bottom: env(safe-area-inset-bottom, 0px);
  --xbox-safe-left: env(safe-area-inset-left, 0px);
}

html.xbox-ios,
html.xbox-android,
html.xbox-touch {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-x: none;
}

html.xbox-ios body,
html.xbox-android body,
html.xbox-touch body {
  min-height: calc(var(--xbox-vh, 1vh) * 100);
  padding-left: var(--xbox-safe-left);
  padding-right: var(--xbox-safe-right);
  padding-bottom: var(--xbox-safe-bottom);
  overflow-x: hidden !important;
}

html.xbox-touch button,
html.xbox-touch a,
html.xbox-touch input,
html.xbox-touch select,
html.xbox-touch textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html.xbox-ios input,
html.xbox-ios select,
html.xbox-ios textarea {
  font-size: 16px !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .navbar {
    position: sticky !important;
    top: 0 !important;
    min-height: auto !important;
    padding:
      calc(8px + var(--xbox-safe-top))
      12px
      10px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .logo {
    max-width: min(64vw, 260px) !important;
  }

  .logo img {
    width: auto !important;
    height: 48px !important;
    max-width: 100% !important;
  }

  .nav-right,
  #authArea {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 2px 0 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav-right::-webkit-scrollbar,
  #authArea::-webkit-scrollbar {
    display: none;
  }

  .nav-right > *,
  #authArea > * {
    flex: 0 0 auto !important;
  }

  .container,
  .section-page-container,
  .admin-panel-shell,
  .customize-panel-shell {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #homeSection,
  #profileSection,
  #customizeSection,
  #adminSection,
  #rolesSection,
  #gameDetailSection {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #gamesGrid,
  .games-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #gamesGrid > .game-card,
  .games-grid > .game-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 15px !important;
    transform: none !important;
  }

  #gamesGrid .game-card-body {
    min-height: 96px !important;
    padding: 12px !important;
  }

  #gamesGrid .game-card h3 {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  #gamesGrid .game-card-genre {
    font-size: 12px !important;
  }

  #gameDetailContainer,
  #gameDetailContainer > *,
  .game-detail-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .game-detail-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  .game-detail-cover-wrap {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  .game-detail-cover {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  .game-detail-info,
  .game-detail-actions,
  .game-detail-publish-info,
  .game-detail-admin-actions,
  .game-detail-edit-form {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .game-detail-actions,
  .game-detail-admin-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .game-detail-actions button,
  .game-detail-actions a,
  .game-detail-admin-actions button {
    width: 100% !important;
    min-height: 44px !important;
  }

  html body #commentsContainer .comment-card,
  html body #gameCommentsContainer .comment-card,
  html body .comment-card[data-user-id] {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    overflow: visible !important;
  }

  html body #commentsContainer .comment-card.reply,
  html body #gameCommentsContainer .comment-card.reply {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    margin-left: 0 !important;
    padding: 10px !important;
  }

  html body #commentsContainer .comment-avatar-wrap,
  html body #gameCommentsContainer .comment-avatar-wrap {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }

  html body #commentsContainer .comment-card.reply .comment-avatar-wrap,
  html body #gameCommentsContainer .comment-card.reply .comment-avatar-wrap {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  html body #commentsContainer .comment-content,
  html body #gameCommentsContainer .comment-content {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body #commentsContainer .comment-header,
  html body #gameCommentsContainer .comment-header {
    gap: 5px !important;
    font-size: 13px !important;
  }

  html body #commentsContainer .comment-actions,
  html body #gameCommentsContainer .comment-actions {
    width: 100% !important;
    gap: 7px !important;
  }

  html body #commentsContainer .comment-actions button,
  html body #gameCommentsContainer .comment-actions button {
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  .comment-form-card,
  .game-comment-form-card,
  .reply-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .comment-form-card textarea,
  .game-comment-form-card textarea,
  .reply-form textarea,
  #commentInput,
  #gameCommentInput {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 108px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .comment-form-footer,
  .reply-send-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .comment-form-footer small {
    min-width: 0 !important;
    font-size: 11px !important;
  }

  .sticker-picker-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .sticker-picker-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(50vh, 360px) !important;
    padding: 8px !important;
    gap: 7px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sticker-option-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 78px !important;
    padding: 5px !important;
  }

  .sticker-option-btn img {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }

  html body #commentsContainer .comment-sticker-row,
  html body #gameCommentsContainer .comment-sticker-row {
    display: block !important;
    width: 100% !important;
  }

  html body #commentsContainer .comment-inline-sticker,
  html body #gameCommentsContainer .comment-inline-sticker {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
  }

  .admin-form-grid,
  .customize-grid,
  .profile-grid,
  .roles-grid,
  .admin-external-design-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-tabs {
    display: flex !important;
    width: 100% !important;
    gap: 7px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .admin-tabs::-webkit-scrollbar {
    display: none;
  }

  .admin-tab-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .admin-sticker-card,
  .role-user-card,
  .support-message-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  .modal,
  .modal-content,
  .auth-modal-content {
    max-width: calc(100vw - 20px) !important;
    max-height: calc((var(--xbox-vh, 1vh) * 100) - 24px - var(--xbox-safe-top) - var(--xbox-safe-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #customToast {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(12px + var(--xbox-safe-bottom)) !important;
    width: auto !important;
    max-width: none !important;
  }

  #supportButton,
  .support-float-button,
  .notification-float-button {
    bottom: calc(14px + var(--xbox-safe-bottom)) !important;
  }
}

@media (max-width: 520px) {
  #gamesGrid,
  .games-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #gamesGrid > .game-card,
  .games-grid > .game-card {
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .comment-form-footer,
  .reply-send-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .comment-form-footer button,
  .reply-send-actions button {
    width: 100% !important;
    min-height: 44px !important;
  }

  .sticker-picker-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  button:hover,
  .nav-btn:hover,
  .admin-btn:hover,
  #gamesGrid > .game-card:hover,
  .games-grid > .game-card:hover {
    transform: none !important;
  }

  #gamesGrid > .game-card:active,
  .games-grid > .game-card:active {
    transform: scale(.985) !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .navbar {
    position: relative !important;
  }

  .sticker-picker-panel {
    max-height: 58vh !important;
  }
}


/* Yeni sade oyun yorum sistemi */
#gameCommentsContainer .xbox-game-comment-v32 {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#gameCommentsContainer .xbox-game-comment-v32.reply {
  grid-template-columns: 46px minmax(0, 1fr) !important;
  margin-top: 10px !important;
}

#gameCommentsContainer .xbox-game-comment-v32 > .comment-content {
  min-width: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

#gameCommentsContainer .game-comment-list-v32 {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
}

#gameCommentsContainer .comment-text-with-stickers {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

#gameCommentsContainer .comment-text-block {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#gameCommentsContainer .comment-sticker-row {
  display: block !important;
  width: 100% !important;
  margin-top: 8px !important;
  text-align: left !important;
}

#gameCommentsContainer .reply-form,
#gameCommentsContainer .replies-box {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  #gameCommentsContainer .xbox-game-comment-v32 {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 11px !important;
  }

  #gameCommentsContainer .xbox-game-comment-v32.reply {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }
}


/* =========================================================
   v32.1 - ANA SAYFA OYUN KARTI PREMIUM GEÇİŞ ANİMASYONU
   Yavaş başlayan, akıcı hızlanan ve narin biçimde duran geçiş.
   ========================================================= */
#gamesGrid > .game-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transform-origin: 50% 58% !important;
  border-color: rgba(69, 243, 255, .24) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .24),
    0 0 0 rgba(69, 243, 255, 0) !important;
  transition:
    transform .72s cubic-bezier(.16, 1, .30, 1),
    border-color .62s ease,
    box-shadow .72s cubic-bezier(.16, 1, .30, 1),
    background-color .62s ease,
    filter .62s ease !important;
  backface-visibility: hidden !important;
  animation: xboxGameCardReveal .62s cubic-bezier(.16, 1, .30, 1) both;
}

#gamesGrid > .game-card:nth-child(2n) {
  animation-delay: .035s;
}

#gamesGrid > .game-card:nth-child(3n) {
  animation-delay: .07s;
}

#gamesGrid > .game-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(69, 243, 255, .17), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 42%) !important;
  transition: opacity .68s ease !important;
}

#gamesGrid > .game-card::after {
  content: "" !important;
  position: absolute !important;
  top: -48% !important;
  left: -72% !important;
  width: 34% !important;
  height: 196% !important;
  z-index: 3 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translate3d(-120%, 0, 0) rotate(18deg) !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .20),
    rgba(69, 243, 255, .11),
    transparent
  ) !important;
  transition:
    transform 1.05s cubic-bezier(.16, 1, .30, 1),
    opacity .38s ease !important;
}

#gamesGrid > .game-card > * {
  position: relative !important;
  z-index: 2 !important;
}

#gamesGrid > .game-card .game-card-image-wrap {
  overflow: hidden !important;
  transform: translateZ(0) !important;
}

#gamesGrid > .game-card .game-card-image-wrap > img {
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: brightness(1) saturate(1) contrast(1) !important;
  transition:
    transform .88s cubic-bezier(.16, 1, .30, 1),
    filter .72s ease !important;
  backface-visibility: hidden !important;
}

#gamesGrid > .game-card .game-card-body {
  transform: translate3d(0, 0, 0) !important;
  transition: transform .70s cubic-bezier(.16, 1, .30, 1) !important;
}

#gamesGrid > .game-card h3,
#gamesGrid > .game-card .game-card-genre {
  transition:
    color .55s ease,
    text-shadow .55s ease,
    box-shadow .55s ease,
    transform .62s cubic-bezier(.16, 1, .30, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
  #gamesGrid > .game-card:hover {
    transform: translate3d(0, -9px, 0) scale(1) !important;
    border-color: rgba(69, 243, 255, .66) !important;
    box-shadow:
      0 28px 62px rgba(0, 0, 0, .38),
      0 10px 28px rgba(0, 0, 0, .20),
      0 0 28px rgba(69, 243, 255, .14),
      0 0 10px rgba(32, 255, 107, .08) !important;
    filter: saturate(1.025) !important;
    z-index: 8 !important;
  }

  #gamesGrid > .game-card:hover::before {
    opacity: 1 !important;
  }

  #gamesGrid > .game-card:hover::after {
    opacity: .78 !important;
    transform: translate3d(560%, 0, 0) rotate(18deg) !important;
  }

  #gamesGrid > .game-card:hover .game-card-image-wrap > img {
    transform: translate3d(0, 0, 0) scale(1.055) !important;
    filter: brightness(1.065) saturate(1.07) contrast(1.025) !important;
  }

  #gamesGrid > .game-card:hover .game-card-body {
    transform: translate3d(0, -2px, 0) !important;
  }

  #gamesGrid > .game-card:hover h3 {
    color: #ffffff !important;
    text-shadow: 0 0 16px rgba(69, 243, 255, .18) !important;
  }

  #gamesGrid > .game-card:hover .game-card-genre {
    transform: translate3d(2px, 0, 0) !important;
    box-shadow: 0 7px 18px rgba(32, 255, 107, .16) !important;
  }
}

@keyframes xboxGameCardReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(1);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #gamesGrid > .game-card,
  #gamesGrid > .game-card::before,
  #gamesGrid > .game-card::after,
  #gamesGrid > .game-card .game-card-image-wrap > img,
  #gamesGrid > .game-card .game-card-body,
  #gamesGrid > .game-card h3,
  #gamesGrid > .game-card .game-card-genre {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

@media (hover: none), (pointer: coarse) {
  #gamesGrid > .game-card,
  #gamesGrid > .game-card:hover {
    transform: none !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24) !important;
  }

  #gamesGrid > .game-card::after {
    display: none !important;
  }

  #gamesGrid > .game-card:active {
    transform: none !important;
    transition-duration: .14s !important;
  }
}


/* =========================================================
   v32.2 - OYUN KARTINDA YALNIZCA FOTOĞRAF BÜYÜR
   Kartın dış ölçüsü değişmez. Işık, gölge, yükselme, başlık ve
   tür rozeti animasyonları korunur.
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  #gamesGrid > .game-card:hover {
    transform: translate3d(0, -9px, 0) scale(1) !important;
  }

  #gamesGrid > .game-card:hover .game-card-image-wrap > img {
    transform: translate3d(0, 0, 0) scale(1.055) !important;
  }
}

@keyframes xboxGameCardReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(1);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Oyun yorumlarında profil fotoğrafı konumunu çerçeve fixerlarıyla paylaş. */
#gameCommentsContainer .comment-avatar-wrap[data-photo-position] .comment-avatar-img {
  object-position: var(--comment-photo-position, 50% 50%) !important;
}


/* =========================================================
   v32.3 - FİNAL GÖRSEL DÜZELTMELER
   Sadece:
   1) Oyun kartı yukarı hareketi kaldırıldı.
   2) Arka parlama biraz artırıldı.
   3) Ana yorum sticker seçici tam görünür ve kaydırılabilir yapıldı.
   4) Oyun türü etiketi yazıya göre küçültüldü.
   ========================================================= */

/* Kart artık yukarı hareket etmez ve dış ölçüsü değişmez.
   Fotoğraf yakınlaşması, ışık geçişi, gölge, başlık ve rozet
   animasyonları aynen korunur. */
@media (hover: hover) and (pointer: fine) {
  #gamesGrid > .game-card:hover,
  .games-grid > .game-card:hover {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  /* Arka parlama bir miktar güçlendirildi. */
  #gamesGrid > .game-card:hover,
  .games-grid > .game-card:hover {
    box-shadow:
      0 25px 58px rgba(0, 0, 0, .38),
      0 8px 25px rgba(0, 0, 0, .20),
      0 0 38px rgba(69, 243, 255, .24),
      0 0 18px rgba(32, 255, 107, .13) !important;
  }

  #gamesGrid > .game-card::before,
  .games-grid > .game-card::before {
    background:
      radial-gradient(
        circle at 50% 12%,
        rgba(69, 243, 255, .25),
        transparent 48%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, .055),
        transparent 44%
      ) !important;
  }
}

/* "Xbox 360 Türkçe Yama" / oyun türü etiketi:
   Arka plan yazının çevresinde daha küçük kalır. */
#gamesGrid .game-card-genre,
.games-grid .game-card-genre {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin-top: auto !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}

/* Sticker paneli viewport'a göre JS tarafından konumlandırılır.
   Artık parent/container tarafından kesilmez. */
.sticker-picker-panel.xbox-sticker-picker-viewport {
  position: fixed !important;
  z-index: 10050 !important;
  right: auto !important;
  bottom: auto !important;
  min-height: 140px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable !important;
  box-sizing: border-box !important;
  transform: translateZ(0) !important;
  isolation: isolate !important;
}

.sticker-picker-panel.xbox-sticker-picker-viewport::-webkit-scrollbar {
  width: 9px;
}

.sticker-picker-panel.xbox-sticker-picker-viewport::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .035);
  border-radius: 999px;
}

.sticker-picker-panel.xbox-sticker-picker-viewport::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(69, 243, 255, .82),
    rgba(32, 255, 107, .72)
  );
  border: 2px solid rgba(3, 14, 21, .98);
  border-radius: 999px;
}

#commentStickerPicker.xbox-sticker-picker-viewport,
#gameCommentStickerPicker.xbox-sticker-picker-viewport {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 700px) {
  #commentStickerPicker.xbox-sticker-picker-viewport,
  #gameCommentStickerPicker.xbox-sticker-picker-viewport,
  .sticker-picker-panel.xbox-sticker-picker-viewport {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 430px) {
  #commentStickerPicker.xbox-sticker-picker-viewport,
  #gameCommentStickerPicker.xbox-sticker-picker-viewport,
  .sticker-picker-panel.xbox-sticker-picker-viewport {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   v33.0 - ANDROID / iOS YORUM + PROFIL FOTOĞRAFI SON SABİTLEME
   ========================================================= */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .comments-section,
  .profile-section,
  #commentsContainer,
  #gameCommentsContainer,
  #profileContainer,
  #profileSection {
    content-visibility: visible !important;
    contain: none !important;
  }

  #commentsContainer,
  #gameCommentsContainer,
  #profileContainer {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #commentsContainer .comment-card,
  #gameCommentsContainer .comment-card,
  .comment-card[data-user-id] {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #commentsContainer .comment-card.reply,
  #gameCommentsContainer .comment-card.reply,
  .comment-card.reply[data-user-id] {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    margin-left: 0 !important;
  }

  #commentsContainer .comment-avatar-wrap,
  #gameCommentsContainer .comment-avatar-wrap,
  #commentsContainer .comment-avatar-img,
  #gameCommentsContainer .comment-avatar-img,
  #commentsContainer .comment-avatar-letter,
  #gameCommentsContainer .comment-avatar-letter {
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #commentsContainer .comment-card.reply .comment-avatar-wrap,
  #gameCommentsContainer .comment-card.reply .comment-avatar-wrap,
  #commentsContainer .comment-card.reply .comment-avatar-img,
  #gameCommentsContainer .comment-card.reply .comment-avatar-img,
  #commentsContainer .comment-card.reply .comment-avatar-letter,
  #gameCommentsContainer .comment-card.reply .comment-avatar-letter {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }

  #commentsContainer .comment-avatar-img,
  #gameCommentsContainer .comment-avatar-img {
    display: block !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }

  #commentsContainer .comment-content,
  #gameCommentsContainer .comment-content {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #profileContainer > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
  }

  #profileContainer .profile-photo-display-wrap,
  .profile-photo-display-wrap {
    display: block !important;
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #profileContainer .profile-photo-display-wrap > img,
  .profile-photo-display-wrap > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #profileContainer input,
  #profileContainer select,
  #profileContainer textarea,
  #profileContainer button {
    max-width: 100% !important;
  }
}

@media (max-width: 430px) {
  #profileContainer .profile-photo-display-wrap,
  .profile-photo-display-wrap {
    width: 132px !important;
    height: 132px !important;
    min-width: 132px !important;
    min-height: 132px !important;
    max-width: 132px !important;
    max-height: 132px !important;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  #profileContainer .profile-photo-fallback,
  .profile-photo-fallback {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
    min-height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (max-width: 430px) {
  #profileContainer .profile-photo-fallback,
  .profile-photo-fallback {
    width: 132px !important;
    height: 132px !important;
    min-width: 132px !important;
    min-height: 132px !important;
    max-width: 132px !important;
    max-height: 132px !important;
  }
}


/* =========================================================
   v34.0 - KODLA ŞİFRE YENİLEME / SİSTEM BİLDİRİMİ / SABİT YORUM
   ========================================================= */

.forgot-password-box {
  width: min(460px, calc(100vw - 28px)) !important;
}

.forgot-code-area.hidden {
  display: none !important;
}

.system-notification-controls {
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(69, 243, 255, 0.18);
  background: rgba(4, 13, 20, 0.82);
}

.system-notification-controls button {
  width: 100%;
  padding: 9px 12px !important;
  background: linear-gradient(135deg, #107c10, #3498db) !important;
}

.system-notification-controls button[data-enabled="true"] {
  background: linear-gradient(135deg, #8b1e16, #e74c3c) !important;
}

.system-notification-controls span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.comment-card.pinned-comment {
  border-color: rgba(255, 213, 79, 0.88) !important;
  box-shadow:
    0 0 0 1px rgba(255, 213, 79, 0.22),
    0 0 24px rgba(255, 213, 79, 0.16),
    0 18px 45px rgba(0, 0, 0, 0.30) !important;
}

.pinned-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 213, 79, 0.16);
  color: #ffd54f;
  border: 1px solid rgba(255, 213, 79, 0.48);
  font-size: 11px;
  font-weight: 950;
}

.comment-actions .pin-btn {
  background: linear-gradient(135deg, #9a6a00, #f1c40f) !important;
  color: #141000 !important;
  border: none !important;
}

.comment-actions .pin-btn.active {
  background: linear-gradient(135deg, #695000, #b7950b) !important;
  color: #ffffff !important;
}

@media (max-width: 650px) {
  .notification-panel {
    left: 12px !important;
    right: 12px !important;
    bottom: 88px !important;
    width: auto !important;
  }
}

/* =========================================================
   v40.0 - İSTENEN HEDEFLİ DÜZELTMELER
   - Profil fotoğrafı işlem butonları yan yana
   - Yakınlaştırılmış fotoğrafta konum merkezi doğru uygulanır
   - Android/iOS admin panelinde yalnızca Rol Yönetimi
   - Android/iOS yorum ve sticker buton oranı
   ========================================================= */
.profile-photo-action-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  flex-wrap: nowrap;
}

.profile-photo-action-row > button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
}

.profile-position-preview img,
.profile-photo-live {
  transform-origin: var(--profile-photo-position, center) !important;
}

html.xbox-android #adminTabAddGame,
html.xbox-android #adminTabStickers,
html.xbox-ios #adminTabAddGame,
html.xbox-ios #adminTabStickers,
html.xbox-android #adminTabContentAddGame,
html.xbox-android #adminTabContentStickers,
html.xbox-ios #adminTabContentAddGame,
html.xbox-ios #adminTabContentStickers {
  display: none !important;
}

html.xbox-android #adminTabRoles,
html.xbox-ios #adminTabRoles {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  flex: 1 1 100% !important;
}

html.xbox-android #adminTabContentRoles,
html.xbox-ios #adminTabContentRoles {
  display: block !important;
  width: 100% !important;
}

html.xbox-android #adminSection .admin-panel-head p,
html.xbox-ios #adminSection .admin-panel-head p {
  display: none !important;
}

html.xbox-android .comment-send-actions,
html.xbox-ios .comment-send-actions {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

html.xbox-android .comment-send-actions .sticker-picker-toggle,
html.xbox-ios .comment-send-actions .sticker-picker-toggle {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
}

html.xbox-android #commentSendBtn,
html.xbox-android #gameCommentSendBtn,
html.xbox-ios #commentSendBtn,
html.xbox-ios #gameCommentSendBtn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
}

@media (max-width: 420px) {
  .profile-photo-action-row {
    gap: 7px;
  }

  .profile-photo-action-row > button {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 13px !important;
  }
}


/* =========================================================
   v41.0 - PROFIL FOTOĞRAFI SENKRONIZASYONU VE UYARI TASARIMLARI
   ========================================================= */
#authArea .profile-wrapper > .nav-avatar {
  will-change: transform, object-position;
}

.verification-required-card {
  width: 100% !important;
  min-height: 92px;
  padding: 16px 18px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 14px !important;
  text-align: left !important;
  background: radial-gradient(circle at 10% 10%, rgba(255, 213, 79, .18), transparent 36%), linear-gradient(135deg, rgba(35, 29, 13, .98), rgba(10, 22, 29, .98)) !important;
  border: 1px solid rgba(255, 213, 79, .42) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28), inset 0 0 24px rgba(255, 213, 79, .04) !important;
  color: #fff !important;
}

.verification-required-icon {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255, 213, 79, .24), rgba(255, 159, 28, .10));
  border: 1px solid rgba(255, 213, 79, .34); color: #ffd54f; font-size: 23px;
  box-shadow: 0 0 20px rgba(255, 213, 79, .12);
}

.verification-required-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.verification-required-copy strong { color: #fff; font-size: 15px; line-height: 1.3; }
.verification-required-copy span { color: #d5e3e9; font-size: 13px; line-height: 1.5; }
.verification-required-btn { min-height: 42px; white-space: nowrap; padding: 10px 14px !important; background: linear-gradient(135deg, #ffd54f, #ff9f1c) !important; color: #171006 !important; box-shadow: 0 8px 22px rgba(255, 159, 28, .18) !important; }

.customize-locked-hero {
  position: static !important; inset: auto !important; transform: none !important; width: 100% !important;
  min-height: 128px; margin: 0 0 20px !important; padding: 20px !important;
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 18px !important;
  overflow: hidden !important; border-radius: 20px !important;
  background: radial-gradient(circle at 8% 10%, rgba(255, 209, 102, .20), transparent 35%), linear-gradient(135deg, rgba(40, 26, 8, .98), rgba(8, 23, 31, .98)) !important;
  border: 1px solid rgba(255, 209, 102, .38) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28), inset 0 0 32px rgba(255, 209, 102, .035) !important;
}

.customize-locked-icon {
  position: static !important; flex: 0 0 68px !important; width: 68px !important; height: 68px !important; border-radius: 20px !important;
  display: grid !important; place-items: center !important; background: linear-gradient(135deg, rgba(255, 209, 102, .25), rgba(255, 159, 28, .08)) !important;
  border: 1px solid rgba(255, 209, 102, .34) !important; color: #ffd166 !important; font-size: 27px !important; box-shadow: 0 0 24px rgba(255, 209, 102, .12) !important;
}

.customize-locked-copy { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.customize-locked-kicker { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 9px; border-radius: 999px; color: #171006; background: linear-gradient(135deg, #ffd166, #ffb300); font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.customize-locked-copy h3 { margin: 2px 0 0 !important; color: #fff !important; font-size: 19px; }
.customize-locked-copy p { margin: 0 !important; color: #dce8ed !important; line-height: 1.55; font-size: 13px; }
.customize-locked-copy small { color: #9fb5bf !important; line-height: 1.4; }

@media (max-width: 680px) {
  .verification-required-card { grid-template-columns: 46px minmax(0, 1fr) !important; padding: 14px !important; }
  .verification-required-icon { width: 46px; height: 46px; border-radius: 14px; }
  .verification-required-btn { grid-column: 1 / -1; width: 100%; }
  .customize-locked-hero { min-height: 0; padding: 17px !important; flex-direction: column !important; align-items: flex-start !important; gap: 13px !important; }
  .customize-locked-icon { flex-basis: 56px !important; width: 56px !important; height: 56px !important; border-radius: 17px !important; }
}


/* =========================================================
   v42.0 - PROFIL FOTOĞRAFI KIRPMA VE KONUM SON DÜZELTMESİ
   Fotoğraf dış çerçeveyi büyütmeden iç katmanda yakınlaşır ve kayar.
   ========================================================= */
.nav-avatar-shell {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  flex: 0 0 44px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.nav-avatar-crop {
  position: absolute !important;
  inset: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid #45f3ff !important;
  box-shadow: 0 0 10px rgba(69,243,255,.35) !important;
  background: #101820 !important;
  box-sizing: border-box !important;
}

.nav-avatar-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: var(--nav-photo-transform, scale(1) translate(0%, 0%)) !important;
  transform-origin: center center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
}

.profile-photo-display-img,
.profile-photo-adjust-preview img {
  object-position: center center !important;
  transform-origin: center center !important;
}

.comment-avatar-crop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #101820 !important;
  z-index: 2 !important;
}

.comment-avatar-crop .comment-avatar-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: var(--comment-photo-transform, scale(1) translate(0%, 0%)) !important;
  transform-origin: center center !important;
  border-radius: 0 !important;
  overflow: visible !important;
}


/* =========================================================
   v43.0 - AVATAR TEK CERCEVE + TAM KONUM DUZELTMESI
   - Fotografsiz navbar avatarinin arka plani korunur.
   - Navbar profil fotografinda yalnizca tek dis halka kullanilir.
   - Object-position ile sag/sol ve yukari/asagi kirpma tam uygulanir.
   ========================================================= */
#authArea .profile-wrapper > .nav-avatar-fallback {
  background: linear-gradient(135deg, #45f3ff, #20ff6b) !important;
  color: #02070c !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#authArea .profile-wrapper > .nav-avatar-shell {
  border: 2px solid #45f3ff !important;
  box-shadow: 0 0 10px rgba(69,243,255,.35) !important;
  background: #101820 !important;
  overflow: visible !important;
}

/* Ozellestirme cercevesi varsa renk/genislik tek dis halkada kalir. */
#authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-cyan { border-color:#45f3ff !important; }
#authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-blue { border-color:#2d8cff !important; }
#authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-green { border-color:#34d399 !important; }
#authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-gold { border-color:#ffd166 !important; }
#authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-orange { border-color:#ff9f1c !important; }
#authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-red { border-color:#ff4d4d !important; }
#authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-purple { border-color:#9b5cff !important; }
#authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-pink { border-color:#ff6ec7 !important; }

#authArea .profile-wrapper > .nav-avatar-shell > .nav-avatar-crop {
  inset: 2px !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #101820 !important;
}

#authArea .nav-avatar-photo {
  object-position: var(--nav-photo-position, 50% 50%) !important;
  transform-origin: var(--nav-photo-position, 50% 50%) !important;
  transform: var(--nav-photo-transform, scale(1)) !important;
}

.profile-photo-display-img,
.profile-photo-adjust-preview img {
  object-position: var(--photo-position, 50% 50%) !important;
  transform-origin: var(--photo-position, 50% 50%) !important;
  transform: var(--photo-transform, scale(1)) !important;
}

.profile-photo-display-img {
  --photo-position: inherit;
}

.comment-avatar-crop .comment-avatar-img {
  object-position: var(--comment-photo-position, 50% 50%) !important;
  transform-origin: var(--comment-photo-position, 50% 50%) !important;
  transform: var(--comment-photo-transform, scale(1)) !important;
}


/* =========================================================
   v44.0 - NAVBAR CERCEVE OTURMA + YORUM KONUM KILIDI
   Yalnizca profil avatarinin kirpma/cerceve katmanlarini etkiler.
   ========================================================= */
#authArea .profile-wrapper > .nav-avatar-shell {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: transparent !important;
}

#authArea .profile-wrapper > .nav-avatar-shell > .nav-avatar-crop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #101820 !important;
}

#authArea .profile-wrapper > .nav-avatar-shell > .nav-avatar-crop > .nav-avatar-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: var(--nav-photo-position, 50% 50%) !important;
  transform: var(--nav-photo-transform, scale(1)) !important;
  transform-origin: var(--nav-photo-position, 50% 50%) !important;
  box-sizing: border-box !important;
}

html body .comment-card[data-user-id] > .comment-avatar-wrap .comment-avatar-img {
  object-position: var(--comment-photo-position, 50% 50%) !important;
  transform: var(--comment-photo-transform, scale(1)) !important;
  transform-origin: var(--comment-photo-position, 50% 50%) !important;
}


/* =========================================================
   v45.0 - İSTENEN NOKTASAL DÜZELTMELER
   - Yanıt sticker paneli viewport içinde kalır.
   - Yorum sayfa numaraları yuvarlaktır ve dış paneli yoktur.
   - Oyun kartı/detay dosya içeriği düğmesi ve penceresi.
   ========================================================= */

/* Sticker paneli body portalına taşındığında kesin viewport sınırları. */
html body > .sticker-picker-panel.xbox-sticker-picker-viewport {
  position: fixed !important;
  z-index: 10050 !important;
  box-sizing: border-box !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 !important;
  transform: none !important;
  contain: none !important;
}

/* Pagination doğrudan container çocuğu olduğu için eski genel cam panel stilini iptal et. */
html body #commentsContainer > .comment-pagination,
html body #gameCommentsContainer > .comment-pagination,
html body .comment-pagination {
  width: auto !important;
  min-height: 0 !important;
  margin: 20px auto 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.comment-pagination .comment-page-number {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  line-height: 1 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24) !important;
}

.comment-pagination .comment-page-number.active {
  box-shadow: 0 0 0 3px rgba(69, 243, 255, .12), 0 9px 24px rgba(32, 255, 107, .20) !important;
}

.comment-pagination > span {
  padding: 0 4px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Yeni oyun ve düzenleme alanındaki dosya içeriği çok satırlı alanı. */
.admin-form-grid .admin-file-contents-input,
.game-detail-edit-form .admin-file-contents-input {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 132px !important;
  resize: vertical !important;
  padding: 13px 14px !important;
  color: #fff !important;
  line-height: 1.55 !important;
  border-radius: 13px !important;
  border: 1px solid rgba(69, 243, 255, .30) !important;
  background: rgba(4, 14, 20, .92) !important;
  outline: none !important;
}

.admin-form-grid .admin-file-contents-input:focus,
.game-detail-edit-form .admin-file-contents-input:focus {
  border-color: rgba(69, 243, 255, .78) !important;
  box-shadow: 0 0 0 3px rgba(69, 243, 255, .10) !important;
}

/* Ana sayfa oyun kartında İndir + kare dosya içeriği düğmesi. */
#gamesGrid .game-card .game-card-action.game-card-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding-top: 0 !important;
}

#gamesGrid .game-card .game-card-tools .download-btn,
#gamesGrid .game-card .game-card-tools .game-status,
#gamesGrid .game-card .game-card-tools .download-warning {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 7px 11px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

#gamesGrid .game-card .game-card-tools .download-warning {
  max-width: calc(100% - 43px) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

.game-file-contents-btn {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 44px !important;
  border-radius: 11px !important;
  color: var(--cyan) !important;
  background: linear-gradient(145deg, rgba(69, 243, 255, .16), rgba(32, 255, 107, .10)) !important;
  border: 1px solid rgba(69, 243, 255, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 20px rgba(0, 0, 0, .22) !important;
}

.game-file-contents-btn i {
  font-size: 18px !important;
  pointer-events: none;
}

/* Ana sayfa kartında belge düğmesi küçük kalır ve indirme durumunun solunda görünür. */
#gamesGrid .game-card .game-file-contents-btn.card {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 10px !important;
}

#gamesGrid .game-card .game-file-contents-btn.card i {
  font-size: 15px !important;
}

.game-file-contents-btn:hover {
  color: #021015 !important;
  background: linear-gradient(135deg, var(--cyan), var(--green)) !important;
  border-color: transparent !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 20px rgba(69, 243, 255, .30) !important;
}

.game-detail-actions.game-detail-tools {
  display: flex !important;
  align-items: stretch !important;
  gap: 9px !important;
}

.game-detail-actions.game-detail-tools .download-btn,
.game-detail-actions.game-detail-tools .game-status,
.game-detail-actions.game-detail-tools .download-warning {
  flex: 1 1 auto !important;
  width: auto !important;
  margin: 0 !important;
}

body.game-file-contents-open {
  overflow: hidden !important;
}

.game-file-contents-modal {
  z-index: 12000 !important;
}

.game-file-contents-box {
  width: min(620px, 94vw) !important;
  padding: 26px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at top right, rgba(69, 243, 255, .16), transparent 34%),
    linear-gradient(180deg, rgba(8, 25, 34, .99), rgba(3, 10, 15, .99)) !important;
}

.game-file-contents-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 25px !important;
  line-height: 1 !important;
  background: rgba(255, 77, 77, .18) !important;
  border: 1px solid rgba(255, 77, 77, .35) !important;
  box-shadow: none !important;
}

.game-file-contents-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.game-file-contents-box h2 {
  padding-right: 42px;
  color: #fff;
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.2;
}

.game-file-contents-help {
  margin: 8px 0 14px;
  color: var(--muted);
  line-height: 1.5;
}

.game-file-contents-text {
  width: 100%;
  max-height: min(52vh, 430px);
  overflow: auto;
  margin: 0;
  padding: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #eaffff;
  font: 700 13px/1.65 Consolas, "Courier New", monospace;
  border-radius: 14px;
  border: 1px solid rgba(69, 243, 255, .26);
  background: rgba(0, 7, 12, .76);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .26);
}

.game-file-contents-text.is-empty {
  color: #9bb2b8;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

@media (max-width: 560px) {
  html body > .sticker-picker-panel.xbox-sticker-picker-viewport {
    max-width: calc(100vw - 16px) !important;
  }

  .game-file-contents-box {
    padding: 22px 16px 16px !important;
  }

  #gamesGrid .game-card .game-card-action.game-card-tools {
    gap: 7px !important;
  }
}

/* =========================================================
   v45.2 - ANA SAYFA OYUN KARTI EYLEMLERİ SON KONUM
   - Ana sayfada kart dışında oluşan Hazırlanıyor / İndir /
     Dosya İçeriği öğeleri görünmez.
   - Kartın içindeki grup eski küçük ölçüsündedir.
   - Grup kartın sağ alt köşesindedir; Dosya İçeriği soldadır.
   ========================================================= */
#homeSection #gamesGrid > .game-card-action,
#homeSection #gamesGrid > .game-status,
#homeSection #gamesGrid > .download-btn,
#homeSection #gamesGrid > .download-warning,
#homeSection #gamesGrid > .game-file-contents-btn,
#homeSection #gamesGrid > :not(.game-card) .game-card-action,
#homeSection #gamesGrid > :not(.game-card) .game-status,
#homeSection #gamesGrid > :not(.game-card) .download-btn,
#homeSection #gamesGrid > :not(.game-card) .download-warning,
#homeSection #gamesGrid > :not(.game-card) .game-file-contents-btn {
  display: none !important;
}

#gamesGrid .game-card {
  position: relative !important;
}

#gamesGrid .game-card .game-card-body {
  position: relative !important;
  padding-bottom: 38px !important;
}

#gamesGrid .game-card .game-card-genre {
  max-width: calc(100% - 104px) !important;
}

#gamesGrid .game-card .game-card-action.game-card-tools {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* HTML sırası: önce Dosya İçeriği, ardından İndir/Hazırlanıyor. */
#gamesGrid .game-card .game-card-tools > .game-file-contents-btn.card {
  order: 1 !important;
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  min-height: 31px !important;
  flex: 0 0 31px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 9px !important;
}

#gamesGrid .game-card .game-card-tools > .game-file-contents-btn.card i {
  font-size: 13px !important;
}

#gamesGrid .game-card .game-card-tools > .download-btn,
#gamesGrid .game-card .game-card-tools > .game-status,
#gamesGrid .game-card .game-card-tools > .download-warning {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 31px !important;
  max-height: 31px !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#gamesGrid .game-card .game-card-tools > .download-warning {
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 560px) {
  #gamesGrid .game-card .game-card-body {
    padding-bottom: 36px !important;
  }

  #gamesGrid .game-card .game-card-genre {
    max-width: calc(100% - 96px) !important;
  }

  #gamesGrid .game-card .game-card-action.game-card-tools {
    gap: 5px !important;
  }
}

/* =========================================================
   v45.3 - ANA SAYFA KART İÇİ BUTONLAR KESİN YERLEŞİM
   Bu blok yalnızca ana sayfadaki oyun kartlarını etkiler.
   - Kart dışındaki Hazırlanıyor / İndir / Dosya İçeriği gizlidir.
   - Kart içindeki yeni grup doğrudan kartın sağ alt köşesindedir.
   - Dosya İçeriği solda; İndir / Hazırlanıyor sağdadır.
   - Eski büyük buton kurallarını geçersiz kılar.
   ========================================================= */
#homeSection #gamesGrid > .game-card-action,
#homeSection #gamesGrid > .game-status,
#homeSection #gamesGrid > .download-btn,
#homeSection #gamesGrid > .download-warning,
#homeSection #gamesGrid > .game-file-contents-btn,
#homeSection #gamesGrid > :not(.game-card) .game-card-action,
#homeSection #gamesGrid > :not(.game-card) .game-status,
#homeSection #gamesGrid > :not(.game-card) .download-btn,
#homeSection #gamesGrid > :not(.game-card) .download-warning,
#homeSection #gamesGrid > :not(.game-card) .game-file-contents-btn {
  display: none !important;
}

#homeSection #gamesGrid > .game-card {
  position: relative !important;
}

#homeSection #gamesGrid > .game-card > .game-card-body {
  padding-bottom: 50px !important;
}

#homeSection #gamesGrid > .game-card > .game-card-inline-actions {
  position: absolute !important;
  right: 13px !important;
  bottom: 13px !important;
  left: auto !important;
  top: auto !important;
  z-index: 20 !important;
  width: auto !important;
  max-width: calc(100% - 26px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#homeSection #gamesGrid > .game-card > .game-card-inline-actions > .game-file-contents-btn.card {
  order: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 9px !important;
  line-height: 1 !important;
}

#homeSection #gamesGrid > .game-card > .game-card-inline-actions > .game-file-contents-btn.card i {
  font-size: 13px !important;
  line-height: 1 !important;
}

#homeSection #gamesGrid > .game-card > .game-card-inline-actions > .download-btn,
#homeSection #gamesGrid > .game-card > .game-card-inline-actions > .game-status,
#homeSection #gamesGrid > .game-card > .game-card-inline-actions > .download-warning {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 155px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

#homeSection #gamesGrid > .game-card > .game-card-inline-actions > .download-warning {
  font-size: 10px !important;
}

@media (max-width: 560px) {
  #homeSection #gamesGrid > .game-card > .game-card-body {
    padding-bottom: 47px !important;
  }

  #homeSection #gamesGrid > .game-card > .game-card-inline-actions {
    right: 11px !important;
    bottom: 11px !important;
    max-width: calc(100% - 22px) !important;
    gap: 5px !important;
  }
}

/* =========================================================
   v45.4 - KART EYLEMLERİ KALDIRILDI / DETAY EYLEMLERİ KÜÇÜLTÜLDÜ
   - Ana sayfa oyun kartlarında İndir, Hazırlanıyor ve Dosya İçeriği yoktur.
   - Oyun detayındaki Dosya İçeriği ve İndir/Hazırlanıyor düğmeleri
     eski kompakt ölçüsüne döndürülmüştür.
   ========================================================= */

/* Ana sayfa kartlarında eylem alanı kesinlikle görünmesin. */
#homeSection #gamesGrid .game-card > .game-card-inline-actions,
#homeSection #gamesGrid .game-card .game-card-action,
#homeSection #gamesGrid .game-card .game-card-tools,
#homeSection #gamesGrid .game-card .game-file-contents-btn,
#homeSection #gamesGrid .game-card .download-btn,
#homeSection #gamesGrid .game-card .game-status,
#homeSection #gamesGrid .game-card .download-warning {
  display: none !important;
}

/* Önceki sürümün butonlar için ayırdığı boşluğu geri al. */
#homeSection #gamesGrid > .game-card > .game-card-body {
  padding-bottom: 0 !important;
}

#homeSection #gamesGrid > .game-card .game-card-genre {
  max-width: 100% !important;
}

/* Oyun detayındaki işlem grubu tam genişlik kaplamaz. */
#gameDetailContainer .game-detail-actions.game-detail-tools {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: stretch !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  margin-top: auto !important;
  padding-top: 18px !important;
  text-align: right !important;
}

#gameDetailContainer .game-detail-actions.game-detail-tools > .game-file-contents-btn.detail {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
}

#gameDetailContainer .game-detail-actions.game-detail-tools > .game-file-contents-btn.detail i {
  font-size: 15px !important;
  line-height: 1 !important;
}

#gameDetailContainer .game-detail-actions.game-detail-tools > .download-btn,
#gameDetailContainer .game-detail-actions.game-detail-tools > .game-status,
#gameDetailContainer .game-detail-actions.game-detail-tools > .download-warning {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(100%, 260px) !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 8px 13px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#gameDetailContainer .game-detail-actions.game-detail-tools > .download-warning {
  height: auto !important;
  max-height: none !important;
  white-space: normal !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  #gameDetailContainer .game-detail-actions.game-detail-tools {
    justify-content: center !important;
    padding-top: 16px !important;
  }

  #gameDetailContainer .game-detail-actions.game-detail-tools > .download-btn,
  #gameDetailContainer .game-detail-actions.game-detail-tools > .game-status {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
  }

  #gameDetailContainer .game-detail-actions.game-detail-tools > .game-file-contents-btn.detail {
    flex-basis: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
}



/* =========================================================
   v45.5 - DETAY ETİKETİ + ORTA BOY EYLEM DÜĞMELERİ
   - Detay etiketi yorum başlığındaki rozet gibi yazı kadar yer kaplar.
   - Dosya İçeriği ve İndir/Hazırlanıyor düğmeleri bir tık büyütüldü.
   ========================================================= */

#gameDetailContainer .game-detail-info > .game-detail-main-badge {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  white-space: normal !important;
  line-height: 1.1 !important;
}

#gameDetailContainer .game-detail-actions.game-detail-tools > .game-file-contents-btn.detail {
  flex-basis: 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border-radius: 11px !important;
}

#gameDetailContainer .game-detail-actions.game-detail-tools > .game-file-contents-btn.detail i {
  font-size: 16px !important;
}

#gameDetailContainer .game-detail-actions.game-detail-tools > .download-btn,
#gameDetailContainer .game-detail-actions.game-detail-tools > .game-status,
#gameDetailContainer .game-detail-actions.game-detail-tools > .download-warning {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 9px 15px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
}

#gameDetailContainer .game-detail-actions.game-detail-tools > .download-warning {
  height: auto !important;
  min-height: 42px !important;
  max-height: none !important;
}

@media (max-width: 760px) {
  #gameDetailContainer .game-detail-info > .game-detail-main-badge {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #gameDetailContainer .game-detail-actions.game-detail-tools > .game-file-contents-btn.detail {
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  #gameDetailContainer .game-detail-actions.game-detail-tools > .download-btn,
  #gameDetailContainer .game-detail-actions.game-detail-tools > .game-status {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}


/* =========================================================
   v45.6 - PROFİL KURALLARI + ANDROID/iOS MENÜ + TEKLİ OYUN KAYDIRICI
   ========================================================= */
.password-rule-hint,
.profile-field-hint {
  display: block;
  margin-top: 7px;
  color: #a8c6c8;
  font-size: 12px;
  line-height: 1.45;
}

.games-carousel-shell {
  position: relative;
  width: 100%;
}

.mobile-games-carousel-btn,
.mobile-games-counter {
  display: none;
}

@media (max-width: 820px) {
  /* Mobil navbar: profil fotoğrafı ve açılır menü her zaman erişilebilir. */
  .navbar {
    overflow: visible !important;
  }

  .nav-right,
  #authArea {
    overflow: visible !important;
  }

  #authArea .profile-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1002 !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 4px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(7, 20, 28, .92) !important;
    border: 1px solid rgba(69, 243, 255, .30) !important;
    box-shadow: 0 0 16px rgba(69, 243, 255, .12) !important;
  }

  #authArea .profile-wrapper > .nav-avatar,
  #authArea .profile-wrapper > .nav-avatar-shell,
  #authArea .profile-wrapper > .nav-avatar-fallback {
    visibility: visible !important;
    opacity: 1 !important;
  }

  body > #profileMenu,
  #profileMenu {
    position: fixed !important;
    top: calc(var(--xbox-safe-top, 0px) + 72px) !important;
    right: 10px !important;
    left: auto !important;
    z-index: 30000 !important;
    width: min(220px, calc(100vw - 20px)) !important;
    min-width: 190px !important;
    max-width: calc(100vw - 20px) !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    border: 1px solid rgba(69, 243, 255, .34) !important;
    background: rgba(8, 20, 29, .98) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .48), 0 0 20px rgba(69, 243, 255, .10) !important;
  }

  body > #profileMenu button,
  #profileMenu button {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    text-align: left !important;
  }

  /* Mobil ana sayfa: tek kart, oklarla ve dokunarak kaydırma. */
  #gamesCarouselShell.mobile-carousel-active {
    padding: 0 10px 34px !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid,
  #gamesCarouselShell.mobile-carousel-active .games-grid {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    contain: none !important;
    content-visibility: visible !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid::-webkit-scrollbar {
    display: none !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid > .game-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid .game-card-image-wrap > img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid .game-card-body {
    min-height: 106px !important;
    padding: 14px !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid .game-card h3 {
    min-height: 0 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .mobile-games-carousel-btn {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    top: 46% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
    width: 38px !important;
    height: 52px !important;
    min-width: 38px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: 13px !important;
    color: #031016 !important;
    background: linear-gradient(135deg, #45f3ff, #20ff6b) !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34), 0 0 16px rgba(69,243,255,.18) !important;
  }

  .mobile-games-carousel-btn:disabled {
    opacity: .45 !important;
    pointer-events: none !important;
  }

  .mobile-games-prev { left: -2px !important; }
  .mobile-games-next { right: -2px !important; }

  .mobile-games-counter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    min-width: 58px !important;
    min-height: 26px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    color: #031016 !important;
    background: linear-gradient(135deg, #45f3ff, #20ff6b) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.26) !important;
  }

  #gamesShowMoreContainer {
    display: none !important;
  }
}

@media (max-width: 430px) {
  #gamesCarouselShell.mobile-carousel-active {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .mobile-games-carousel-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 11px !important;
  }
}


/* =========================================================
   v45.7 - MOBİL NAVBAR HİZASI + KÜÇÜK OYUN KARTI + 6 SN KAYDIRICI
   ========================================================= */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  /* Giriş/Kayıt: ekran genişliğinde iki eşit sütun ve tam ortalı görünüm. */
  .nav-right[data-auth-state="guest"] {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  #authArea[data-auth-state="guest"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 9px !important;
    padding: 2px 0 3px !important;
    overflow: visible !important;
  }

  #authArea[data-auth-state="guest"] > .nav-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    text-align: center !important;
  }

  #authArea[data-auth-state="guest"] > .about-trigger {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    margin-top: 1px !important;
  }

  /* Üye navbarı: Admin Panel üstte, profil fotoğrafı her rolde tam merkezde. */
  .nav-right[data-auth-state="user"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 9px !important;
    overflow: visible !important;
  }

  .nav-right[data-auth-state="user"] > #adminNavBtn:not([hidden]) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(280px, 100%) !important;
    min-height: 44px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #authArea[data-auth-state="user"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #authArea[data-auth-state="user"] > .profile-wrapper {
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  #authArea[data-auth-state="user"] > .about-trigger {
    grid-column: 3 !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  /* Kart, önceki sürüme göre yalnızca bir tık daha küçük ve ortalı. */
  #gamesCarouselShell.mobile-carousel-active {
    width: calc(100% - 12px) !important;
    max-width: 410px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 14px 34px !important;
    box-sizing: border-box !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid > .game-card {
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .mobile-games-carousel-btn {
    top: 44% !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 11px !important;
  }

  .mobile-games-prev { left: 0 !important; }
  .mobile-games-next { right: 0 !important; }
}

@media (max-width: 430px) {
  #gamesCarouselShell.mobile-carousel-active {
    width: calc(100% - 8px) !important;
    max-width: 390px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .mobile-games-carousel-btn {
    width: 31px !important;
    min-width: 31px !important;
    height: 43px !important;
    min-height: 43px !important;
  }
}


/* =========================================================
   v45.8 - SADECE MOBİL: İLK YÜKLEME, NAVBAR, HAKKIMIZDA,
   ARAMA/FİLTRE GİZLEME VE 4 SN KAYDIRICI UYUMLULUĞU
   ========================================================= */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  /* Auth durumu Firebase'den gelmeden önce de yeni mobil görünüm kullanılsın. */
  .nav-right:not([data-auth-state="user"]),
  .nav-right[data-auth-state="guest"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #authArea:not([data-auth-state="user"]),
  #authArea[data-auth-state="guest"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 9px !important;
    padding: 2px 0 3px !important;
    overflow: visible !important;
  }

  #authArea:not([data-auth-state="user"]) > .nav-btn,
  #authArea[data-auth-state="guest"] > .nav-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    text-align: center !important;
  }

  #authArea:not([data-auth-state="user"]) > .about-trigger,
  #authArea[data-auth-state="guest"] > .about-trigger {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    margin: 2px auto 0 !important;
  }

  /* Giriş yapılmış görünümde profil fotoğrafı ve Hakkımızda birlikte tam ortada. */
  .nav-right[data-auth-state="user"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 9px !important;
    overflow: visible !important;
  }

  #authArea[data-auth-state="user"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #authArea[data-auth-state="user"] > .profile-wrapper,
  #authArea[data-auth-state="user"] > .about-trigger {
    grid-column: auto !important;
    justify-self: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .nav-right[data-auth-state="user"] > #adminNavBtn:not([hidden]) {
    width: min(280px, 100%) !important;
    margin: 0 auto !important;
  }

  /* Hakkımızda arka planı, mobil viewport'un tamamını kaplasın. */
  html body #aboutModal.modal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: calc(12px + var(--xbox-safe-top, 0px)) 10px calc(12px + var(--xbox-safe-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, .78) !important;
    backdrop-filter: blur(11px) !important;
    -webkit-backdrop-filter: blur(11px) !important;
  }

  html body #aboutModal .about-box {
    width: min(520px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 24px - var(--xbox-safe-top, 0px) - var(--xbox-safe-bottom, 0px)) !important;
    margin: auto !important;
  }

  /* Arama ve sıralama yalnızca mobil ana sayfada kaldırıldı. */
  #homeSection .hero .search-box,
  #homeSection .hero #sortSelect,
  #homeSection .hero > br {
    display: none !important;
  }

  #homeSection .hero {
    padding: 58px 16px 44px !important;
  }

  #homeSection .hero p {
    margin-bottom: 0 !important;
  }
}


/* =========================================================
   v45.9 - SADECE MOBİL SON DÜZELTMELER
   - Hero alt başlığı biraz aşağı alındı.
   - Sorun Bildir bulanık arka planı gerçek tam ekran yapıldı.
   - Oyun kaydırıcısı native scroll yerine kararlı transform geçişi kullanır.
   ========================================================= */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  #homeSection .hero p {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }

  html body #supportModal.modal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    z-index: 50000 !important;
    isolation: isolate !important;
    background: rgba(0, 0, 0, .80) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    overscroll-behavior: contain !important;
  }

  html body #supportModal .support-modal-box {
    width: min(560px, calc(100dvw - 20px)) !important;
    max-width: calc(100dvw - 20px) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    margin: auto !important;
  }

  #gamesCarouselShell.mobile-carousel-active {
    overflow: hidden !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid,
  #gamesCarouselShell.mobile-carousel-active .games-grid {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    touch-action: pan-y !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform: translate3d(0, 0, 0);
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid > .game-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
}


/* =========================================================
   v46.0 - MOBİL KESİNTİSİZ CAROUSEL + UYUMLU ANA SAYFA BANNERI
   Yalnızca mobil görünümü etkiler.
   ========================================================= */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  html body #homeInlineAd,
  html.mobile-no-ads body #homeInlineAd,
  html body #homeInlineAd.ad-banner,
  html body #homeInlineAd.desktop-ad,
  html body #homeInlineAd.lazy-ad {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    height: auto;
    min-height: 44px !important;
    margin: 18px auto !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    position: relative !important;
    contain: layout paint !important;
  }

  html body #homeInlineAd .ad-placeholder {
    min-width: 100% !important;
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  html body #homeInlineAd iframe {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Kart bölümü ekranın üstünde veya altında olsa da transform korunur. */
  #gamesCarouselShell.mobile-carousel-active #gamesGrid {
    content-visibility: visible !important;
    contain: layout paint !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid > .game-card {
    content-visibility: visible !important;
  }
}

/* =========================================================
   v46.1 - MOBİL CAROUSEL KÖK DÜZELTME
   - Eski transform/native-scroll çakışmaları sıfırlanır.
   - Mobilde yalnızca aktif kart gösterilir; boş sekme oluşmaz.
   - Tek timer sistemiyle otomatik geçiş kararlı çalışır.
   ========================================================= */
@media (max-width: 820px) {
  #gamesCarouselShell.mobile-carousel-active {
    overflow: visible !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid,
  #gamesCarouselShell.mobile-carousel-active .games-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    touch-action: pan-y !important;
    contain: none !important;
    content-visibility: visible !important;
    will-change: auto !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid > .game-card {
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    content-visibility: visible !important;
    scroll-snap-align: none !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid > .game-card.is-mobile-carousel-active {
    display: flex !important;
    flex-direction: column !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid > .game-card.is-mobile-carousel-active .game-card-image-wrap,
  #gamesCarouselShell.mobile-carousel-active #gamesGrid > .game-card.is-mobile-carousel-active .game-card-body,
  #gamesCarouselShell.mobile-carousel-active #gamesGrid > .game-card.is-mobile-carousel-active img {
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* =========================================================
   v46.4 - MOBİL GERÇEK INSTAGRAM POST KAYDIRMASI
   - Kart parmakla birlikte hareket eder; yan kart aynı anda içeri gelir.
   - Otomatik geçiş ve ok tuşları aynı yatay geçişi kullanır.
   - Transform değeri !important çakışmasına takılmaması için CSS değişkeniyle uygulanır.
   ========================================================= */
@media (max-width: 820px) {
  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-is-animating {
    position: relative !important;
    display: block !important;
    height: var(--xbox-mobile-carousel-height, auto) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    touch-action: pan-y !important;
    contain: layout paint !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-is-animating > .game-card.is-mobile-carousel-active,
  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-is-animating > .game-card.is-mobile-carousel-leaving {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: var(--xbox-mobile-transform, translate3d(0, 0, 0)) !important;
    transition: transform 420ms cubic-bezier(.22, .68, .22, 1) !important;
    animation: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-is-dragging > .game-card.is-mobile-carousel-active,
  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-is-dragging > .game-card.is-mobile-carousel-leaving {
    transition: none !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-is-animating > .game-card.is-mobile-carousel-active {
    z-index: 2 !important;
    pointer-events: auto !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-is-animating > .game-card.is-mobile-carousel-leaving {
    z-index: 1 !important;
    pointer-events: none !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-is-animating > .game-card img {
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
}



/* =========================================================
   v46.5 - DESTEK MERKEZİ + LOGO + AKICI MOBİL KAYDIRMA
   ========================================================= */
.logo {
  text-decoration: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

.support-center-trigger {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(135deg, rgba(32, 255, 107, 0.18), rgba(69, 243, 255, 0.13));
  border: 1px solid rgba(32, 255, 107, 0.42);
  box-shadow: 0 0 0 1px rgba(32, 255, 107, 0.08), 0 0 18px rgba(32, 255, 107, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.support-center-trigger::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 1px solid rgba(32, 255, 107, 0.20);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.support-center-trigger::after {
  content: "";
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: max-content;
  padding: 7px 10px;
  border-radius: 999px;
  color: #02070c;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  font-size: 12px;
  font-weight: 950;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30);
  z-index: 5;
  display: none;
}

.support-center-trigger i {
  color: var(--green);
  font-size: 18px;
  filter: drop-shadow(0 0 7px rgba(32, 255, 107, 0.36));
}


.support-center-trigger > span {
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.support-center-trigger:hover,
.support-center-trigger:focus-visible {
  transform: translateY(-2px) scale(1.04);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(135deg, rgba(32, 255, 107, 0.30), rgba(69, 243, 255, 0.20));
  box-shadow: 0 0 0 1px rgba(32, 255, 107, 0.18), 0 0 22px rgba(32, 255, 107, 0.34);
  outline: none;
}

.support-center-trigger:hover::before,
.support-center-trigger:hover::after,
.support-center-trigger:focus-visible::before,
.support-center-trigger:focus-visible::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.support-center-box {
  width: min(760px, 94vw) !important;
  max-height: min(820px, calc(100dvh - 32px));
  overflow-y: auto;
  border-color: rgba(32, 255, 107, 0.38) !important;
  background:
    radial-gradient(circle at top left, rgba(32, 255, 107, 0.16), transparent 34%),
    radial-gradient(circle at top right, rgba(69, 243, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(9, 27, 34, 0.99), rgba(3, 10, 15, 0.99)) !important;
}

.support-center-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 20px;
}

.support-center-heading h2 { margin: 0 0 4px; }
.support-center-heading p { color: var(--muted); margin: 0; }

.support-center-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #02070c;
  font-size: 22px;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  box-shadow: 0 0 22px rgba(32, 255, 107, 0.24);
}

.support-center-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

button.support-center-card {
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px;
  text-align: left;
  border: 1px solid rgba(69, 243, 255, 0.22);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(12, 35, 44, 0.96), rgba(5, 17, 23, 0.98));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

button.support-center-card::after { display: none !important; }

button.support-center-card > i {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--cyan);
  background: rgba(69, 243, 255, 0.10);
  border: 1px solid rgba(69, 243, 255, 0.22);
  font-size: 19px;
}

button.support-center-card span { display: grid; gap: 5px; }
button.support-center-card strong { color: #fff; font-size: 15px; }
button.support-center-card small { color: var(--muted); line-height: 1.45; font-weight: 600; }
button.support-center-card-wide { grid-column: 1 / -1; }

button.support-center-card:hover,
button.support-center-card:focus-visible {
  transform: translateY(-2px);
  color: #fff;
  background: linear-gradient(145deg, rgba(15, 51, 57, 0.98), rgba(7, 24, 31, 0.99));
  border-color: rgba(32, 255, 107, 0.48);
  box-shadow: 0 14px 34px rgba(32, 255, 107, 0.12);
}

.support-center-detail {
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(32, 255, 107, 0.24);
  background: rgba(5, 17, 23, 0.88);
  color: #d8eeee;
  line-height: 1.6;
}

.support-center-detail[hidden] { display: none !important; }
.support-center-detail h3 { margin: 0 0 10px; color: #fff; }
.support-center-detail h3 i { color: var(--green); margin-right: 7px; }
.support-center-detail details { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 11px 0; }
.support-center-detail details:first-of-type { border-top: 0; }
.support-center-detail summary { cursor: pointer; color: #fff; font-weight: 850; }
.support-center-detail details p { margin: 8px 0 0; color: var(--muted); }

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  #authArea:not([data-auth-state="user"]),
  #authArea[data-auth-state="guest"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #authArea:not([data-auth-state="user"]) > .support-center-trigger,
  #authArea[data-auth-state="guest"] > .support-center-trigger {
    width: 46px !important;
    min-width: 46px !important;
    padding: 0 !important;
    gap: 0 !important;
    grid-column: 1 !important;
    justify-self: end !important;
    margin: 2px 2px 0 0 !important;
  }

  #authArea:not([data-auth-state="user"]) > .about-trigger,
  #authArea[data-auth-state="guest"] > .about-trigger {
    grid-column: 2 !important;
    justify-self: start !important;
    margin: 2px 0 0 2px !important;
  }

  #authArea[data-auth-state="user"] > .support-center-trigger {
    width: 46px !important;
    min-width: 46px !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  #authArea[data-auth-state="user"] > .support-center-trigger,
  #authArea[data-auth-state="user"] > .about-trigger,
  #authArea[data-auth-state="user"] > .profile-wrapper {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .support-center-trigger > span { display: none !important; }

  .support-center-trigger::after,
  .about-trigger::after { display: none !important; }

  html body #supportCenterModal.modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100dvw !important;
    height: 100dvh !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: rgba(0, 0, 0, 0.80) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 50000 !important;
  }

  html body #supportCenterModal .support-center-box {
    width: min(620px, calc(100dvw - 20px)) !important;
    max-width: calc(100dvw - 20px) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    margin: auto !important;
  }

  .support-center-grid { grid-template-columns: 1fr; }
  button.support-center-card-wide { grid-column: auto; }

  /* Alt piksel transform ve daha yumuşak eğri, mobil geçişteki küçük takılmaları kaldırır. */
  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-is-animating > .game-card.is-mobile-carousel-active,
  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-is-animating > .game-card.is-mobile-carousel-leaving {
    transition: transform 560ms cubic-bezier(.22, .78, .20, 1) !important;
    transform-origin: center center !important;
  }
}

@media (max-width: 430px) {
  .support-center-heading { align-items: flex-start; }
  .support-center-icon { width: 48px; height: 48px; flex-basis: 48px; }
  button.support-center-card { min-height: 96px; padding: 14px; }
}


/* =========================================================
   v46.6 - TEK PARÇA AKICI MOBİL KAYDIRICI + TEK DESTEK BALONU
   Eski native-scroll ve mutlak kart kuralları bu blokla tamamen ezilir.
   ========================================================= */
@media (max-width: 820px) {
  #gamesCarouselShell.mobile-carousel-active {
    position: relative !important;
    width: calc(100% - 12px) !important;
    max-width: 410px !important;
    margin-inline: auto !important;
    padding: 0 14px 34px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    contain: layout paint !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-track,
  #gamesCarouselShell.mobile-carousel-active .games-grid.mobile-carousel-track {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    touch-action: pan-y !important;
    transform: translate3d(var(--xbox-mobile-track-x, 0px), 0, 0) !important;
    transition: none !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    contain: none !important;
    content-visibility: visible !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-track.mobile-carousel-is-moving {
    transition: transform 520ms cubic-bezier(.22, .61, .36, 1) !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-track.mobile-carousel-is-dragging {
    transition: none !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-track > .game-card,
  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-track > .game-card.is-mobile-carousel-active,
  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-track > .game-card.is-mobile-carousel-leaving {
    display: flex !important;
    flex: 0 0 100% !important;
    flex-direction: column !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    scroll-snap-align: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    content-visibility: visible !important;
    box-sizing: border-box !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-track > .game-card img {
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid.mobile-carousel-track > .mobile-carousel-clone {
    pointer-events: none !important;
  }

  /* Destek artık yalnızca sol alttaki tek balondan açılır. */
  .support-center-trigger {
    display: none !important;
  }

  #authArea[data-auth-state="guest"],
  #authArea:not([data-auth-state="user"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #authArea[data-auth-state="guest"] > .about-trigger,
  #authArea:not([data-auth-state="user"]) > .about-trigger {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    margin: 2px auto 0 !important;
  }

  #authArea[data-auth-state="user"] {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  }

  #authArea[data-auth-state="user"] > .about-trigger {
    grid-column: 3 !important;
    justify-self: start !important;
  }
}

@media (max-width: 430px) {
  #gamesCarouselShell.mobile-carousel-active {
    width: calc(100% - 8px) !important;
    max-width: 390px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}

/* =========================================================
   v46.7 - ALTIN MADDİ DESTEK + TAM HAKKIMIZDA BUTONU
   ========================================================= */

/* Hakkımızda artık yuvarlak ikon değil, tam ve okunaklı menü butonudur. */
html body .about-trigger {
  width: auto !important;
  min-width: 132px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  flex: 0 0 auto !important;
  border-radius: 13px !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(12, 49, 58, 0.98), rgba(7, 29, 36, 0.98)) !important;
  border: 1px solid rgba(69, 243, 255, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(69, 243, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(69, 243, 255, 0.12) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  -webkit-tap-highlight-color: transparent;
}

html body .about-trigger > i {
  flex: 0 0 auto !important;
  color: var(--cyan) !important;
  font-size: 18px !important;
  filter: drop-shadow(0 0 7px rgba(69, 243, 255, 0.34)) !important;
}

html body .about-trigger > span {
  display: inline-block !important;
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.15px !important;
}

html body .about-trigger::before {
  inset: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  opacity: 1 !important;
  transform: none !important;
  background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, 0.12) 48%, transparent 78%) !important;
  translate: -120% 0;
  transition: translate 0.55s ease !important;
}

html body .about-trigger::after {
  display: none !important;
  content: none !important;
}

html body .about-trigger:hover,
html body .about-trigger:focus-visible {
  transform: translateY(-2px) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.22), transparent 30%),
    linear-gradient(135deg, rgba(14, 63, 72, 0.99), rgba(8, 39, 47, 0.99)) !important;
  border-color: rgba(32, 255, 107, 0.64) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 13px 28px rgba(0, 0, 0, 0.28),
    0 0 22px rgba(69, 243, 255, 0.24) !important;
}

html body .about-trigger:hover::before,
html body .about-trigger:focus-visible::before {
  translate: 120% 0;
}

html body .about-trigger:active {
  transform: translateY(0) scale(0.985) !important;
}

/* Maddi destek kartı altın sarısı ve diğer seçeneklerden belirgin şekilde ayrılır. */
button.support-center-card.support-center-card-financial {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-color: rgba(255, 209, 102, 0.86) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 240, 166, 0.26), transparent 34%),
    linear-gradient(145deg, rgba(82, 58, 8, 0.98), rgba(31, 21, 4, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 190, 0.17),
    0 0 0 1px rgba(255, 209, 102, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.28),
    0 0 25px rgba(255, 193, 38, 0.18) !important;
  animation: supportFinancialGlow 2.5s ease-in-out infinite !important;
}

button.support-center-card.support-center-card-financial::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(110deg, transparent 24%, rgba(255, 248, 207, 0.20) 47%, transparent 70%) !important;
  transform: translateX(-125%) !important;
  animation: supportFinancialShine 3.2s ease-in-out infinite !important;
}

button.support-center-card.support-center-card-financial > i,
button.support-center-card.support-center-card-financial > span,
button.support-center-card.support-center-card-financial > .support-card-highlight {
  position: relative !important;
  z-index: 1 !important;
}

button.support-center-card.support-center-card-financial > i {
  color: #2a1b00 !important;
  background: linear-gradient(145deg, #ffe58b, #f2b921) !important;
  border-color: rgba(255, 238, 164, 0.90) !important;
  box-shadow: 0 0 20px rgba(255, 198, 48, 0.30) !important;
}

button.support-center-card.support-center-card-financial strong {
  color: #ffe58b !important;
  text-shadow: 0 0 12px rgba(255, 208, 82, 0.22) !important;
}

button.support-center-card.support-center-card-financial small {
  color: #f6e8b8 !important;
}

.support-card-highlight {
  position: absolute !important;
  top: 9px !important;
  right: 10px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  color: #2b1b00 !important;
  background: linear-gradient(135deg, #fff0a6, #f3bd2d) !important;
  border: 1px solid rgba(255, 248, 205, 0.82) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.25px !important;
  text-transform: uppercase !important;
}

button.support-center-card.support-center-card-financial:hover,
button.support-center-card.support-center-card-financial:focus-visible {
  color: #ffffff !important;
  border-color: #ffe58b !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 244, 185, 0.34), transparent 36%),
    linear-gradient(145deg, rgba(104, 73, 8, 0.99), rgba(43, 29, 3, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 214, 0.22),
    0 16px 38px rgba(0, 0, 0, 0.30),
    0 0 32px rgba(255, 199, 44, 0.30) !important;
}

.support-center-detail.is-financial {
  border-color: rgba(255, 209, 102, 0.62) !important;
  background:
    radial-gradient(circle at top left, rgba(255, 221, 105, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(61, 43, 7, 0.96), rgba(24, 17, 5, 0.98)) !important;
  color: #f8ebbd !important;
  box-shadow: inset 0 1px 0 rgba(255, 242, 186, 0.08), 0 0 24px rgba(255, 193, 38, 0.10) !important;
}

.support-center-detail.is-financial h3,
.support-center-detail.is-financial h3 i {
  color: #ffe58b !important;
}

.support-financial-status {
  margin-top: 12px !important;
  padding: 11px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border-radius: 12px !important;
  color: #fff2bd !important;
  background: rgba(255, 210, 74, 0.10) !important;
  border: 1px solid rgba(255, 222, 116, 0.30) !important;
  font-weight: 750 !important;
}

.support-financial-status i {
  color: #ffd35b !important;
}

@keyframes supportFinancialGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 245, 190, 0.17), 0 0 0 1px rgba(255, 209, 102, 0.12), 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 20px rgba(255, 193, 38, 0.13); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 245, 190, 0.22), 0 0 0 1px rgba(255, 209, 102, 0.18), 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 34px rgba(255, 193, 38, 0.27); }
}

@keyframes supportFinancialShine {
  0%, 58% { transform: translateX(-125%); }
  82%, 100% { transform: translateX(125%); }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html body .about-trigger {
    width: auto !important;
    min-width: 132px !important;
    max-width: 190px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
  }

  #authArea:not([data-auth-state="user"]) > .about-trigger,
  #authArea[data-auth-state="guest"] > .about-trigger {
    width: min(190px, 100%) !important;
    min-width: 150px !important;
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    margin: 2px auto 0 !important;
  }

  #authArea[data-auth-state="user"] > .about-trigger {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    justify-self: start !important;
  }

  button.support-center-card.support-center-card-financial {
    padding-top: 34px !important;
  }
}

@media (max-width: 380px) {
  #authArea[data-auth-state="user"] > .about-trigger {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    padding-inline: 10px !important;
    gap: 7px !important;
  }

  html body .about-trigger > span {
    font-size: 13px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  button.support-center-card.support-center-card-financial,
  button.support-center-card.support-center-card-financial::before {
    animation: none !important;
  }
}


/* =========================================================
   v46.8 - HAKKIMIZDA BALONU + DESTEK ÜYE BANKA BİLGİLERİ
   Bu blok en sonda yer alır ve eski Hakkımızda düğmesi kurallarını ezer.
   ========================================================= */

/* Yuvarlak, dikkat çeken ve sürekli hareket eden Hakkımızda balonu. */
html body .about-trigger,
html body #authArea > .about-trigger,
html body #authArea[data-auth-state="guest"] > .about-trigger,
html body #authArea[data-auth-state="user"] > .about-trigger,
html body #authArea:not([data-auth-state="user"]) > .about-trigger {
  position: relative !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  gap: 0 !important;
  flex: 0 0 54px !important;
  border-radius: 50% !important;
  color: #041013 !important;
  background:
    radial-gradient(circle at 31% 24%, rgba(255, 255, 255, 0.82), transparent 19%),
    radial-gradient(circle at 50% 65%, rgba(32, 255, 107, 0.30), transparent 55%),
    linear-gradient(145deg, #65f8ff 0%, #25d7e9 46%, #18d968 100%) !important;
  border: 2px solid rgba(200, 255, 255, 0.92) !important;
  box-shadow:
    inset 0 -7px 13px rgba(0, 68, 79, 0.23),
    inset 0 3px 6px rgba(255, 255, 255, 0.48),
    0 0 0 1px rgba(69, 243, 255, 0.18),
    0 8px 22px rgba(0, 0, 0, 0.30),
    0 0 20px rgba(69, 243, 255, 0.48) !important;
  overflow: visible !important;
  white-space: normal !important;
  cursor: pointer !important;
  isolation: isolate !important;
  -webkit-tap-highlight-color: transparent !important;
  animation:
    aboutBubbleFloat 2.6s ease-in-out infinite,
    aboutBubbleGlow 1.75s ease-in-out infinite !important;
}

html body .about-trigger > i {
  position: relative !important;
  z-index: 3 !important;
  color: #031215 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.30)) !important;
  animation: aboutBubbleIcon 2.2s ease-in-out infinite !important;
}

html body .about-trigger > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Dışarı doğru yayılan balon halkası. */
html body .about-trigger::before {
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;
  z-index: -1 !important;
  display: block !important;
  border-radius: 50% !important;
  border: 2px solid rgba(69, 243, 255, 0.62) !important;
  background: transparent !important;
  opacity: 0 !important;
  translate: none !important;
  transform: scale(0.82) !important;
  pointer-events: none !important;
  animation: aboutBubbleRing 1.9s ease-out infinite !important;
}

/* Masaüstünde balonun altında okunaklı Hakkımızda etiketi. */
html body .about-trigger::after {
  content: "Hakkımızda" !important;
  position: absolute !important;
  top: calc(100% + 9px) !important;
  left: 50% !important;
  z-index: 6 !important;
  display: block !important;
  width: max-content !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  color: #031013 !important;
  background: linear-gradient(135deg, #72f8ff, #31ef84) !important;
  border: 1px solid rgba(207, 255, 255, 0.78) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 0 14px rgba(69, 243, 255, 0.22) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.15px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate(-50%, -4px) scale(0.94) !important;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease !important;
  pointer-events: none !important;
}

html body .about-trigger:hover,
html body .about-trigger:focus-visible {
  color: #031013 !important;
  background:
    radial-gradient(circle at 31% 24%, rgba(255, 255, 255, 0.95), transparent 20%),
    radial-gradient(circle at 50% 65%, rgba(32, 255, 107, 0.40), transparent 57%),
    linear-gradient(145deg, #82fbff 0%, #37e7f5 45%, #28ef79 100%) !important;
  border-color: #ffffff !important;
  box-shadow:
    inset 0 -7px 13px rgba(0, 68, 79, 0.20),
    inset 0 3px 6px rgba(255, 255, 255, 0.55),
    0 0 0 2px rgba(69, 243, 255, 0.20),
    0 10px 25px rgba(0, 0, 0, 0.32),
    0 0 31px rgba(69, 243, 255, 0.67) !important;
}

html body .about-trigger:hover::after,
html body .about-trigger:focus-visible::after {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) scale(1) !important;
}

html body .about-trigger:active {
  transform: scale(0.94) !important;
}

@keyframes aboutBubbleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}

@keyframes aboutBubbleGlow {
  0%, 100% {
    box-shadow:
      inset 0 -7px 13px rgba(0, 68, 79, 0.23),
      inset 0 3px 6px rgba(255, 255, 255, 0.48),
      0 0 0 1px rgba(69, 243, 255, 0.18),
      0 8px 22px rgba(0, 0, 0, 0.30),
      0 0 17px rgba(69, 243, 255, 0.40);
  }
  50% {
    box-shadow:
      inset 0 -7px 13px rgba(0, 68, 79, 0.20),
      inset 0 3px 7px rgba(255, 255, 255, 0.58),
      0 0 0 2px rgba(69, 243, 255, 0.22),
      0 10px 24px rgba(0, 0, 0, 0.31),
      0 0 31px rgba(69, 243, 255, 0.72);
  }
}

@keyframes aboutBubbleRing {
  0% { opacity: 0.72; transform: scale(0.82); }
  75%, 100% { opacity: 0; transform: scale(1.35); }
}

@keyframes aboutBubbleIcon {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.10) rotate(-5deg); }
}

/* Destek Üye kartında eski Öne Çıkan rozeti hiçbir şekilde görünmesin. */
.support-card-highlight {
  display: none !important;
}

/* Destek Üye banka bilgisi kartı. */
.support-bank-card {
  margin-top: 14px !important;
  display: grid !important;
  gap: 10px !important;
}

.support-bank-row {
  display: grid !important;
  grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.3fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 13px !important;
  border-radius: 13px !important;
  color: #fff4c5 !important;
  background: rgba(255, 219, 98, 0.08) !important;
  border: 1px solid rgba(255, 223, 119, 0.26) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.support-bank-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #e9ce78 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.support-bank-label i {
  width: 18px !important;
  color: #ffd65f !important;
  text-align: center !important;
}

.support-bank-row > strong {
  min-width: 0 !important;
  color: #fff7d6 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
  overflow-wrap: anywhere !important;
}

.support-bank-iban {
  user-select: all !important;
  -webkit-user-select: all !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  letter-spacing: 0.25px !important;
}

.support-bank-note {
  padding: 12px 13px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  border-radius: 13px !important;
  color: #fff7d2 !important;
  background: linear-gradient(135deg, rgba(255, 202, 48, 0.17), rgba(255, 224, 120, 0.08)) !important;
  border: 1px solid rgba(255, 217, 94, 0.42) !important;
  font-weight: 850 !important;
  line-height: 1.5 !important;
}

.support-bank-note i {
  flex: 0 0 auto !important;
  margin-top: 2px !important;
  color: #ffd65f !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html body .about-trigger,
  html body #authArea > .about-trigger,
  html body #authArea[data-auth-state="guest"] > .about-trigger,
  html body #authArea[data-auth-state="user"] > .about-trigger,
  html body #authArea:not([data-auth-state="user"]) > .about-trigger {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    flex-basis: 50px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    margin: 2px auto 0 !important;
    justify-self: center !important;
  }

  html body .about-trigger::after {
    display: none !important;
  }

  #authArea[data-auth-state="guest"] > .about-trigger,
  #authArea:not([data-auth-state="user"]) > .about-trigger {
    grid-column: 1 / -1 !important;
  }

  #authArea[data-auth-state="user"] > .about-trigger {
    grid-column: 3 !important;
    justify-self: center !important;
  }

  button.support-center-card.support-center-card-financial {
    padding-top: 14px !important;
  }

  .support-bank-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

@media (max-width: 380px) {
  html body .about-trigger,
  html body #authArea > .about-trigger,
  html body #authArea[data-auth-state="user"] > .about-trigger {
    width: 47px !important;
    min-width: 47px !important;
    max-width: 47px !important;
    height: 47px !important;
    min-height: 47px !important;
    max-height: 47px !important;
    flex-basis: 47px !important;
  }

  html body .about-trigger > i {
    font-size: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .about-trigger,
  html body .about-trigger::before,
  html body .about-trigger > i {
    animation-duration: 4.5s !important;
  }
}


/* =========================================================
   v46.9 - PROFIL BOYUTUNDA HAKKIMIZDA BALONU + HAKKIMIZDA DESTEK PENCERESI
   ========================================================= */

/* Navbar profil avatarı 44x44 olduğu için Hakkımızda balonu da birebir 44x44'tür. */
html body .about-trigger,
html body #authArea > .about-trigger,
html body #authArea[data-auth-state="guest"] > .about-trigger,
html body #authArea[data-auth-state="user"] > .about-trigger,
html body #authArea:not([data-auth-state="user"]) > .about-trigger {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  flex: 0 0 44px !important;
  flex-basis: 44px !important;
  margin: 0 !important;
}

html body .about-trigger > i {
  font-size: 19px !important;
}

html body .about-trigger::before {
  inset: -5px !important;
}

@keyframes aboutBubbleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(1.5deg); }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse), (max-width: 380px) {
  html body .about-trigger,
  html body #authArea > .about-trigger,
  html body #authArea[data-auth-state="guest"] > .about-trigger,
  html body #authArea[data-auth-state="user"] > .about-trigger,
  html body #authArea:not([data-auth-state="user"]) > .about-trigger {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    flex-basis: 44px !important;
    margin: 0 auto !important;
  }

  html body .about-trigger > i {
    font-size: 19px !important;
  }
}

/* Hakkımızda penceresindeki altın Destek Ol butonu. */
.about-support-button {
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  justify-content: center !important;
  color: #241700 !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.58), transparent 25%),
    linear-gradient(135deg, #fff0a5 0%, #ffd24f 44%, #f0a900 100%) !important;
  border: 1px solid rgba(255, 239, 159, 0.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 10px 26px rgba(255, 185, 0, 0.24),
    0 0 20px rgba(255, 211, 79, 0.24) !important;
  animation: aboutSupportButtonGlow 2s ease-in-out infinite !important;
}

.about-support-button i,
.about-support-button span {
  position: relative !important;
  z-index: 2 !important;
}

.about-support-button i {
  color: #6f4700 !important;
}

.about-support-button:hover,
.about-support-button:focus-visible {
  color: #160e00 !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.72), transparent 27%),
    linear-gradient(135deg, #fff6c7 0%, #ffdc66 43%, #ffb800 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 12px 30px rgba(255, 185, 0, 0.34),
    0 0 29px rgba(255, 211, 79, 0.40) !important;
}

@keyframes aboutSupportButtonGlow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      0 10px 26px rgba(255, 185, 0, 0.22),
      0 0 15px rgba(255, 211, 79, 0.20);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.76),
      0 12px 30px rgba(255, 185, 0, 0.34),
      0 0 28px rgba(255, 211, 79, 0.43);
  }
}

/* Destek Ol butonundan açılan ayrı altın pencere. */
.about-support-modal {
  z-index: 2200 !important;
}

.about-support-box {
  width: min(560px, 94vw) !important;
  padding: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 218, 90, 0.64) !important;
  background:
    radial-gradient(circle at 8% 5%, rgba(255, 222, 104, 0.25), transparent 34%),
    radial-gradient(circle at 92% 14%, rgba(255, 177, 0, 0.15), transparent 31%),
    linear-gradient(180deg, rgba(43, 31, 6, 0.99), rgba(11, 13, 15, 0.99)) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.52),
    0 0 38px rgba(255, 194, 30, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.about-support-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 244, 186, 0.07) 45%, transparent 70%);
  transform: translateX(-100%);
  animation: aboutSupportModalShine 4.6s ease-in-out infinite;
}

.about-support-heading {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 60px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
  padding-right: 25px !important;
  text-align: left !important;
}

.about-support-icon {
  width: 60px !important;
  height: 60px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  color: #251700 !important;
  font-size: 25px !important;
  background: linear-gradient(145deg, #fff2aa, #ffd34f 48%, #eaa300) !important;
  border: 1px solid rgba(255, 243, 179, 0.92) !important;
  box-shadow: 0 0 25px rgba(255, 198, 26, 0.28) !important;
}

.about-support-heading h2 {
  margin: 0 0 5px !important;
  color: #fff4c2 !important;
  font-size: clamp(21px, 4vw, 27px) !important;
  line-height: 1.15 !important;
}

.about-support-heading p {
  margin: 0 !important;
  color: #e6d69b !important;
  line-height: 1.5 !important;
}

.about-support-bank-card {
  position: relative !important;
  z-index: 2 !important;
}

@keyframes aboutSupportModalShine {
  0%, 58% { transform: translateX(-110%); }
  78%, 100% { transform: translateX(115%); }
}

@media (max-width: 560px) {
  .about-support-box {
    padding: 20px 16px 17px !important;
  }

  .about-support-heading {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding-right: 18px !important;
  }

  .about-support-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 15px !important;
    font-size: 21px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-support-button,
  .about-support-box::before {
    animation: none !important;
  }
}

/* =========================================================
   v47.0 - MOBIL NAVBAR ORTALAMA + DESTEK MODALI OPTIMIZASYONU
   - Profil fotografi ve Hakkimizda balonu tek grup olarak ortalanir.
   - Destek penceresi tam ekran blur katmaninda tam merkeze gelir.
   - Mobil destek kutusu daha kompakt ve ekran icine optimize edilir.
   ========================================================= */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  /* Giris yapmis kullanicida profil + Hakkimizda birlikte tam merkez. */
  html body .navbar .nav-right[data-auth-state="user"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 9px !important;
    overflow: visible !important;
  }

  html body #authArea[data-auth-state="user"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 12px !important;
    grid-template-columns: none !important;
    transform: none !important;
    overflow: visible !important;
  }

  html body #authArea[data-auth-state="user"] > .profile-wrapper,
  html body #authArea[data-auth-state="user"] > .about-trigger {
    position: relative !important;
    inset: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    align-self: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body #authArea[data-auth-state="user"] > .profile-wrapper {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body #authArea[data-auth-state="user"] > .profile-wrapper > .nav-avatar,
  html body #authArea[data-auth-state="user"] > .profile-wrapper > .nav-avatar-shell,
  html body #authArea[data-auth-state="user"] > .profile-wrapper > .nav-avatar-fallback {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
  }

  html body #authArea[data-auth-state="user"] > .about-trigger {
    padding: 0 !important;
    border-radius: 50% !important;
  }

  /* Destek modalinin karartma/blur katmani tum mobil ekrani kaplar. */
  html body #supportModal.modal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding:
      calc(14px + env(safe-area-inset-top, 0px))
      14px
      calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center !important;
    justify-content: center !important;
    place-items: center !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: rgba(0, 3, 7, 0.84) !important;
    backdrop-filter: blur(15px) saturate(0.82) !important;
    -webkit-backdrop-filter: blur(15px) saturate(0.82) !important;
    z-index: 50000 !important;
    isolation: isolate !important;
    transform: none !important;
    clip-path: none !important;
  }

  html body #supportModal.modal[style*="flex"],
  html body #supportModal.modal[style*="block"] {
    display: flex !important;
  }

  html body #supportModal .support-modal-box {
    position: relative !important;
    flex: 0 1 auto !important;
    width: min(400px, calc(100dvw - 36px)) !important;
    min-width: 0 !important;
    max-width: calc(100dvw - 36px) !important;
    max-height: calc(100dvh - 42px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    margin: auto !important;
    padding: 20px 16px 17px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 19px !important;
    box-sizing: border-box !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body #supportModal .support-modal-box > .close {
    position: absolute !important;
    top: 9px !important;
    right: 12px !important;
    z-index: 4 !important;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    float: none !important;
    margin: 0 !important;
    font-size: 26px !important;
    line-height: 1 !important;
  }

  html body #supportModal .support-modal-box h2 {
    margin: 1px 42px 10px 0 !important;
    font-size: 23px !important;
    line-height: 1.2 !important;
  }

  html body #supportModal .support-intro {
    margin: 0 0 13px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  html body #supportModal .support-form {
    display: grid !important;
    gap: 9px !important;
  }

  html body #supportModal .support-form label {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }

  html body #supportModal .support-form select,
  html body #supportModal .support-form textarea,
  html body #supportModal .support-form button {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html body #supportModal .support-form select {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  html body #supportModal .support-form textarea {
    min-height: 96px !important;
    max-height: 24dvh !important;
    padding: 11px 12px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    resize: vertical !important;
  }

  html body #supportModal .support-form small {
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.42 !important;
  }

  html body #supportModal #supportSendBtn {
    min-height: 45px !important;
    margin-top: 2px !important;
    padding: 10px 13px !important;
    font-size: 13.5px !important;
  }

  /* Modal acikken arka sayfanin kaymasini engeller. */
  html body:has(#supportModal[style*="flex"]),
  html body:has(#supportModal[style*="block"]) {
    overflow: hidden !important;
    touch-action: none !important;
  }
}

@media (max-width: 380px) {
  html body #authArea[data-auth-state="user"] {
    gap: 10px !important;
  }

  html body #supportModal.modal {
    padding-inline: 10px !important;
  }

  html body #supportModal .support-modal-box {
    width: calc(100dvw - 24px) !important;
    max-width: calc(100dvw - 24px) !important;
    padding: 18px 14px 15px !important;
    border-radius: 17px !important;
  }

  html body #supportModal .support-modal-box h2 {
    font-size: 21px !important;
  }

  html body #supportModal .support-form textarea {
    min-height: 86px !important;
  }
}

/* =========================================================
   v47.1 - MOBIL DESTEK PENCERELERI TAM EKRAN MERKEZLEME
   - Hakkimizda > Destek Ol penceresi tam ortada ve kompakt.
   - Ana sayfadaki Destek balonunun merkezi tam ortada ve kompakt.
   - Tum destek pencerelerinde blur katmani gercek viewport'u kaplar.
   ========================================================= */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  /* Uc destek modalini de viewport'tan bagimsiz, gercek tam ekran katman yap. */
  html body #aboutSupportModal.modal,
  html body #supportCenterModal.modal,
  html body #supportModal.modal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    width: 100vw !important;
    width: 100dvw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    max-height: none !important;
    margin: 0 !important;
    padding:
      calc(12px + env(safe-area-inset-top, 0px))
      12px
      calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: rgba(0, 3, 7, 0.86) !important;
    backdrop-filter: blur(16px) saturate(0.78) !important;
    -webkit-backdrop-filter: blur(16px) saturate(0.78) !important;
    z-index: 60000 !important;
    isolation: isolate !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* Tarayicinin inline display degerinden bagimsiz olarak merkezde flex ac. */
  html body #aboutSupportModal.modal[style*="flex"],
  html body #aboutSupportModal.modal[style*="block"],
  html body #supportCenterModal.modal[style*="flex"],
  html body #supportCenterModal.modal[style*="block"],
  html body #supportModal.modal[style*="flex"],
  html body #supportModal.modal[style*="block"] {
    display: flex !important;
  }

  /* Hakkimizda icindeki altin Destek Ol penceresi. */
  html body #aboutSupportModal .about-support-box {
    position: relative !important;
    flex: 0 1 auto !important;
    width: min(370px, calc(100dvw - 34px)) !important;
    min-width: 0 !important;
    max-width: calc(100dvw - 34px) !important;
    max-height: calc(100dvh - 38px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    margin: auto !important;
    padding: 18px 14px 15px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body #aboutSupportModal .about-support-box > .close,
  html body #supportCenterModal .support-center-box > .close {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    z-index: 8 !important;
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    float: none !important;
    margin: 0 !important;
    font-size: 25px !important;
    line-height: 1 !important;
  }

  html body #aboutSupportModal .about-support-heading {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 0 13px !important;
    padding: 0 35px 0 0 !important;
    align-items: center !important;
  }

  html body #aboutSupportModal .about-support-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    font-size: 19px !important;
  }

  html body #aboutSupportModal .about-support-heading h2 {
    margin: 0 0 4px !important;
    font-size: 20px !important;
    line-height: 1.16 !important;
  }

  html body #aboutSupportModal .about-support-heading p {
    font-size: 12.5px !important;
    line-height: 1.42 !important;
  }

  html body #aboutSupportModal .support-bank-card {
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 15px !important;
  }

  html body #aboutSupportModal .support-bank-row {
    gap: 7px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  html body #aboutSupportModal .support-bank-label {
    font-size: 11px !important;
  }

  html body #aboutSupportModal .support-bank-row > strong,
  html body #aboutSupportModal .support-bank-iban {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  html body #aboutSupportModal .support-bank-note {
    padding: 10px !important;
    font-size: 11.5px !important;
    line-height: 1.42 !important;
  }

  /* Ana sayfadaki sol alt Destek balonundan acilan ilk pencere. */
  html body #supportCenterModal .support-center-box {
    position: relative !important;
    flex: 0 1 auto !important;
    width: min(390px, calc(100dvw - 32px)) !important;
    min-width: 0 !important;
    max-width: calc(100dvw - 32px) !important;
    max-height: calc(100dvh - 38px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    margin: auto !important;
    padding: 18px 14px 15px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body #supportCenterModal .support-center-heading {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 0 13px !important;
    padding-right: 34px !important;
    text-align: left !important;
  }

  html body #supportCenterModal .support-center-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex-basis: 46px !important;
    border-radius: 14px !important;
    font-size: 19px !important;
  }

  html body #supportCenterModal .support-center-heading h2 {
    margin: 0 0 3px !important;
    font-size: 21px !important;
    line-height: 1.15 !important;
  }

  html body #supportCenterModal .support-center-heading p {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  html body #supportCenterModal .support-center-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  html body #supportCenterModal button.support-center-card {
    width: 100% !important;
    min-height: 72px !important;
    padding: 10px 11px !important;
    gap: 10px !important;
    border-radius: 14px !important;
    text-align: left !important;
  }

  html body #supportCenterModal button.support-center-card > i {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
    font-size: 17px !important;
  }

  html body #supportCenterModal button.support-center-card strong {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
  }

  html body #supportCenterModal button.support-center-card small {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  html body #supportCenterModal .support-center-detail {
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /* Bu pencereler acikken arkadaki sayfa sabit kalsin. */
  html body:has(#aboutSupportModal[style*="flex"]),
  html body:has(#aboutSupportModal[style*="block"]),
  html body:has(#supportCenterModal[style*="flex"]),
  html body:has(#supportCenterModal[style*="block"]),
  html body:has(#supportModal[style*="flex"]),
  html body:has(#supportModal[style*="block"]) {
    overflow: hidden !important;
    touch-action: none !important;
  }
}

@media (max-width: 380px) {
  html body #aboutSupportModal.modal,
  html body #supportCenterModal.modal,
  html body #supportModal.modal {
    padding-inline: 9px !important;
  }

  html body #aboutSupportModal .about-support-box,
  html body #supportCenterModal .support-center-box {
    width: calc(100dvw - 22px) !important;
    max-width: calc(100dvw - 22px) !important;
    padding: 16px 12px 13px !important;
    border-radius: 16px !important;
  }

  html body #supportCenterModal button.support-center-card {
    min-height: 68px !important;
    padding: 9px 10px !important;
  }
}


/* =========================================================
   v47.2 - MOBIL DOSYA ICERIGI PENCERESI TAM EKRAN FIX
   - Modal katmani telefon ekraninin tamamini kaplar.
   - Bulanik arka plan viewport boyunca kesintisiz gorunur.
   - Icerik karti merkezde, daha kompakt ve kendi icinde kayar.
   ========================================================= */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  html body #gameFileContentsModal.game-file-contents-modal {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    width: 100vw !important;
    width: 100dvw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    max-height: none !important;
    margin: 0 !important;
    padding:
      calc(12px + env(safe-area-inset-top, 0px))
      12px
      calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: rgba(0, 3, 7, 0.88) !important;
    backdrop-filter: blur(16px) saturate(0.78) !important;
    -webkit-backdrop-filter: blur(16px) saturate(0.78) !important;
    z-index: 61000 !important;
    isolation: isolate !important;
    transform: none !important;
    clip-path: none !important;
    contain: none !important;
  }

  html body #gameFileContentsModal.game-file-contents-modal[style*="flex"],
  html body #gameFileContentsModal.game-file-contents-modal[style*="block"],
  html body #gameFileContentsModal.game-file-contents-modal[aria-hidden="false"],
  html body #gameFileContentsModal.game-file-contents-modal.active,
  html body #gameFileContentsModal.game-file-contents-modal.show,
  html body #gameFileContentsModal.game-file-contents-modal.is-open {
    display: flex !important;
  }

  html body #gameFileContentsModal .game-file-contents-box {
    position: relative !important;
    flex: 0 1 auto !important;
    width: min(390px, calc(100dvw - 32px)) !important;
    min-width: 0 !important;
    max-width: calc(100dvw - 32px) !important;
    max-height: calc(100dvh - 38px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    margin: auto !important;
    padding: 20px 14px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    transform: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body #gameFileContentsModal .game-file-contents-close {
    top: 8px !important;
    right: 9px !important;
    width: 35px !important;
    min-width: 35px !important;
    height: 35px !important;
    font-size: 23px !important;
    z-index: 8 !important;
  }

  html body #gameFileContentsModal .game-file-contents-kicker {
    margin: 0 40px 7px 0 !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  html body #gameFileContentsModal .game-file-contents-box h2 {
    margin: 0 !important;
    padding-right: 40px !important;
    font-size: 21px !important;
    line-height: 1.15 !important;
  }

  html body #gameFileContentsModal .game-file-contents-help {
    margin: 7px 0 11px !important;
    font-size: 12.5px !important;
    line-height: 1.42 !important;
  }

  html body #gameFileContentsModal .game-file-contents-text {
    max-height: min(55dvh, 410px) !important;
    padding: 12px !important;
    border-radius: 12px !important;
    font-size: 11.5px !important;
    line-height: 1.55 !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html:has(#gameFileContentsModal[aria-hidden="false"]),
  html body.game-file-contents-open,
  html body:has(#gameFileContentsModal[aria-hidden="false"]),
  html body:has(#gameFileContentsModal[style*="flex"]),
  html body:has(#gameFileContentsModal[style*="block"]) {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
}

@media (max-width: 380px) {
  html body #gameFileContentsModal.game-file-contents-modal {
    padding-inline: 9px !important;
  }

  html body #gameFileContentsModal .game-file-contents-box {
    width: calc(100dvw - 22px) !important;
    max-width: calc(100dvw - 22px) !important;
    padding: 18px 12px 12px !important;
    border-radius: 16px !important;
  }

  html body #gameFileContentsModal .game-file-contents-text {
    max-height: 52dvh !important;
    padding: 10px !important;
    font-size: 11px !important;
  }
}


/* =========================================================
   v48.0 - HIZ / FOTO STABILITE SON KATMAN
   ========================================================= */
.game-card-image-wrap,
.game-detail-cover-wrap {
  background: linear-gradient(135deg, rgba(69,243,255,.08), rgba(32,255,107,.04)), #07141c !important;
  overflow: hidden !important;
  contain: paint !important;
}

.game-card-image-wrap img,
.game-card > img,
.game-detail-cover {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #07141c !important;
  border: 0 !important;
}

.games-grid:not(.mobile-carousel-track) > .game-card {
  content-visibility: auto;
  contain-intrinsic-size: 430px 590px;
}

#gamesCarouselShell.mobile-carousel-active #gamesGrid > .game-card {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

#authArea .profile-wrapper,
#authArea .profile-wrapper > .nav-avatar,
#authArea .profile-wrapper > .nav-avatar-shell,
#authArea .profile-wrapper > .nav-avatar-fallback {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: visible !important;
}

#authArea .profile-wrapper > .nav-avatar-shell > .nav-avatar-crop,
.comment-avatar-wrap > .comment-avatar-crop,
.profile-photo-display-wrap {
  overflow: hidden !important;
  border-radius: 50% !important;
  background: #101820 !important;
}

#authArea .nav-avatar-photo,
.comment-avatar-crop .comment-avatar-img,
.profile-photo-display-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
}

#authArea .nav-avatar-photo {
  object-position: var(--nav-photo-position, 50% 50%) !important;
  transform: var(--nav-photo-transform, scale(1)) translateZ(0) !important;
  transform-origin: var(--nav-photo-position, 50% 50%) !important;
}

.comment-avatar-crop .comment-avatar-img {
  object-position: var(--comment-photo-position, 50% 50%) !important;
  transform: var(--comment-photo-transform, scale(1)) translateZ(0) !important;
  transform-origin: var(--comment-photo-position, 50% 50%) !important;
}

.profile-photo-display-img {
  object-position: var(--photo-position, 50% 50%) !important;
  transform: var(--photo-transform, scale(1)) translateZ(0) !important;
  transform-origin: var(--photo-position, 50% 50%) !important;
}

@media (max-width: 820px) {
  .navbar {
    contain: layout paint !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid {
    will-change: transform !important;
  }

  #gamesCarouselShell.mobile-carousel-active #gamesGrid .game-card-image-wrap > img {
    min-height: 0 !important;
  }
}

/* =========================================================
   v49.0 - FAVORI KALP + PROFIL ISTATISTIK + CERCEVE OTURMA
   ========================================================= */

/* PC'de Hakkımızda balonu profil fotoğrafına yapışmasın. */
@media (min-width: 821px) {
  html body #authArea[data-auth-state="user"] {
    gap: 22px !important;
  }

  html body #authArea[data-auth-state="user"] > .about-trigger {
    margin-left: 8px !important;
  }
}

/* Profil / yorum / navbar fotoğraflarında çerçeve fotoğrafı kesmesin. */
html body #authArea .profile-wrapper > .nav-avatar-shell {
  border: 0 !important;
  box-shadow:
    0 0 0 3px var(--avatar-frame-color, #45f3ff),
    0 0 16px var(--avatar-frame-glow, rgba(69,243,255,.45)) !important;
  background: #101820 !important;
  border-radius: 50% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body #authArea .profile-wrapper > .nav-avatar-shell > .nav-avatar-crop {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #101820 !important;
  box-sizing: border-box !important;
}

html body #authArea .profile-wrapper > .nav-avatar-shell > .nav-avatar-crop > .nav-avatar-photo {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: var(--nav-photo-position, 50% 50%) !important;
  transform: var(--nav-photo-transform, scale(1)) translateZ(0) !important;
  transform-origin: var(--nav-photo-position, 50% 50%) !important;
}

html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-cyan { --avatar-frame-color:#45f3ff; --avatar-frame-glow:rgba(69,243,255,.52); }
html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-blue { --avatar-frame-color:#2d8cff; --avatar-frame-glow:rgba(45,140,255,.52); }
html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-green { --avatar-frame-color:#34d399; --avatar-frame-glow:rgba(52,211,153,.52); }
html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-gold { --avatar-frame-color:#ffd166; --avatar-frame-glow:rgba(255,209,102,.55); }
html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-orange { --avatar-frame-color:#ff9f1c; --avatar-frame-glow:rgba(255,159,28,.52); }
html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-red { --avatar-frame-color:#ff4d4d; --avatar-frame-glow:rgba(255,77,77,.52); }
html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-purple { --avatar-frame-color:#9b5cff; --avatar-frame-glow:rgba(155,92,255,.52); }
html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-frame-pink { --avatar-frame-color:#ff6ec7; --avatar-frame-glow:rgba(255,110,199,.52); }

html body #profileContainer .profile-photo-display-wrap,
html body .profile-photo-display-wrap {
  width: 170px !important;
  height: 170px !important;
  min-width: 170px !important;
  min-height: 170px !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  background: #101820 !important;
  box-shadow:
    0 0 0 4px var(--profile-frame-color, #45f3ff),
    0 0 22px var(--profile-frame-glow, rgba(69,243,255,.40)) !important;
}

html body #profileContainer .profile-photo-display-img,
html body .profile-photo-display-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: var(--photo-position, 50% 50%) !important;
  transform: var(--photo-transform, scale(1)) translateZ(0) !important;
  transform-origin: var(--photo-position, 50% 50%) !important;
  background: #101820 !important;
}

@media (max-width: 520px) {
  html body #profileContainer .profile-photo-display-wrap,
  html body .profile-photo-display-wrap {
    width: 148px !important;
    height: 148px !important;
    min-width: 148px !important;
    min-height: 148px !important;
  }
}

/* Oyun kartı favori kalbi */
html body .game-card-image-wrap {
  position: relative !important;
}

html body .game-favorite-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 7 !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  background: rgba(2, 7, 12, .72) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.34), 0 0 14px rgba(69,243,255,.10) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
  transition: transform .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

html body .game-favorite-btn::after {
  display: none !important;
}

html body .game-favorite-btn i {
  font-size: 18px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

html body .game-favorite-btn:hover,
html body .game-favorite-btn:focus-visible {
  transform: translateY(-1px) scale(1.06) !important;
  background: rgba(15, 30, 38, .88) !important;
  color: #ff5c8a !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.38), 0 0 20px rgba(255,92,138,.22) !important;
}

html body .game-favorite-btn.is-favorited {
  color: #ff3f73 !important;
  background: rgba(45, 8, 20, .82) !important;
  border-color: rgba(255,92,138,.58) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.34), 0 0 20px rgba(255,63,115,.28) !important;
}

@media (max-width: 820px) {
  html body .game-favorite-btn {
    top: 9px !important;
    right: 9px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

/* Profil sayfası istatistikleri */
html body .profile-stats-panel {
  margin: 16px 0 4px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  background: radial-gradient(circle at top left, rgba(69,243,255,.12), transparent 42%), rgba(7, 18, 25, .72) !important;
  border: 1px solid rgba(69,243,255,.22) !important;
  box-shadow: inset 0 0 22px rgba(69,243,255,.035) !important;
}

html body .profile-stats-panel h3 {
  margin: 0 0 11px !important;
  color: #ffffff !important;
  font-size: 15px !important;
}

html body .profile-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body .profile-stat-card {
  min-width: 0 !important;
  min-height: 78px !important;
  padding: 10px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(12, 30, 40, .92), rgba(5, 15, 22, .92)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: #d8eeee !important;
}

html body .profile-stat-card i {
  color: var(--cyan) !important;
  font-size: 16px !important;
}

html body .profile-stat-card strong {
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

html body .profile-stat-card span {
  color: #9fb5bf !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

html body .profile-stat-card.is-loading {
  opacity: .72 !important;
}

@media (max-width: 380px) {
  html body .profile-stats-grid {
    gap: 6px !important;
  }

  html body .profile-stat-card {
    min-height: 72px !important;
    padding: 9px 4px !important;
  }

  html body .profile-stat-card strong {
    font-size: 19px !important;
  }

  html body .profile-stat-card span {
    font-size: 10px !important;
  }
}


/* =========================================================
   v51.0 - KART İÇİ FAVORİ KALBİ + NAV PROFİL ANİMASYON KİLİDİ
   - Favori kalbi sadece oyun kartının sağ üst iç köşesinde görünür.
   - Eski/yanlış konumlanan ana sayfa favori görünümü gizlenir.
   - Navbar profil fotoğrafı animasyon sınıfları tekrar çalışır.
   ========================================================= */

html body #homeSection #gamesGrid > .game-card {
  position: relative !important;
  overflow: hidden !important;
}

/* Eski sürümlerde yanlışlıkla gövdeye/alt aksiyona düşen favori kalbini kaldır. */
html body #homeSection #gamesGrid > .game-card .game-card-body > .game-favorite-btn,
html body #homeSection #gamesGrid > .game-card .game-card-inline-actions .game-favorite-btn,
html body #homeSection #gamesGrid > .game-card .game-card-action .game-favorite-btn,
html body #homeSection #gamesGrid > .game-card .game-card-tools .game-favorite-btn {
  display: none !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn.card-corner-favorite,
html body #homeSection #gamesGrid > .game-card > .game-favorite-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 60 !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(135deg, rgba(5, 16, 23, .84), rgba(5, 28, 36, .72)) !important;
  color: #ffffff !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 16px rgba(69,243,255,.14) !important;
  backdrop-filter: blur(12px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
  cursor: pointer !important;
  overflow: visible !important;
  transform: translateZ(0) scale(1) !important;
  transition:
    transform .22s cubic-bezier(.2, 1.25, .36, 1),
    color .20s ease,
    background .20s ease,
    border-color .20s ease,
    box-shadow .22s ease !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn::before,
html body #homeSection #gamesGrid > .game-card > .game-favorite-btn::after {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn::before {
  border: 1px solid rgba(255, 92, 138, .55) !important;
  transform: scale(.72) !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn::after {
  background: radial-gradient(circle, rgba(255, 92, 138, .36), transparent 62%) !important;
  transform: scale(.60) !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn .favorite-bubble {
  position: absolute !important;
  inset: 8px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,92,138,.22), transparent 66%) !important;
  opacity: 0 !important;
  transform: scale(.72) !important;
  pointer-events: none !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn i {
  position: relative !important;
  z-index: 2 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.16)) !important;
  transition: transform .22s cubic-bezier(.2, 1.35, .36, 1), filter .20s ease !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn .favorite-spark {
  position: absolute !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #ff5c8a !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn .favorite-spark.s1 { top: 4px !important; right: 9px !important; }
html body #homeSection #gamesGrid > .game-card > .game-favorite-btn .favorite-spark.s2 { bottom: 5px !important; right: 5px !important; }
html body #homeSection #gamesGrid > .game-card > .game-favorite-btn .favorite-spark.s3 { top: 12px !important; left: 4px !important; }

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn:hover,
html body #homeSection #gamesGrid > .game-card > .game-favorite-btn:focus-visible {
  transform: translateZ(0) scale(1.10) rotate(-4deg) !important;
  color: #ff5c8a !important;
  border-color: rgba(255,92,138,.58) !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.32), transparent 30%),
    linear-gradient(135deg, rgba(58, 9, 24, .90), rgba(7, 28, 36, .86)) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.46),
    0 0 24px rgba(255,92,138,.30),
    inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn:hover i,
html body #homeSection #gamesGrid > .game-card > .game-favorite-btn:focus-visible i {
  transform: scale(1.14) !important;
  filter: drop-shadow(0 0 9px rgba(255,92,138,.58)) !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn.is-favorited {
  color: #ff3f73 !important;
  border-color: rgba(255,92,138,.72) !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.30), transparent 30%),
    linear-gradient(135deg, rgba(79, 10, 30, .94), rgba(20, 7, 16, .86)) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.46),
    0 0 26px rgba(255,63,115,.34),
    inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn.is-favorited i {
  animation: xboxFavoriteHeartBeat 1.55s ease-in-out infinite !important;
  filter: drop-shadow(0 0 10px rgba(255,63,115,.60)) !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn.favorite-just-changed::before {
  animation: xboxFavoriteRingPop .50s ease-out both !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn.favorite-just-changed::after,
html body #homeSection #gamesGrid > .game-card > .game-favorite-btn.favorite-just-changed .favorite-bubble {
  animation: xboxFavoriteBubblePop .50s ease-out both !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn.favorite-just-changed .favorite-spark {
  animation: xboxFavoriteSpark .46s ease-out both !important;
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn.favorite-just-changed .favorite-spark.s2 { animation-delay: .04s !important; }
html body #homeSection #gamesGrid > .game-card > .game-favorite-btn.favorite-just-changed .favorite-spark.s3 { animation-delay: .08s !important; }

@keyframes xboxFavoriteHeartBeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.16); }
  28% { transform: scale(.98); }
  42% { transform: scale(1.10); }
  58% { transform: scale(1); }
}

@keyframes xboxFavoriteRingPop {
  0% { opacity: .85; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.56); }
}

@keyframes xboxFavoriteBubblePop {
  0% { opacity: .70; transform: scale(.50); }
  100% { opacity: 0; transform: scale(1.85); }
}

@keyframes xboxFavoriteSpark {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(.35); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--spark-x, 0), var(--spark-y, -12px), 0) scale(1); }
}

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn .favorite-spark.s1 { --spark-x: 7px; --spark-y: -13px; }
html body #homeSection #gamesGrid > .game-card > .game-favorite-btn .favorite-spark.s2 { --spark-x: 10px; --spark-y: 12px; }
html body #homeSection #gamesGrid > .game-card > .game-favorite-btn .favorite-spark.s3 { --spark-x: -12px; --spark-y: -7px; }

@media (max-width: 820px) {
  html body #homeSection #gamesGrid > .game-card > .game-favorite-btn.card-corner-favorite,
  html body #homeSection #gamesGrid > .game-card > .game-favorite-btn {
    top: 10px !important;
    right: 10px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }
}

/* Navbar profil animasyonu: v48/v49 boyut sabitlemeleri transform animasyonunu ezmesin. */
html body #authArea[data-auth-state="user"] > .profile-wrapper {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 6px 10px !important;
  overflow: visible !important;
  border-radius: 999px !important;
  transition: background .18s ease, transform .18s ease !important;
}

html body #authArea[data-auth-state="user"] > .profile-wrapper:hover {
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,.10) !important;
}

html body #authArea .profile-wrapper > .nav-avatar-shell,
html body #authArea .profile-wrapper > .nav-avatar-fallback {
  animation-fill-mode: both !important;
  transform-origin: center center !important;
  will-change: transform, box-shadow, filter !important;
}

html body #authArea .profile-wrapper > .nav-avatar-shell {
  border: 0 !important;
  box-shadow:
    0 0 0 3px var(--avatar-frame-color, #45f3ff),
    0 0 16px var(--avatar-frame-glow, rgba(69,243,255,.45)) !important;
  background: #101820 !important;
}

html body #authArea .profile-wrapper > .nav-avatar-shell > .nav-avatar-crop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-anim-pulse,
html body #authArea .profile-wrapper > .nav-avatar-fallback.avatar-anim-pulse {
  animation: xboxNavAvatarPulseFixed 1.8s ease-in-out infinite !important;
}

html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-anim-glow,
html body #authArea .profile-wrapper > .nav-avatar-fallback.avatar-anim-glow {
  animation: xboxNavAvatarGlowFixed 2s ease-in-out infinite alternate !important;
}

html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-anim-ring,
html body #authArea .profile-wrapper > .nav-avatar-fallback.avatar-anim-ring {
  animation: xboxNavAvatarRingFixed 3.2s linear infinite !important;
}

@keyframes xboxNavAvatarPulseFixed {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.10); }
}

@keyframes xboxNavAvatarGlowFixed {
  0% { box-shadow: 0 0 0 3px var(--avatar-frame-color, #45f3ff), 0 0 12px var(--avatar-frame-glow, rgba(69,243,255,.38)); }
  100% { box-shadow: 0 0 0 3px var(--avatar-frame-color, #45f3ff), 0 0 25px var(--avatar-frame-glow, rgba(69,243,255,.68)); }
}

@keyframes xboxNavAvatarRingFixed {
  0% { box-shadow: 0 0 0 3px var(--avatar-frame-color, #45f3ff), 0 0 13px var(--avatar-frame-glow, rgba(69,243,255,.42)); filter: hue-rotate(0deg); }
  100% { box-shadow: 0 0 0 3px var(--avatar-frame-color, #45f3ff), 0 0 13px var(--avatar-frame-glow, rgba(69,243,255,.42)); filter: hue-rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html body #homeSection #gamesGrid > .game-card > .game-favorite-btn.is-favorited i,
  html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-anim-pulse,
  html body #authArea .profile-wrapper > .nav-avatar-fallback.avatar-anim-pulse,
  html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-anim-glow,
  html body #authArea .profile-wrapper > .nav-avatar-fallback.avatar-anim-glow,
  html body #authArea .profile-wrapper > .nav-avatar-shell.avatar-anim-ring,
  html body #authArea .profile-wrapper > .nav-avatar-fallback.avatar-anim-ring {
    animation: none !important;
  }
}


/* =========================================================
   v51.0 - FAVORI YERI DETAY SAYFASI + PROFIL FOTO ORTALAMA FIX
   - Ana sayfa oyun kartlarındaki favori kalbi tamamen kaldırıldı.
   - Favori butonu sadece oyun detay kartının sağ üst iç kısmında görünür.
   - Profil fotoğrafı kırpma/oturma kaymasını azaltmak için merkezleme katmanı eklendi.
   ========================================================= */

html body #homeSection #gamesGrid > .game-card > .game-favorite-btn,
html body #homeSection #gamesGrid > .game-card .game-favorite-btn {
  display: none !important;
}

#gameDetailContainer .game-detail-card {
  position: relative !important;
}

#gameDetailContainer .game-detail-info {
  position: relative !important;
  padding-right: 92px !important;
}

#gameDetailContainer .game-detail-info > .game-favorite-btn.detail-corner-favorite {
  position: absolute !important;
  top: 6px !important;
  right: 4px !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(6,18,26,.94), rgba(14,42,34,.90)) !important;
  border: 1px solid rgba(69,243,255,.28) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.30), 0 0 18px rgba(69,243,255,.12) !important;
}

#gameDetailContainer .game-detail-info > .game-favorite-btn.detail-corner-favorite i {
  font-size: 23px !important;
}

#gameDetailContainer .game-detail-info > .game-favorite-btn.detail-corner-favorite:hover,
#gameDetailContainer .game-detail-info > .game-favorite-btn.detail-corner-favorite:focus-visible {
  transform: translateY(-2px) scale(1.05) !important;
}

#gameDetailContainer .game-detail-info > .game-favorite-btn.detail-corner-favorite.is-favorited {
  background: linear-gradient(135deg, rgba(80,10,22,.96), rgba(28,6,16,.96)) !important;
  border-color: rgba(255,110,140,.42) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.30), 0 0 22px rgba(255,82,117,.18) !important;
}

html body #profileContainer .profile-photo-display-wrap,
html body .profile-photo-display-wrap {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  isolation: isolate !important;
}

html body #profileContainer .profile-photo-display-img,
html body .profile-photo-display-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--photo-position, 50% 50%) !important;
  transform: var(--photo-transform, scale(1)) translateZ(0) !important;
  transform-origin: center center !important;
  backface-visibility: hidden !important;
}

html body #profileContainer .profile-photo-fallback,
html body .profile-photo-fallback {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 760px) {
  #gameDetailContainer .game-detail-info {
    padding-right: 0 !important;
    padding-top: 76px !important;
  }

  #gameDetailContainer .game-detail-info > .game-favorite-btn.detail-corner-favorite {
    top: 0 !important;
    right: 0 !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
  }
}


/* =========================================================
   v51.0 - DETAY SAYFASI FAVORI KALBI + PROFIL FOTO TAM OTURMA
   ========================================================= */

/* Ana sayfadaki oyun kartlarında favori/beğeni kalbi tamamen kaldırıldı. */
html body #homeSection #gamesGrid .game-favorite-btn,
html body #homeSection .game-card .game-favorite-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Kalp sadece oyun detay kartında, sağ üst boş alanda görünür. */
html body #gameDetailSection .game-detail-card {
  position: relative !important;
  overflow: visible !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: absolute !important;
  top: 28px !important;
  right: 30px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 80 !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 0 !important;
  margin: 0 !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.34), transparent 29%),
    linear-gradient(135deg, rgba(3, 18, 25, .88), rgba(10, 43, 52, .78)) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 22px rgba(69,243,255,.18) !important;
  backdrop-filter: blur(13px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.18) !important;
  cursor: pointer !important;
  overflow: visible !important;
  transform: translateZ(0) scale(1) !important;
  transition: transform .22s cubic-bezier(.2, 1.25, .36, 1), color .20s ease, background .20s ease, border-color .20s ease, box-shadow .22s ease !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite::before,
html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite::after {
  content: "" !important;
  position: absolute !important;
  inset: -5px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite::before {
  border: 1px solid rgba(255,92,138,.62) !important;
  transform: scale(.72) !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite::after {
  background: radial-gradient(circle, rgba(255,92,138,.42), transparent 63%) !important;
  transform: scale(.60) !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite i {
  position: relative !important;
  z-index: 2 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.18)) !important;
  transition: transform .22s cubic-bezier(.2, 1.35, .36, 1), filter .20s ease !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite .favorite-bubble {
  position: absolute !important;
  inset: 9px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,92,138,.24), transparent 66%) !important;
  opacity: 0 !important;
  transform: scale(.72) !important;
  pointer-events: none !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite .favorite-spark {
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ff5c8a !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite .favorite-spark.s1 { top: 5px !important; right: 12px !important; --spark-x: 9px; --spark-y: -15px; }
html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite .favorite-spark.s2 { bottom: 6px !important; right: 7px !important; --spark-x: 12px; --spark-y: 14px; }
html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite .favorite-spark.s3 { top: 16px !important; left: 5px !important; --spark-x: -14px; --spark-y: -8px; }

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite:hover,
html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite:focus-visible {
  transform: translateZ(0) scale(1.12) rotate(-4deg) !important;
  color: #ff5c8a !important;
  border-color: rgba(255,92,138,.62) !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.34), transparent 30%),
    linear-gradient(135deg, rgba(58, 9, 24, .92), rgba(7, 28, 36, .88)) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.48),
    0 0 28px rgba(255,92,138,.32),
    inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite:hover i,
html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite:focus-visible i {
  transform: scale(1.16) !important;
  filter: drop-shadow(0 0 10px rgba(255,92,138,.62)) !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite.is-favorited {
  color: #ff3f73 !important;
  border-color: rgba(255,92,138,.76) !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.30), transparent 30%),
    linear-gradient(135deg, rgba(79, 10, 30, .94), rgba(20, 7, 16, .86)) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.48),
    0 0 30px rgba(255,63,115,.38),
    inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite.is-favorited i {
  animation: xboxFavoriteHeartBeat 1.55s ease-in-out infinite !important;
  filter: drop-shadow(0 0 11px rgba(255,63,115,.65)) !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite.favorite-just-changed::before {
  animation: xboxFavoriteRingPop .50s ease-out both !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite.favorite-just-changed::after,
html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite.favorite-just-changed .favorite-bubble {
  animation: xboxFavoriteBubblePop .50s ease-out both !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite.favorite-just-changed .favorite-spark {
  animation: xboxFavoriteSpark .46s ease-out both !important;
}

html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite.favorite-just-changed .favorite-spark.s2 { animation-delay: .04s !important; }
html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite.favorite-just-changed .favorite-spark.s3 { animation-delay: .08s !important; }

@media (max-width: 820px) {
  html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite {
    top: 16px !important;
    right: 16px !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }

  html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite i {
    font-size: 21px !important;
  }
}

/* Profil fotoğrafı çerçeve içinde tam ortalansın; kayma yapan eski transform-origin eziliyor. */
html body #profileContainer .profile-photo-display-wrap,
html body .profile-photo-display-wrap {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  padding: 0 !important;
  isolation: isolate !important;
}

html body #profileContainer .profile-photo-display-img,
html body .profile-photo-display-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  display: block !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: var(--photo-position, 50% 50%) !important;
  transform: var(--photo-transform, scale(1)) translateZ(0) !important;
  transform-origin: center center !important;
}

html body #profileContainer .profile-photo-fallback,
html body .profile-photo-fallback {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   v52.0 - SADECE ISTENEN DUZELTMELER
   - Profil fotoğrafı ile Hakkımızda arası dengelendi.
   - Profilim fotoğrafı kayıtlı konumu uygular.
   - Detay sayfasında yuvarlak/duble favori butonu gizlenir.
   ========================================================= */

html body #authArea {
  gap: 10px !important;
}

html body #authArea .profile-wrapper {
  margin-right: 6px !important;
}

html body #authArea .about-trigger {
  margin-left: 0 !important;
}

html body #profileContainer .profile-photo-display-img,
html body .profile-photo-display-img {
  object-position: var(--photo-position, 50% 50%) !important;
  transform-origin: var(--photo-position, 50% 50%) !important;
}

/* Eski yuvarlak/duble favori butonu sadece detay bilgi alanında gizlensin. */
html body #gameDetailSection .game-detail-info > .game-favorite-btn,
html body #gameDetailContainer .game-detail-info > .game-favorite-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Asıl favori butonu sadece detay kartının sağ üstünde kalsın. */
html body #gameDetailSection .game-detail-card > .game-favorite-btn.detail-corner-favorite,
html body #gameDetailContainer .game-detail-card > .game-favorite-btn.detail-corner-favorite {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* =========================================================
   v53.0 - PROFIL/Hakkımızda ARASI + DAHA FAZLA GOSTER ANIMASYONU
   ========================================================= */

/* Gizli profil menüsü #authArea içinde flex boşluğu oluşturmasın. */
html body #authArea > #profileMenu.hidden,
html body #authArea > .profile-menu.hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Açık profil menüsü normal popup gibi kalsın; avatar ile Hakkımızda arasına yer kaplamasın. */
html body #authArea > #profileMenu,
html body #authArea > .profile-menu {
  position: absolute !important;
}

/* Profil fotoğrafı ile Hakkımızda balonu arası net kısa olsun. */
html body .nav-right {
  gap: 8px !important;
}

html body #authArea {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  column-gap: 8px !important;
}

html body #authArea .profile-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

html body #authArea .about-trigger {
  margin-left: 2px !important;
  flex: 0 0 auto !important;
}

/* Daha fazla göster ile gelen kartlar soldan sağa yumuşak girsin. */
html body #gamesGrid > .game-card.game-card-new-slide-in {
  opacity: 0;
  transform: translateX(-34px) translateY(8px);
  animation: xboxCardEnterLeftSoft .72s cubic-bezier(.18, .88, .24, 1) var(--card-enter-delay, 0ms) both;
  will-change: transform, opacity;
}

@keyframes xboxCardEnterLeftSoft {
  0% {
    opacity: 0;
    transform: translateX(-34px) translateY(8px);
  }

  65% {
    opacity: 1;
    transform: translateX(5px) translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #gamesGrid > .game-card.game-card-new-slide-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* =========================================================
   v55.0 - NAVBAR ESKI SIKI GORUNUM + OZELLESTIRME BASLANGIC
   ========================================================= */

html body .nav-right {
  gap: 10px !important;
  column-gap: 10px !important;
}

html body .nav-right > #adminNavBtn {
  margin-right: 0 !important;
}

html body .nav-right > #authArea {
  margin-left: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

html body #authArea {
  gap: 10px !important;
  column-gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

html body #authArea > .profile-wrapper {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

html body #authArea > .about-trigger {
  margin: 0 !important;
}


/* =========================================================
   v56.0 - NAVBAR GERCEK SIKI DUZEN + YORUM MINI PROFIL GLITCH
   ========================================================= */

/* Admin Panel - profil fotoğrafı - Hakkımızda eski sıkı hizaya dönsün. */
html body .navbar .nav-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  column-gap: 8px !important;
  flex-wrap: nowrap !important;
}

html body .navbar .nav-right > #adminNavBtn {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

html body .navbar .nav-right > #authArea {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  column-gap: 8px !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

html body .navbar #authArea > .profile-wrapper {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 50px !important;
  display: grid !important;
  place-items: center !important;
}

html body .navbar #authArea > .profile-wrapper .nav-avatar-shell,
html body .navbar #authArea > .profile-wrapper .nav-avatar-fallback {
  margin: 0 !important;
}

html body .navbar #authArea > .about-trigger {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 50px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
}

html body .navbar #authArea > .about-trigger span {
  display: none !important;
}

/* Yorum kullanıcı adı linki */
.comment-user-link {
  appearance: none !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  text-align: left !important;
  overflow: visible !important;
  text-shadow:
    0 0 8px rgba(69, 243, 255, .25),
    0 0 10px rgba(32, 255, 107, .16) !important;
  transition: color .16s ease, text-shadow .16s ease, transform .16s ease !important;
}

.comment-user-link::after {
  display: none !important;
}

.comment-user-link:hover,
.comment-user-link:focus-visible {
  color: #45f3ff !important;
  transform: translateY(-1px) !important;
  text-shadow:
    1px 0 0 rgba(32,255,107,.75),
    -1px 0 0 rgba(69,243,255,.75),
    0 0 14px rgba(69,243,255,.38) !important;
}

/* Küçük profil penceresi */
.mini-profile-popup {
  position: absolute !important;
  z-index: 20000 !important;
  color: #f4ffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(69, 243, 255, .48) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(69,243,255,.20), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(32,255,107,.18), transparent 42%),
    linear-gradient(135deg, rgba(3,13,18,.96), rgba(5,25,28,.96)) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.46),
    0 0 0 1px rgba(32,255,107,.12),
    0 0 30px rgba(69,243,255,.18) !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.18) !important;
}

.mini-profile-popup.hidden {
  display: none !important;
}

.mini-profile-popup::before,
.mini-profile-popup::after,
.mini-profile-glitch-layer {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

.mini-profile-popup::before {
  background:
    linear-gradient(90deg, transparent, rgba(69,243,255,.10), transparent),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px) !important;
  mix-blend-mode: screen !important;
  opacity: .72 !important;
}

.mini-profile-popup::after {
  border: 1px solid rgba(32,255,107,.30) !important;
  box-shadow:
    inset 0 0 24px rgba(69,243,255,.12),
    inset 0 0 18px rgba(32,255,107,.10) !important;
  opacity: .9 !important;
}

.mini-profile-glitch-layer {
  background:
    linear-gradient(90deg, rgba(32,255,107,.18), transparent 28%, rgba(69,243,255,.18) 62%, transparent) !important;
  opacity: 0 !important;
  transform: translateX(-22px) skewX(-10deg) !important;
}

.mini-profile-inner {
  position: relative !important;
  z-index: 2 !important;
  padding: 16px !important;
}

.mini-profile-glitch-in {
  animation: miniProfileGlitchIn .58s steps(2, end) both !important;
}

.mini-profile-glitch-in .mini-profile-glitch-layer {
  animation: miniProfileGlitchSweep .58s cubic-bezier(.18,.84,.28,1) both !important;
}

.mini-profile-glitch-in .mini-profile-inner {
  animation: miniProfileInnerIn .50s cubic-bezier(.18,.84,.28,1) both !important;
}

@keyframes miniProfileGlitchIn {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(.96) skewX(-4deg);
    filter: hue-rotate(0deg) saturate(1.4);
    clip-path: inset(0 0 76% 0);
  }

  12% {
    opacity: 1;
    transform: translateY(0) scale(1.02) skewX(4deg);
    clip-path: inset(48% 0 12% 0);
  }

  24% {
    transform: translateX(-7px) scale(.99) skewX(-6deg);
    clip-path: inset(12% 0 58% 0);
  }

  36% {
    transform: translateX(6px) scale(1.01) skewX(3deg);
    clip-path: inset(66% 0 8% 0);
  }

  52% {
    transform: translateX(-3px) translateY(1px) scale(1);
    clip-path: inset(0 0 0 0);
    filter: hue-rotate(16deg) saturate(1.7);
  }

  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
    filter: none;
  }
}

@keyframes miniProfileGlitchSweep {
  0% {
    opacity: 0;
    transform: translateX(-120%) skewX(-12deg);
  }

  20% {
    opacity: .95;
  }

  66% {
    opacity: .75;
    transform: translateX(86%) skewX(-12deg);
  }

  100% {
    opacity: 0;
    transform: translateX(130%) skewX(-12deg);
  }
}

@keyframes miniProfileInnerIn {
  0% {
    opacity: 0;
    transform: translateX(-10px);
    text-shadow:
      2px 0 0 rgba(32,255,107,.65),
      -2px 0 0 rgba(69,243,255,.65);
  }

  58% {
    opacity: 1;
    transform: translateX(2px);
    text-shadow:
      1px 0 0 rgba(32,255,107,.55),
      -1px 0 0 rgba(69,243,255,.55);
  }

  100% {
    opacity: 1;
    transform: none;
    text-shadow: none;
  }
}

.mini-profile-top {
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  gap: 13px !important;
  align-items: center !important;
}

.mini-profile-avatar,
.mini-profile-avatar-fallback {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid rgba(69,243,255,.82) !important;
  box-shadow:
    0 0 0 3px rgba(32,255,107,.12),
    0 0 18px rgba(69,243,255,.32) !important;
  background: rgba(3,13,18,.90) !important;
}

.mini-profile-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.mini-profile-avatar-fallback {
  display: grid !important;
  place-items: center !important;
  color: #021013 !important;
  font-size: 28px !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #45f3ff, #20ff6b) !important;
}

.mini-profile-main {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

.mini-profile-name {
  font-size: 17px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mini-profile-username {
  color: #9eefff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.mini-profile-role {
  width: max-content !important;
  max-width: 100% !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .2px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

.mini-role-admin { background: rgba(255,77,77,.18) !important; color: #ffb8b8 !important; }
.mini-role-operator { background: rgba(255,213,79,.17) !important; color: #ffe79b !important; }
.mini-role-supporter { background: rgba(45,140,255,.17) !important; color: #b9ddff !important; }
.mini-role-user { background: rgba(69,243,255,.13) !important; color: #c9fbff !important; }

.mini-profile-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

.mini-profile-stats > div {
  padding: 10px 8px !important;
  border-radius: 14px !important;
  text-align: center !important;
  background: rgba(2, 10, 14, .58) !important;
  border: 1px solid rgba(69,243,255,.16) !important;
  box-shadow: inset 0 0 16px rgba(69,243,255,.05) !important;
}

.mini-profile-stats i {
  display: block !important;
  color: #45f3ff !important;
  margin-bottom: 5px !important;
  filter: drop-shadow(0 0 7px rgba(69,243,255,.35)) !important;
}

.mini-profile-stats strong {
  display: block !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

.mini-profile-stats span {
  display: block !important;
  margin-top: 4px !important;
  color: #aee8e8 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.mini-profile-loading {
  min-height: 72px !important;
  display: grid !important;
  place-items: center !important;
  color: #bafcff !important;
  font-weight: 900 !important;
}

.mini-profile-close {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  z-index: 3 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(2,10,14,.55) !important;
  border: 1px solid rgba(69,243,255,.22) !important;
  color: #dff !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.mini-profile-close::after {
  display: none !important;
}

@media (max-width: 520px) {
  .mini-profile-popup {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
  }
}


/* =========================================================
   v58.0 - MINI PROFIL HIZ + KULLANICI ADI ALTINA SABITLEME
   ========================================================= */

.mini-profile-popup {
  position: absolute !important;
}

.mini-profile-popup.mini-profile-glitch-in {
  transform-origin: top center !important;
}


/* =========================================================
   v60.0 - MINI PROFIL ISTATISTIK PRELOAD + KART GLITCH
   ========================================================= */

html body #gamesGrid > .game-card.game-card-new-slide-in {
  animation-name: xboxCardGlitchEnterV60 !important;
}

@keyframes xboxCardGlitchEnterV60 {
  0% {
    opacity: 0;
    transform: translateX(-34px) translateY(8px) scale(.985) skewX(-4deg);
    filter: hue-rotate(0deg) saturate(1.4);
    clip-path: inset(0 0 76% 0);
  }

  14% {
    opacity: 1;
    transform: translateX(7px) scale(1.012) skewX(4deg);
    clip-path: inset(42% 0 10% 0);
  }

  28% {
    transform: translateX(-6px) scale(.998) skewX(-5deg);
    clip-path: inset(10% 0 58% 0);
  }

  44% {
    transform: translateX(5px) translateY(0) scale(1.006) skewX(2deg);
    clip-path: inset(66% 0 7% 0);
  }

  62% {
    opacity: 1;
    transform: translateX(-2px) translateY(0) scale(1);
    clip-path: inset(0 0 0 0);
    filter: hue-rotate(18deg) saturate(1.65);
  }

  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
    filter: none;
  }
}


/* =========================================================
   v63.0 - YORUM 10 / KART BUTON HIZA / KALP SAYISI
   ========================================================= */

/* Oyun kartı içindeki İndir / Hazırlanıyor / Dosya İçeriği alanları sağ köşeye hizalansın. */
html body .game-card {
  position: relative !important;
}

html body .game-card .game-card-actions,
html body .game-card .game-card-buttons,
html body .game-card .card-actions,
html body .game-card .game-actions,
html body .game-card .download-actions,
html body .game-card .game-download-actions,
html body .game-card .file-actions,
html body .game-card .game-card-footer {
  left: auto !important;
  right: 12px !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  text-align: right !important;
}

html body .game-card .download-btn,
html body .game-card .file-content-btn,
html body .game-card .file-btn,
html body .game-card .status-badge,
html body .game-card .status-preparing,
html body .game-card .preparing-badge,
html body .game-card a[href*="download"],
html body .game-card button[onclick*="download"],
html body .game-card button[onclick*="File"],
html body .game-card button[onclick*="file"] {
  margin-left: auto !important;
  margin-right: 0 !important;
  align-self: flex-end !important;
}

/* Ana sayfa kart sağ alt kalp sayısı */
html body .game-card .game-heart-count-badge {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 8 !important;
  min-width: 54px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(69,243,255,.22), transparent 36%),
    linear-gradient(135deg, rgba(3,13,18,.92), rgba(8,32,35,.92)) !important;
  border: 1px solid rgba(69,243,255,.32) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.32),
    0 0 16px rgba(69,243,255,.16) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  pointer-events: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

html body .game-card .game-heart-count-badge i {
  color: #ff4d6d !important;
  filter: drop-shadow(0 0 7px rgba(255,77,109,.45)) !important;
  font-size: 13px !important;
}

html body .game-card .game-heart-count-badge span {
  color: #f8ffff !important;
  line-height: 1 !important;
}

/* Kalp sayısı sağ altta olduğu için kart body butonlarla üst üste binmesin. */
html body .game-card .game-card-body {
  padding-bottom: 52px !important;
}


/* =========================================================
   v64.0 - ANA SAYFA KART KALP SAYISI KESIN ROZET
   ========================================================= */

html body #gamesGrid > .game-card {
  position: relative !important;
}

html body #gamesGrid > .game-card > .game-heart-count-badge {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 999 !important;
  min-width: 42px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: rgba(2, 7, 12, .88) !important;
  border: 1px solid rgba(69, 243, 255, .38) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.34),
    0 0 12px rgba(69,243,255,.16) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html body #gamesGrid > .game-card > .game-heart-count-badge i {
  color: #ff4d6d !important;
  font-size: 11px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 5px rgba(255,77,109,.45)) !important;
}

html body #gamesGrid > .game-card > .game-heart-count-badge span {
  display: inline-block !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}


/* =========================================================
   v65.0 - ROL YONETIMI BAN SEBEBI + OZEL SOHBET
   ========================================================= */

.role-chat-btn {
  background: linear-gradient(135deg, #45f3ff, #20ff6b) !important;
  color: #021013 !important;
  font-weight: 950 !important;
}

.role-private-chat-box,
.private-chat-panel {
  position: fixed !important;
  right: 18px !important;
  bottom: 112px !important;
  width: min(390px, calc(100vw - 24px)) !important;
  max-height: min(620px, calc(100vh - 130px)) !important;
  z-index: 30000 !important;
  display: grid !important;
  grid-template-rows: auto minmax(180px, 1fr) auto !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(69,243,255,.18), transparent 35%),
    radial-gradient(circle at 100% 100%, rgba(32,255,107,.14), transparent 42%),
    rgba(3, 13, 18, .96) !important;
  border: 1px solid rgba(69,243,255,.30) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.48), 0 0 28px rgba(69,243,255,.14) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.role-private-chat-box.hidden,
.private-chat-panel.hidden,
.private-chat-bubble.hidden {
  display: none !important;
}

.role-private-chat-head,
.private-chat-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 15px !important;
  border-bottom: 1px solid rgba(69,243,255,.18) !important;
  background: rgba(2,7,12,.42) !important;
}

.role-private-chat-head strong,
.private-chat-head strong {
  color: #fff !important;
  display: block !important;
}

.role-private-chat-head small,
.private-chat-head small {
  color: #9eefff !important;
  font-weight: 800 !important;
}

.role-private-chat-head button,
.private-chat-head button {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

.role-private-chat-messages,
.private-chat-messages {
  overflow-y: auto !important;
  padding: 14px !important;
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
}

.role-chat-message,
.private-chat-message {
  max-width: 86% !important;
  padding: 10px 12px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(69,243,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
}

.role-chat-message.mine,
.private-chat-message.mine {
  justify-self: end !important;
  background: linear-gradient(135deg, rgba(69,243,255,.20), rgba(32,255,107,.15)) !important;
}

.role-chat-message.other,
.private-chat-message.other {
  justify-self: start !important;
}

.role-chat-message p,
.private-chat-message p {
  margin: 5px 0 !important;
  white-space: pre-wrap !important;
  color: #fff !important;
}

.role-chat-message small,
.private-chat-message small {
  color: #a8c6c8 !important;
  font-size: 11px !important;
}

.role-private-chat-send,
.private-chat-send {
  padding: 12px !important;
  border-top: 1px solid rgba(69,243,255,.18) !important;
  display: grid !important;
  gap: 9px !important;
}

.role-private-chat-send textarea,
.private-chat-send textarea {
  width: 100% !important;
  min-height: 74px !important;
  resize: vertical !important;
  border-radius: 14px !important;
  border: 1px solid rgba(69,243,255,.22) !important;
  background: rgba(2,7,12,.72) !important;
  color: #fff !important;
  padding: 10px !important;
}

.role-chat-close-danger {
  background: linear-gradient(135deg, #e74c3c, #ff9f1c) !important;
  color: #fff !important;
}

.private-chat-bubble {
  position: fixed !important;
  right: 22px !important;
  bottom: 174px !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  z-index: 25000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  background: linear-gradient(135deg, #45f3ff, #20ff6b) !important;
  color: #021013 !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.38), 0 0 22px rgba(69,243,255,.28) !important;
}

.private-chat-bubble i {
  font-size: 24px !important;
}

#privateChatBadge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  display: none;
  place-items: center !important;
  padding: 0 6px !important;
  background: #ff4d6d !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

@media (max-width: 520px) {
  .role-private-chat-box,
  .private-chat-panel {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    bottom: 92px !important;
  }

  .private-chat-bubble {
    right: 16px !important;
    bottom: 158px !important;
  }
}


/* =========================================================
   v66.0 - INDIR / HAZIRLANIYOR / DOSYA ICERIGI HIZA + YORUM HIZ
   ========================================================= */

/* Oyun detayında kalp gerçek kart köşesinde; aksiyon butonları aynı sağ çizgiye oturur. */
html body #gameDetailContainer .game-detail-card {
  position: relative !important;
}

html body #gameDetailContainer .game-detail-card > .game-favorite-btn.detail-corner-favorite,
html body #gameDetailContainer .game-detail-card > .game-favorite-btn {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 30 !important;
}

html body #gameDetailContainer .game-detail-info {
  padding-right: 92px !important;
}

html body #gameDetailContainer .game-detail-actions.game-detail-tools,
html body #gameDetailContainer .game-detail-actions,
html body #gameDetailContainer .game-detail-tools {
  margin-left: auto !important;
  margin-right: 0 !important;
  width: max-content !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: right !important;
}

/* İndir / Hazırlanıyor / Dosya İçeriği kendi içinde sağa yaslansın. */
html body #gameDetailContainer .game-detail-actions .download-btn,
html body #gameDetailContainer .game-detail-actions .game-status.preparing,
html body #gameDetailContainer .game-detail-actions .download-warning,
html body #gameDetailContainer .game-detail-actions .game-file-contents-btn {
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: center !important;
}

/* Ana sayfa kart içinde bu aksiyonlar görünürse kalp butonuyla aynı sağ çizgiye gelir. */
html body #homeSection #gamesGrid > .game-card .game-card-action,
html body #homeSection #gamesGrid > .game-card .game-card-actions,
html body #homeSection #gamesGrid > .game-card .game-card-tools,
html body #homeSection #gamesGrid > .game-card .game-card-inline-actions {
  position: absolute !important;
  top: 64px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 62 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  text-align: right !important;
}

/* Yorum sayfa geçişlerinde gereksiz animasyon/gecikme olmasın. */
.comment-pagination button,
.comment-page-number {
  transition: background .12s ease, color .12s ease, border-color .12s ease !important;
}

@media (max-width: 760px) {
  html body #gameDetailContainer .game-detail-info {
    padding-right: 0 !important;
  }

  html body #gameDetailContainer .game-detail-card > .game-favorite-btn.detail-corner-favorite,
  html body #gameDetailContainer .game-detail-card > .game-favorite-btn {
    top: 14px !important;
    right: 14px !important;
  }

  html body #gameDetailContainer .game-detail-actions.game-detail-tools,
  html body #gameDetailContainer .game-detail-actions,
  html body #gameDetailContainer .game-detail-tools {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }
}


/* =========================================================
   v67.0 - DETAY AKSIYONLARI SAG ALT + ADBLOCK UYARI + ANLIK STATS
   ========================================================= */

html body #gameDetailContainer .game-detail-card {
  position: relative !important;
  padding-bottom: 94px !important;
}

/* Kalp kartın sağ üstünde kalır. */
html body #gameDetailContainer .game-detail-card > .game-favorite-btn.detail-corner-favorite,
html body #gameDetailContainer .game-detail-card > .game-favorite-btn {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 40 !important;
}

/* Dosya İçeriği + İndir/Hazırlanıyor kırmızıyla gösterilen sağ alt boşluğa gider. */
html body #gameDetailContainer .game-detail-card > .game-detail-actions.game-detail-tools,
html body #gameDetailContainer .game-detail-card > .game-detail-actions {
  position: absolute !important;
  right: 18px !important;
  bottom: 34px !important;
  left: auto !important;
  top: auto !important;
  z-index: 39 !important;
  width: auto !important;
  max-width: min(420px, calc(100% - 36px)) !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  text-align: right !important;
}

html body #gameDetailContainer .game-detail-card > .game-detail-actions .game-file-contents-btn,
html body #gameDetailContainer .game-detail-card > .game-detail-actions .download-btn,
html body #gameDetailContainer .game-detail-card > .game-detail-actions .game-status.preparing,
html body #gameDetailContainer .game-detail-card > .game-detail-actions .download-warning {
  margin: 0 !important;
  align-self: center !important;
  white-space: nowrap !important;
}

html body #gameDetailContainer .game-detail-info {
  padding-right: 92px !important;
}

.xbox-adblock-warning {
  position: fixed !important;
  left: 50% !important;
  top: 18px !important;
  transform: translateX(-50%) !important;
  width: min(560px, calc(100vw - 24px)) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(8,20,28,.98), rgba(22,14,4,.98)) !important;
  border: 1px solid rgba(255, 196, 64, .42) !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.45), 0 0 22px rgba(255,196,64,.14) !important;
  color: #fff !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.xbox-adblock-warning strong {
  display: block !important;
  color: #ffd45a !important;
  font-weight: 950 !important;
  margin-bottom: 3px !important;
}

.xbox-adblock-warning span {
  display: block !important;
  color: #eafcff !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.xbox-adblock-warning button {
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 9px 14px !important;
  font-weight: 950 !important;
  color: #071018 !important;
  background: linear-gradient(135deg, #ffd45a, #20ff6b) !important;
  cursor: pointer !important;
}

@media (max-width: 760px) {
  html body #gameDetailContainer .game-detail-card {
    padding-bottom: 118px !important;
  }

  html body #gameDetailContainer .game-detail-info {
    padding-right: 0 !important;
  }

  html body #gameDetailContainer .game-detail-card > .game-detail-actions.game-detail-tools,
  html body #gameDetailContainer .game-detail-card > .game-detail-actions {
    right: 14px !important;
    left: 14px !important;
    bottom: 22px !important;
    max-width: none !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    text-align: center !important;
  }

  .xbox-adblock-warning {
    top: 10px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}


/* =========================================================
   v68.0 - KART YORUM YUKLENIYOR TEMIZLIK + DETAY SAG ALT AKSIYON + ADBLOCK UYARI
   ========================================================= */

/* Ana sayfa kartlarının içinde yorum sistemi asla görünmesin. */
html body #homeSection #gamesGrid > .game-card .game-comments-section,
html body #homeSection #gamesGrid > .game-card #gameCommentsContainer,
html body #homeSection #gamesGrid > .game-card #gameCommentFormContainer,
html body #homeSection #gamesGrid > .game-card .comments-loading,
html body #homeSection #gamesGrid > .game-card .comment-login-card,
html body #homeSection #gamesGrid > .game-card .comment-notice,
html body #homeSection #gamesGrid > .game-card .empty-comments {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Detay sayfası: Dosya İçeriği + Hazırlanıyor/İndir kırmızıyla gösterilen sağ alt boşlukta. */
html body #gameDetailContainer .game-detail-card {
  position: relative !important;
  padding-bottom: 96px !important;
}

html body #gameDetailContainer .game-detail-card > .game-favorite-btn.detail-corner-favorite,
html body #gameDetailContainer .game-detail-card > .game-favorite-btn {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 50 !important;
}

html body #gameDetailContainer .game-detail-card > .game-detail-actions.game-detail-tools,
html body #gameDetailContainer .game-detail-card > .game-detail-actions.game-detail-bottom-right-actions,
html body #gameDetailContainer .game-detail-card > .game-detail-tools {
  position: absolute !important;
  right: 18px !important;
  bottom: 34px !important;
  left: auto !important;
  top: auto !important;
  z-index: 45 !important;
  width: auto !important;
  max-width: min(360px, calc(100% - 36px)) !important;
  margin: 0 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  text-align: right !important;
}

html body #gameDetailContainer .game-detail-card > .game-detail-actions .game-file-contents-btn,
html body #gameDetailContainer .game-detail-card > .game-detail-actions .download-btn,
html body #gameDetailContainer .game-detail-card > .game-detail-actions .game-status.preparing,
html body #gameDetailContainer .game-detail-card > .game-detail-actions .download-warning {
  margin: 0 !important;
  flex: 0 0 auto !important;
  align-self: center !important;
}

html body #gameDetailContainer .game-detail-card > .game-detail-actions .game-status.preparing {
  white-space: nowrap !important;
}

/* AdBlock uyarı balonu */
.adblock-warning-bubble {
  position: fixed !important;
  left: 50% !important;
  top: 18px !important;
  transform: translate(-50%, -18px) scale(.96) !important;
  z-index: 99999 !important;
  width: min(520px, calc(100vw - 24px)) !important;
  padding: 13px 44px 13px 15px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 213, 79, .48) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,213,79,.22), transparent 34%),
    rgba(8, 16, 20, .96) !important;
  color: #fff !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.44), 0 0 24px rgba(255,213,79,.14) !important;
  opacity: 0 !important;
  transition: opacity .22s ease, transform .22s ease !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.adblock-warning-bubble.is-visible {
  opacity: 1 !important;
  transform: translate(-50%, 0) scale(1) !important;
}

.adblock-warning-bubble strong {
  display: block !important;
  color: #ffd54f !important;
  font-weight: 950 !important;
  margin-bottom: 4px !important;
}

.adblock-warning-bubble span {
  display: block !important;
  color: #eefcff !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.adblock-warning-bubble button {
  position: absolute !important;
  right: 9px !important;
  top: 9px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

/* İçerik görünürlüğü kart içindeki yanlış ölçüm/glitch durumunu azaltır. */
html body #homeSection #gamesGrid > .game-card {
  contain: layout paint !important;
}

@media (max-width: 760px) {
  html body #gameDetailContainer .game-detail-card {
    padding-bottom: 104px !important;
  }

  html body #gameDetailContainer .game-detail-card > .game-detail-actions.game-detail-tools,
  html body #gameDetailContainer .game-detail-card > .game-detail-actions.game-detail-bottom-right-actions,
  html body #gameDetailContainer .game-detail-card > .game-detail-tools {
    right: 14px !important;
    bottom: 24px !important;
    max-width: calc(100% - 28px) !important;
    flex-wrap: wrap !important;
  }
}


/* =========================================================
   v70.0 - OZEL SOHBET BALONU HER IKI TARAFTA + KART YORUM TEMIZLIK
   ========================================================= */

/* Bildirim balonunun üstünde kalıcı özel sohbet balonu */
html body .private-chat-bubble {
  right: 22px !important;
  bottom: 174px !important;
  display: grid !important;
  z-index: 26000 !important;
}

html body .private-chat-bubble.hidden {
  display: none !important;
}

html body .private-chat-bubble.admin-side {
  background: linear-gradient(135deg, #ff4d6d, #45f3ff) !important;
}

html body .private-chat-bubble.user-side {
  background: linear-gradient(135deg, #45f3ff, #20ff6b) !important;
}

/* Ana sayfa oyun kartında yorum/loading ne düşerse düşsün görünmesin */
html body #homeSection #gamesGrid .game-card [id="gameCommentsContainer"],
html body #homeSection #gamesGrid .game-card [id="gameCommentFormContainer"],
html body #homeSection #gamesGrid .game-card .game-comments-section,
html body #homeSection #gamesGrid .game-card .comments-loading,
html body #homeSection #gamesGrid .game-card .comment-login-card,
html body #homeSection #gamesGrid .game-card .comment-notice,
html body #homeSection #gamesGrid .game-card .empty-comments,
html body #gamesGrid .game-card [id="gameCommentsContainer"],
html body #gamesGrid .game-card [id="gameCommentFormContainer"],
html body #gamesGrid .game-card .game-comments-section,
html body #gamesGrid .game-card .comments-loading,
html body #gamesGrid .game-card .comment-login-card,
html body #gamesGrid .game-card .comment-notice,
html body #gamesGrid .game-card .empty-comments {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 520px) {
  html body .private-chat-bubble {
    right: 16px !important;
    bottom: 158px !important;
  }
}


/* =========================================================
   v71.0 - OYUN YORUMLARI TAKILMA FIX
   ========================================================= */

html body #gameDetailContainer #gameCommentsContainer > .comments-loading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 84px !important;
}

/* Ana sayfa kartları içinde yorum yükleme metni yine de görünmesin. */
html body #gamesGrid .game-card * {
  word-break: normal !important;
}


/* =========================================================
   v72.0 - YORUM MODULU TAKILMA GUVENLI RETRY
   ========================================================= */
.game-comments-retry-card {
  display: grid !important;
  gap: 10px !important;
  align-items: start !important;
}

.game-comments-retry-card strong {
  color: #ffd54f !important;
}

.game-comments-retry-card button,
#gameCommentsContainer .comment-notice button {
  width: max-content !important;
  max-width: 100% !important;
  padding: 9px 13px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--cyan), var(--green)) !important;
  color: #02070c !important;
  font-weight: 950 !important;
}


/* =========================================================
   v73.0 - OYUN YORUM YEDEK RENDER
   ========================================================= */
.fallback-comments-note {
  margin-bottom: 12px !important;
  font-size: 13px !important;
}

.fallback-game-comment {
  display: block !important;
}

#gameCommentsContainer .empty-comments,
#gameCommentsContainer .comment-notice {
  min-height: 72px !important;
}


/* =========================================================
   v74.0 - YEDEK MOD KALDIRILDI / NORMAL YORUM MODU
   ========================================================= */
.fallback-comments-note {
  display: none !important;
}

#gameCommentsContainer .game-comment-list-v32 .comment-actions,
#gameCommentsContainer .game-comment-list-v32 .reply-form,
#gameCommentsContainer .game-comment-list-v32 .replies-box {
  visibility: visible !important;
}


/* =========================================================
   v75.0 - ANLIK OYUN YORUM RENDER
   ========================================================= */
#gameCommentsContainer .game-comment-list-v32 {
  min-height: 40px !important;
}

#gameCommentsContainer .comment-card {
  content-visibility: visible !important;
}


/* =========================================================
   v76.0 - YORUM YUKLENIYOR KILITLENME EMNIYETI
   ========================================================= */
#gameCommentsContainer .comment-notice.error {
  display: grid !important;
  gap: 8px !important;
}


/* =========================================================
   v77.0 - YORUM GIT-GEL FIX + OZEL SOHBET BALONU/BITIR
   ========================================================= */

/* Özel sohbet balonu bildirim balonunun tam üstünde */
html body .private-chat-bubble {
  position: fixed !important;
  right: 22px !important;
  bottom: 188px !important;
  z-index: 30050 !important;
}

html body .notification-bubble,
html body #notificationBubble,
html body .notifications-bubble {
  z-index: 30040 !important;
}

.private-chat-head-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.private-chat-end-btn {
  border: 1px solid rgba(255, 77, 109, .55) !important;
  background: linear-gradient(135deg, rgba(255,77,109,.95), rgba(255,177,66,.88)) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 7px 11px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 22px rgba(255,77,109,.18) !important;
}

.private-chat-end-btn[hidden] {
  display: none !important;
}

.private-chat-end-btn.bottom {
  width: 100% !important;
  justify-content: center !important;
  margin-top: 8px !important;
}

#gameCommentsContainer .game-comment-list-v32 {
  animation: none !important;
}

@media (max-width: 520px) {
  html body .private-chat-bubble {
    right: 16px !important;
    bottom: 176px !important;
  }
}


/* =========================================================
   v78.0 - YANITLAR YERINDE ACILSIN + GLITCH PANEL
   ========================================================= */

/* Özel sohbet balonu sol tarafta, bildirim balonunun tam üstünde */
html body .private-chat-bubble {
  left: 22px !important;
  right: auto !important;
  bottom: 188px !important;
  z-index: 31050 !important;
}

html body .notification-bubble,
html body #notificationBubble,
html body .notifications-bubble {
  left: 22px !important;
  right: auto !important;
  z-index: 31040 !important;
}

/* Sağ üstte sadece kapatma X kalsın, sohbeti bitir butonu altta kalsın */
.private-chat-head .private-chat-end-btn:not(.bottom) {
  display: none !important;
}

.private-chat-head-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Yanıt kutusu sadece kendi içinde açılır; tüm yorum listesi tekrar çizilmiş gibi görünmez. */
#gameCommentsContainer .replies-box {
  will-change: opacity, transform !important;
}

#gameCommentsContainer .replies-box.replies-glitch-in {
  animation: xboxReplyOpenGlitch .26s ease both !important;
}

@keyframes xboxReplyOpenGlitch {
  0% { opacity: 0; transform: translateY(-6px) skewX(-2deg); filter: hue-rotate(35deg); }
  45% { opacity: 1; transform: translateY(2px) skewX(2deg); filter: hue-rotate(-20deg); }
  100% { opacity: 1; transform: translateY(0) skewX(0); filter: none; }
}

/* Bildirim ve özel sohbet paneli açılırken glitch efekti */
.panel-glitch-in {
  animation: xboxPanelGlitchIn .34s cubic-bezier(.22,1,.36,1) both !important;
}

@keyframes xboxPanelGlitchIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(.96) skewX(-3deg);
    filter: hue-rotate(65deg) saturate(1.4);
    clip-path: inset(0 0 86% 0);
  }
  22% {
    opacity: 1;
    transform: translateY(-4px) scale(1.01) skewX(3deg);
    clip-path: inset(18% 0 44% 0);
  }
  44% {
    transform: translateY(2px) scale(.995) skewX(-2deg);
    clip-path: inset(46% 0 17% 0);
  }
  68% {
    transform: translateY(0) scale(1) skewX(1deg);
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) skewX(0);
    filter: none;
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 520px) {
  html body .private-chat-bubble {
    left: 16px !important;
    right: auto !important;
    bottom: 176px !important;
  }

  html body .notification-bubble,
  html body #notificationBubble,
  html body .notifications-bubble {
    left: 16px !important;
    right: auto !important;
  }
}


/* =========================================================
   v79.0 - SOL BALONLAR TAM HIZALI / DIP DIPE + SOHBET PANEL SOLDA
   ========================================================= */

:root {
  --xbox-float-left: 22px;
  --xbox-float-size: 56px;
  --xbox-float-gap: 12px;
  --xbox-weather-height: 64px;
}

/* Balonların ortak kabı: sol çizgi tek, aralık sabit */
html body .floating-support-tools {
  position: fixed !important;
  left: var(--xbox-float-left) !important;
  right: auto !important;
  bottom: calc(var(--xbox-weather-height) + 14px) !important;
  width: var(--xbox-float-size) !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--xbox-float-gap) !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Sorun bildir + bildirim aynı hizada */
html body .floating-support-tools .support-bubble,
html body .floating-support-tools .notification-bubble,
html body .support-bubble,
html body .notification-bubble,
html body #supportBubble,
html body #notificationBubble {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: var(--xbox-float-size) !important;
  height: var(--xbox-float-size) !important;
  min-width: var(--xbox-float-size) !important;
  max-width: var(--xbox-float-size) !important;
  min-height: var(--xbox-float-size) !important;
  max-height: var(--xbox-float-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 var(--xbox-float-size) !important;
  pointer-events: auto !important;
}

/* Özel sohbet balonu: bildirim balonunun tam üstünde, aynı sol çizgide */
html body .private-chat-bubble {
  position: fixed !important;
  left: var(--xbox-float-left) !important;
  right: auto !important;
  bottom: calc(var(--xbox-weather-height) + 14px + (var(--xbox-float-size) * 2) + (var(--xbox-float-gap) * 2)) !important;
  width: var(--xbox-float-size) !important;
  height: var(--xbox-float-size) !important;
  min-width: var(--xbox-float-size) !important;
  max-width: var(--xbox-float-size) !important;
  min-height: var(--xbox-float-size) !important;
  max-height: var(--xbox-float-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
  z-index: 1000000 !important;
}

html body .private-chat-bubble.hidden {
  display: none !important;
}

/* Hover eski kurallardan kaydırmasın */
html body .support-bubble:hover,
html body .notification-bubble:hover,
html body .private-chat-bubble:hover {
  transform: scale(1.04) !important;
}

/* Tooltipler sağa doğru açılsın, balonları kaydırmasın */
html body .support-bubble::before,
html body .notification-bubble::before,
html body .private-chat-bubble::before {
  left: calc(var(--xbox-float-size) + 10px) !important;
  right: auto !important;
  bottom: 8px !important;
  transform: translateX(-4px) !important;
}

/* Özel sohbet paneli sola taşındı */
html body .private-chat-panel {
  left: var(--xbox-float-left) !important;
  right: auto !important;
  bottom: calc(var(--xbox-weather-height) + 14px) !important;
  width: min(390px, calc(100vw - 34px)) !important;
  transform-origin: left bottom !important;
}

/* Rol yönetimindeki admin chat kutusu sağda kalabilir; kullanıcı özel paneli solda */
html body .role-private-chat-box {
  right: 18px !important;
  left: auto !important;
}

/* Bildirim paneli de balon gibi soldan açılsın */
html body #notificationPanel,
html body .notification-panel {
  left: var(--xbox-float-left) !important;
  right: auto !important;
  transform-origin: left bottom !important;
}

@media (max-width: 520px) {
  :root {
    --xbox-float-left: 16px;
    --xbox-float-size: 56px;
    --xbox-float-gap: 10px;
    --xbox-weather-height: 64px;
  }

  html body .private-chat-panel {
    left: 10px !important;
    right: auto !important;
    bottom: calc(var(--xbox-weather-height) + 10px) !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  html body #notificationPanel,
  html body .notification-panel {
    left: 10px !important;
    right: auto !important;
    max-width: calc(100vw - 20px) !important;
  }
}


/* =========================================================
   v80.0 - BALONLAR TAM SOL KOSE / SIRA: DESTEK-BILDIRIM-SOHBET
   ========================================================= */

:root {
  --xbox-float-left: 6px;
  --xbox-float-bottom: 74px;
  --xbox-float-size: 56px;
  --xbox-float-gap: 8px;
  --xbox-panel-left: calc(var(--xbox-float-left) + var(--xbox-float-size) + 10px);
}

/* Ana balon kabı: tam sol köşe, en altta destek, üstünde bildirim */
html body .floating-support-tools {
  position: fixed !important;
  left: var(--xbox-float-left) !important;
  right: auto !important;
  bottom: var(--xbox-float-bottom) !important;
  width: var(--xbox-float-size) !important;
  min-width: var(--xbox-float-size) !important;
  max-width: var(--xbox-float-size) !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--xbox-float-gap) !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Destek ve bildirim aynı sol çizgide */
html body .floating-support-tools .support-bubble,
html body .floating-support-tools .notification-bubble,
html body #supportBubble,
html body #notificationBubble,
html body .support-bubble,
html body .notification-bubble {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: var(--xbox-float-size) !important;
  height: var(--xbox-float-size) !important;
  min-width: var(--xbox-float-size) !important;
  max-width: var(--xbox-float-size) !important;
  min-height: var(--xbox-float-size) !important;
  max-height: var(--xbox-float-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 var(--xbox-float-size) !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Özel sohbet en üstte: destek + bildirim + aralıkların üstü */
html body .private-chat-bubble {
  position: fixed !important;
  left: var(--xbox-float-left) !important;
  right: auto !important;
  bottom: calc(var(--xbox-float-bottom) + (var(--xbox-float-size) * 2) + (var(--xbox-float-gap) * 2)) !important;
  width: var(--xbox-float-size) !important;
  height: var(--xbox-float-size) !important;
  min-width: var(--xbox-float-size) !important;
  max-width: var(--xbox-float-size) !important;
  min-height: var(--xbox-float-size) !important;
  max-height: var(--xbox-float-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
  z-index: 1000000 !important;
}

html body .private-chat-bubble.hidden {
  display: none !important;
}

/* Hover eski kaydırmayı bozmasın */
html body .support-bubble:hover,
html body .notification-bubble:hover,
html body .private-chat-bubble:hover {
  transform: scale(1.04) !important;
}

/* Paneller balonlara göre soldan, balonun sağından açılır */
html body .private-chat-panel {
  position: fixed !important;
  left: var(--xbox-panel-left) !important;
  right: auto !important;
  bottom: var(--xbox-float-bottom) !important;
  width: min(390px, calc(100vw - var(--xbox-panel-left) - 10px)) !important;
  max-width: min(390px, calc(100vw - var(--xbox-panel-left) - 10px)) !important;
  transform-origin: left bottom !important;
  z-index: 1000001 !important;
}

/* Bildirim paneli bildirim balonuna göre aynı panel çizgisinden açılsın */
html body #notificationPanel,
html body .notification-panel {
  position: fixed !important;
  left: var(--xbox-panel-left) !important;
  right: auto !important;
  bottom: calc(var(--xbox-float-bottom) + var(--xbox-float-size) + var(--xbox-float-gap)) !important;
  width: min(390px, calc(100vw - var(--xbox-panel-left) - 10px)) !important;
  max-width: min(390px, calc(100vw - var(--xbox-panel-left) - 10px)) !important;
  transform-origin: left bottom !important;
  z-index: 1000001 !important;
}

/* Rol yönetimindeki admin sohbet kutusu kendi yerinde kalsın */
html body .role-private-chat-box {
  left: auto !important;
  right: 18px !important;
}

/* Tooltipler panel tarafına doğru açılsın */
html body .support-bubble::before,
html body .notification-bubble::before,
html body .private-chat-bubble::before {
  left: calc(var(--xbox-float-size) + 10px) !important;
  right: auto !important;
  bottom: 8px !important;
  transform: translateX(-4px) !important;
}

/* Hava durumu çubuğu varsa balonları ezmesin */
html body .weather-widget,
html body #weatherWidget,
html body .weather-card {
  z-index: 999998 !important;
}

@media (max-width: 520px) {
  :root {
    --xbox-float-left: 4px;
    --xbox-float-bottom: 72px;
    --xbox-float-size: 54px;
    --xbox-float-gap: 8px;
    --xbox-panel-left: calc(var(--xbox-float-left) + var(--xbox-float-size) + 8px);
  }

  html body .private-chat-panel,
  html body #notificationPanel,
  html body .notification-panel {
    left: var(--xbox-panel-left) !important;
    right: auto !important;
    width: calc(100vw - var(--xbox-panel-left) - 8px) !important;
    max-width: calc(100vw - var(--xbox-panel-left) - 8px) !important;
  }
}

/* Çok dar ekranda panel balonları kapatmasın diye panel tam genişliğe yaklaşır */
@media (max-width: 360px) {
  :root {
    --xbox-panel-left: 64px;
  }
}


/* =========================================================
   v81.0 - TAM SOL KOSE SIRALAMA FINAL
   Destek en altta, onun üstü Bildirim, onun üstü Özel Sohbet
   ========================================================= */
:root {
  --xbox-final-left: 6px;
  --xbox-final-size: 56px;
  --xbox-final-gap: 8px;
  --xbox-final-support-bottom: 74px;
  --xbox-final-notification-bottom: calc(var(--xbox-final-support-bottom) + var(--xbox-final-size) + var(--xbox-final-gap));
  --xbox-final-private-bottom: calc(var(--xbox-final-notification-bottom) + var(--xbox-final-size) + var(--xbox-final-gap));
  --xbox-final-panel-left: calc(var(--xbox-final-left) + var(--xbox-final-size) + 10px);
}

/* eski flex dizilim etkisini kaldır */
html body .floating-support-tools {
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  left: auto !important;
  bottom: auto !important;
  display: block !important;
  pointer-events: none !important;
}

/* Destek balonu: en altta */
html body .support-bubble,
html body #supportBubble,
html body .floating-support-tools .support-bubble {
  position: fixed !important;
  left: var(--xbox-final-left) !important;
  right: auto !important;
  bottom: var(--xbox-final-support-bottom) !important;
  top: auto !important;
  width: var(--xbox-final-size) !important;
  height: var(--xbox-final-size) !important;
  min-width: var(--xbox-final-size) !important;
  min-height: var(--xbox-final-size) !important;
  max-width: var(--xbox-final-size) !important;
  max-height: var(--xbox-final-size) !important;
  margin: 0 !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
  z-index: 1000010 !important;
  pointer-events: auto !important;
}

/* Bildirim balonu: destek üstü */
html body .notification-bubble,
html body #notificationBubble,
html body .floating-support-tools .notification-bubble {
  position: fixed !important;
  left: var(--xbox-final-left) !important;
  right: auto !important;
  bottom: var(--xbox-final-notification-bottom) !important;
  top: auto !important;
  width: var(--xbox-final-size) !important;
  height: var(--xbox-final-size) !important;
  min-width: var(--xbox-final-size) !important;
  min-height: var(--xbox-final-size) !important;
  max-width: var(--xbox-final-size) !important;
  max-height: var(--xbox-final-size) !important;
  margin: 0 !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
  z-index: 1000011 !important;
  pointer-events: auto !important;
}

/* Özel sohbet balonu: bildirim üstü */
html body .private-chat-bubble {
  position: fixed !important;
  left: var(--xbox-final-left) !important;
  right: auto !important;
  bottom: var(--xbox-final-private-bottom) !important;
  top: auto !important;
  width: var(--xbox-final-size) !important;
  height: var(--xbox-final-size) !important;
  min-width: var(--xbox-final-size) !important;
  min-height: var(--xbox-final-size) !important;
  max-width: var(--xbox-final-size) !important;
  max-height: var(--xbox-final-size) !important;
  margin: 0 !important;
  transform: none !important;
  display: grid !important;
  place-items: center !important;
  z-index: 1000012 !important;
}
html body .private-chat-bubble.hidden { display: none !important; }

/* hover kaydırmasın */
html body .support-bubble:hover,
html body .notification-bubble:hover,
html body .private-chat-bubble:hover {
  transform: scale(1.04) !important;
}

/* tooltip sağa doğru açılsın */
html body .support-bubble::before,
html body .notification-bubble::before,
html body .private-chat-bubble::before {
  left: calc(var(--xbox-final-size) + 10px) !important;
  right: auto !important;
}

/* Paneller balon hizasına göre açılsın */
html body #notificationPanel,
html body .notification-panel {
  position: fixed !important;
  left: var(--xbox-final-panel-left) !important;
  right: auto !important;
  bottom: var(--xbox-final-notification-bottom) !important;
  transform-origin: left bottom !important;
  width: min(390px, calc(100vw - var(--xbox-final-panel-left) - 10px)) !important;
  max-width: min(390px, calc(100vw - var(--xbox-final-panel-left) - 10px)) !important;
  z-index: 1000015 !important;
}

html body .private-chat-panel {
  position: fixed !important;
  left: var(--xbox-final-panel-left) !important;
  right: auto !important;
  bottom: var(--xbox-final-private-bottom) !important;
  transform-origin: left bottom !important;
  width: min(390px, calc(100vw - var(--xbox-final-panel-left) - 10px)) !important;
  max-width: min(390px, calc(100vw - var(--xbox-final-panel-left) - 10px)) !important;
  z-index: 1000016 !important;
}

@media (max-width: 520px) {
  :root {
    --xbox-final-left: 6px;
    --xbox-final-size: 54px;
    --xbox-final-gap: 8px;
    --xbox-final-support-bottom: 72px;
    --xbox-final-panel-left: calc(var(--xbox-final-left) + var(--xbox-final-size) + 8px);
  }
  html body #notificationPanel,
  html body .notification-panel,
  html body .private-chat-panel {
    width: calc(100vw - var(--xbox-final-panel-left) - 8px) !important;
    max-width: calc(100vw - var(--xbox-final-panel-left) - 8px) !important;
  }
}


/* =========================================================
   v82.0 - ROL SOHBET TEK SOL PANEL + BALONLAR EN ALTA
   ========================================================= */

/* Rol yönetimindeki sağ özel sohbet kutusu artık hiç görünmesin */
html body #rolePrivateChatBox,
html body .role-private-chat-box {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Balonları daha aşağı, tam alta yaklaştır */
:root {
  --xbox-final-left: 6px;
  --xbox-final-size: 56px;
  --xbox-final-gap: 8px;
  --xbox-final-support-bottom: 12px;
  --xbox-final-notification-bottom: calc(var(--xbox-final-support-bottom) + var(--xbox-final-size) + var(--xbox-final-gap));
  --xbox-final-private-bottom: calc(var(--xbox-final-notification-bottom) + var(--xbox-final-size) + var(--xbox-final-gap));
  --xbox-final-panel-left: calc(var(--xbox-final-left) + var(--xbox-final-size) + 10px);
}

/* Sıra final: destek en altta, bildirim üstte, özel sohbet en üstte */
html body .support-bubble,
html body #supportBubble,
html body .floating-support-tools .support-bubble {
  position: fixed !important;
  left: var(--xbox-final-left) !important;
  right: auto !important;
  bottom: var(--xbox-final-support-bottom) !important;
  top: auto !important;
}

html body .notification-bubble,
html body #notificationBubble,
html body .floating-support-tools .notification-bubble {
  position: fixed !important;
  left: var(--xbox-final-left) !important;
  right: auto !important;
  bottom: var(--xbox-final-notification-bottom) !important;
  top: auto !important;
}

html body .private-chat-bubble {
  position: fixed !important;
  left: var(--xbox-final-left) !important;
  right: auto !important;
  bottom: var(--xbox-final-private-bottom) !important;
  top: auto !important;
}

/* Paneller de bu yeni alçak balon hizasına göre açılsın */
html body #notificationPanel,
html body .notification-panel {
  left: var(--xbox-final-panel-left) !important;
  right: auto !important;
  bottom: var(--xbox-final-notification-bottom) !important;
  transform-origin: left bottom !important;
}

html body .private-chat-panel {
  left: var(--xbox-final-panel-left) !important;
  right: auto !important;
  bottom: var(--xbox-final-private-bottom) !important;
  transform-origin: left bottom !important;
}

@media (max-width: 520px) {
  :root {
    --xbox-final-left: 4px;
    --xbox-final-size: 54px;
    --xbox-final-gap: 8px;
    --xbox-final-support-bottom: 10px;
    --xbox-final-panel-left: calc(var(--xbox-final-left) + var(--xbox-final-size) + 8px);
  }
}


/* =========================================================
   v83.0 - MODAL GLITCH + MOBIL YORUM BUTON/FOTO FIX
   ========================================================= */

/* Destek / Hakkımızda / Dosya İçeriği pencereleri glitch efekti */
#supportCenterModal .support-center-box.xbox-modal-glitch-in,
#supportModal .modal-content.xbox-modal-glitch-in,
#aboutModal .about-box.xbox-modal-glitch-in,
#aboutSupportModal .about-support-box.xbox-modal-glitch-in,
#gameFileContentsModal .game-file-contents-box.xbox-modal-glitch-in {
  animation: xboxModalGlitchOpen .38s cubic-bezier(.22,1,.36,1) both !important;
}

@keyframes xboxModalGlitchOpen {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.955) skewX(-3deg);
    filter: hue-rotate(70deg) saturate(1.45);
    clip-path: inset(0 0 84% 0);
  }
  20% {
    opacity: 1;
    transform: translateY(-4px) scale(1.015) skewX(3deg);
    clip-path: inset(16% 0 50% 0);
  }
  42% {
    transform: translateY(3px) scale(.995) skewX(-2deg);
    clip-path: inset(48% 0 18% 0);
  }
  68% {
    transform: translateY(0) scale(1.005) skewX(1deg);
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) skewX(0);
    filter: none;
    clip-path: inset(0 0 0 0);
  }
}

/* Yorum profil fotoğrafı çerçeveye tam otursun */
.comment-avatar-wrap {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
}

.comment-avatar-wrap .comment-avatar-crop,
.comment-avatar-crop {
  position: absolute !important;
  inset: 2px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.comment-avatar-wrap .comment-avatar-img,
.comment-avatar-img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--comment-photo-position, 50% 50%) !important;
  border-radius: 50% !important;
  transform: var(--comment-photo-transform, scale(1)) !important;
  transform-origin: var(--comment-photo-position, 50% 50%) !important;
  display: block !important;
}

/* Mobil yorum gönder + sticker butonu ölçü düzeltmesi */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .comment-form-footer {
    display: grid !important;
    gap: 10px !important;
  }

  .comment-send-actions,
  .reply-send-actions {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  .comment-send-actions .sticker-picker-toggle,
  .reply-send-actions .sticker-picker-toggle,
  button.sticker-picker-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 42px !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    border-radius: 12px !important;
  }

  #commentSendBtn,
  #gameCommentSendBtn,
  .reply-send-actions button:not(.sticker-picker-toggle) {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    width: auto !important;
    min-width: 108px !important;
    flex: 0 0 auto !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .comment-card {
    gap: 10px !important;
    padding: 12px !important;
  }

  .comment-card.reply {
    margin-left: 8px !important;
  }

  .comment-avatar-wrap {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    flex-basis: 42px !important;
  }

  .comment-avatar-wrap .comment-avatar-crop,
  .comment-avatar-crop {
    inset: 2px !important;
  }
}


/* =========================================================
   v84.0 - MOBIL YORUM PROFIL FOTOSU CERCEVEYE TAM OTURMA FINAL
   ========================================================= */

/* Yorum avatarında çerçeve dışarıda kalır, fotoğraf iç çemberi tamamen doldurur. */
html body #commentsContainer .comment-card .comment-avatar-wrap,
html body #gameCommentsContainer .comment-card .comment-avatar-wrap,
html body .comment-card[data-user-id] > .comment-avatar-wrap {
  position: relative !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  flex: 0 0 52px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  display: block !important;
  align-self: flex-start !important;
}

/* Fotoğraf kırpma alanı artık içeri gömülmez; çemberin tamamını kaplar. */
html body #commentsContainer .comment-card .comment-avatar-wrap > .comment-avatar-crop,
html body #gameCommentsContainer .comment-card .comment-avatar-wrap > .comment-avatar-crop,
html body .comment-card[data-user-id] > .comment-avatar-wrap > .comment-avatar-crop,
html body .comment-avatar-wrap .comment-avatar-crop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  clip-path: circle(50% at 50% 50%) !important;
  z-index: 1 !important;
  background: #07131a !important;
}

/* Fotoğraf crop alanını tamamen doldurur. */
html body #commentsContainer .comment-card .comment-avatar-wrap .comment-avatar-img,
html body #gameCommentsContainer .comment-card .comment-avatar-wrap .comment-avatar-img,
html body .comment-card[data-user-id] > .comment-avatar-wrap .comment-avatar-img,
html body .comment-avatar-wrap .comment-avatar-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: var(--comment-photo-position, 50% 50%) !important;
  transform: var(--comment-photo-transform, scale(1)) !important;
  transform-origin: var(--comment-photo-position, 50% 50%) !important;
  border-radius: 50% !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  display: block !important;
}

/* Harf avatar da çemberi doldursun. */
html body #commentsContainer .comment-card .comment-avatar-letter,
html body #gameCommentsContainer .comment-card .comment-avatar-letter,
html body .comment-card[data-user-id] > .comment-avatar-wrap .comment-avatar-letter {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  z-index: 1 !important;
}

/* Çerçeve glow fotoğrafı küçültmesin; sadece dış halka olsun. */
html body .comment-card[data-user-id] > .comment-avatar-wrap.xbox-author-frame-active,
html body .comment-card[data-user-id] > .comment-avatar-wrap.v17-frame-active,
html body #commentsContainer .comment-avatar-wrap.xbox-author-frame-active,
html body #gameCommentsContainer .comment-avatar-wrap.xbox-author-frame-active {
  border: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  box-shadow:
    0 0 0 4px var(--avatar-frame-color, #45f3ff),
    0 0 18px 4px var(--avatar-frame-glow, rgba(69,243,255,.72)) !important;
}

/* Mobilde kart kolonunu avatar ölçüsüne göre büyüt; fotoğraf ezilmesin. */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  html body #gameCommentsContainer .xbox-game-comment-v32,
  html body #commentsContainer .comment-card {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body #gameCommentsContainer .xbox-game-comment-v32.reply,
  html body #commentsContainer .comment-card.reply {
    grid-template-columns: 46px minmax(0, 1fr) !important;
  }

  html body #commentsContainer .comment-card .comment-avatar-wrap,
  html body #gameCommentsContainer .comment-card .comment-avatar-wrap,
  html body .comment-card[data-user-id] > .comment-avatar-wrap {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    flex: 0 0 46px !important;
  }

  html body #commentsContainer .comment-card.reply .comment-avatar-wrap,
  html body #gameCommentsContainer .comment-card.reply .comment-avatar-wrap {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    flex: 0 0 42px !important;
  }
}


/* =========================================================
   v85.0 - OZEL SOHBET BALON KARSILIKLI GORUNME / KAPANMA FIX
   ========================================================= */
html body .private-chat-bubble.hidden,
html body #privateChatBubble.hidden,
html body .private-chat-panel.hidden,
html body #privateChatPanel.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .private-chat-bubble:not(.hidden),
html body #privateChatBubble:not(.hidden) {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* =========================================================
   v86.0 - OZEL SOHBET KARSIDAKI KULLANICI BALON FIX
   ========================================================= */
html body #privateChatBubble:not(.hidden),
html body .private-chat-bubble:not(.hidden) {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}