/* =====================================================================
   OyunMagaza — app.css
   human/design tasarım sistemine göre refactor edildi.
   Class isimleri, token'lar, gölge/geçiş/radius konvansiyonları
   design/ dosyalarındaki spec'lerle birebir hizalandı.

   Bölümler (silinebilir bloklar — design INDEX mantığı):
     1) Design Tokens .............. 02-design-tokens.md
     2) Dark Mode .................. 04-koyu-tema.md
     3) Font ....................... 01-tipografi.md
     4) Reset & Temel
     5) Yardımcılar (container, section-head, btn)  15-buton-katalogu.md
     6) Header (top/middle) ........ bilesenleri/header.md
     7) Navigasyon ................. bilesenleri/navigasyon.md
     8) Mobil header + menü + alt nav  mobil-header/mobil-menu.md
     9) Hero
    10) Stat / Feature / Step / Testi / CTA (landing blokları)
    11) Footer .................... bilesenleri/footer.md
    12) Animasyonlar .............. 11-animasyonlar.md
    13) Responsive ................ 08-responsive.md
   ===================================================================== */

/* ---------- 1) DESIGN TOKENS (02-design-tokens.md) ---------- */
:root {
  /* Border radius */
  --radius-ui: 12px;
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-2xl: 20px;
  --radius-3xl: 22px;
  --radius-4xl: 24px;
  --radius-card: var(--radius-4xl);
  --radius-panel: var(--radius-3xl);
  --radius-surface: var(--radius-2xl);

  /* Renkler (sabit — dark mode'da değişmez) */
  --primary-blue: #3d5afe;
  --success-green: #11d377;
  --warning-orange: #ffb300;
  --danger-red: #ff4454;

  /* Marka aksanı — OyunMagaza turuncusu.
     Sistemin turuncu ailesi üzerine kuruludur (nav-register-btn gradyanı). */
  --brand: #ff9417;
  --brand-strong: #e6820e;
  --brand-grad: linear-gradient(135deg, #ff8a00 0%, #ff5f00 100%);
  --brand-soft: rgba(255, 138, 0, 0.10);
  --brand-soft-border: rgba(255, 138, 0, 0.22);
  --brand-shadow: rgba(255, 122, 0, 0.28);

  /* Arka plan */
  --bg-body: #f4f5f7;
  --bg-header: #ffffff;
  --bg-top: #fafafa;
  --bg-light: #f1f2f6;

  /* Kenarlık & metin */
  --border-color: #e4e4e4;
  --dark-text: #212121;
  --gray-text: #85909e;

  /* Gölge (06-golge-gecisler.md) */
  --box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  --card-shadow-hover: 0 12px 30px rgba(61, 90, 254, 0.12);
  --dropdown-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);

  /* Dropdown / input */
  --dropdown-bg: #ffffff;
  --input-bg: #f4f5f7;

  /* Sabit dark (footer / koyu kartlar) */
  --ink-900: #0a0c10;
  --ink-800: #11141a;
  --ink-border: #2d303a;

  /* Geçişler (06-golge-gecisler.md) */
  --transition: color 0.3s ease, background-color 0.3s ease,
    border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease,
    transform 0.3s ease;
  --header-transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- 2) DARK MODE (04-koyu-tema.md) ---------- */
body.dark-mode {
  color-scheme: dark;
  --bg-body: #0a0c10;
  --bg-header: #11141a;
  --bg-top: #0a0c10;
  --bg-light: #1c2128;
  --border-color: #2d303a;
  --dark-text: #f0f6fc;
  --gray-text: #8b949e;
  --box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  --card-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.5);
  --dropdown-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  --dropdown-bg: #11141a;
  --input-bg: #0a0c10;
}

body.theme-switching-no-anim,
body.theme-switching-no-anim *,
body.theme-switching-no-anim *::before,
body.theme-switching-no-anim *::after {
  transition: none !important;
  animation: none !important;
}

/* ---------- 3) FONT (01-tipografi.md) ----------
   Gilroy yoksa Poppins fallback. assets/fonts/ içine .woff2 bırakılırsa kullanılır. */
@font-face { font-family: 'Gilroy'; src: url('../fonts/subset-Gilroy-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fonts/subset-Gilroy-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fonts/subset-Gilroy-Semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fonts/subset-Gilroy-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fonts/subset-Gilroy-Bold.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* ---------- 4) RESET & TEMEL ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Gilroy', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-body);
  color: var(--dark-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--dark-text); line-height: 1.15; }

/* ---------- 5) YARDIMCILAR ---------- */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.container.wide { max-width: 1460px; }
.section { padding: 72px 0; }
.section-sm { padding: 48px 0; }

/* section-head — bolum-basliklari.md */
.section-head { margin-bottom: 36px; }
.section-head.center { text-align: center; }
.section-head.center .section-subtitle { margin-left: auto; margin-right: auto; }
.section-label {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--brand-strong);
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-border);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}
.section-title { font-size: 34px; font-weight: 900; letter-spacing: -0.5px; }
.section-subtitle { color: var(--gray-text); font-size: 15px; margin-top: 10px; max-width: 560px; }

/* ---------- Hukuki sayfalar (Gizlilik / Kullanım Şartları) ---------- */
.legal-page { padding: 56px 0 80px; }
.legal-wrap { max-width: 880px; margin: 0 auto; }
.legal-head { margin-bottom: 28px; }
.legal-updated { color: var(--gray-text); font-size: 13px; font-weight: 600; margin-top: 12px; }
.legal-toc {
  background: var(--bg-light); border: 1px solid var(--border-color);
  border-radius: 18px; padding: 22px 24px; margin-bottom: 40px;
}
.legal-toc-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--gray-text); margin-bottom: 16px;
}
.legal-toc-title::before {
  content: ""; width: 16px; height: 3px; border-radius: 3px; background: var(--brand-grad);
}
.legal-toc ol {
  list-style: none; counter-reset: toc; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px;
}
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 11px;
  color: var(--dark-text); font-weight: 600; font-size: 14px;
  border: 1px solid transparent; transition: var(--transition);
}
.legal-toc a::before {
  content: counter(toc); flex-shrink: 0;
  width: 25px; height: 25px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  background: var(--bg-header); color: var(--brand-strong);
  border: 1px solid var(--border-color); transition: var(--transition);
}
.legal-toc a:hover {
  background: var(--bg-header); border-color: var(--brand-soft-border); color: var(--brand-strong);
}
.legal-toc a:hover::before { background: var(--brand-grad); color: #fff; border-color: transparent; }
.legal-card {
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: 18px; padding: 38px 44px; box-shadow: var(--card-shadow);
}
.legal-body h2 { font-size: 21px; font-weight: 800; margin: 36px 0 12px; scroll-margin-top: 90px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
.legal-body p { color: var(--gray-text); margin: 0 0 14px; line-height: 1.8; }
.legal-body ul { list-style: disc; padding-left: 22px; margin: 0 0 16px; }
.legal-body ul li { color: var(--gray-text); margin-bottom: 8px; line-height: 1.7; }
.legal-body a { color: var(--brand-strong); font-weight: 600; }
.legal-body strong { color: var(--dark-text); font-weight: 700; }
.legal-body hr { border: none; border-top: 1px solid var(--border-color); margin: 28px 0; }
@media (max-width: 640px) {
  .legal-card { padding: 26px 22px; }
  .legal-toc ol { grid-template-columns: 1fr; }
}

/* Butonlar — 15-buton-katalogu.md (shimmer ::before tüm gradient btn'lerde) */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-ui);
  font-size: 15px; font-weight: 700;
  transition: var(--transition);
  overflow: hidden; white-space: nowrap;
}
.btn i { font-size: 18px; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }

.btn--shimmer::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}
.btn--shimmer:hover::before { left: 200%; }

.btn-brand {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: 0 8px 22px var(--brand-shadow);
}
.btn-brand:hover { box-shadow: 0 12px 28px var(--brand-shadow); transform: translateY(-2px); }

.btn-outline {
  background: var(--bg-header);
  color: var(--dark-text);
  border-color: var(--border-color);
}
.btn-outline:hover { border-color: var(--brand); color: var(--brand-strong); }

.btn-dark { background: var(--ink-800); color: #fff; }
.btn-dark:hover { background: #000; transform: translateY(-2px); }

/* ---------- 6) HEADER (header.md) ---------- */
.site-header {
  background: var(--bg-header);
  transition: var(--header-transition);
}

/* .header-top — üst bilgi çubuğu (Yeni Eklenenler) */
.header-top {
  background: var(--bg-top);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}
.header-top-inner { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.header-top-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 11px; letter-spacing: 0.5px;
  color: var(--gray-text); text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}
.header-top-label .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success-green);
  box-shadow: 0 0 0 3px rgba(17, 211, 119, 0.18);
  animation: pulse 2s infinite;
}
.strip-track {
  display: flex; gap: 10px; flex: 1;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.strip-track::-webkit-scrollbar { display: none; }
.strip-item {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 12px;
  background: var(--bg-header);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-weight: 600; font-size: 12.5px;
  white-space: nowrap; flex-shrink: 0;
  transition: var(--transition);
}
.strip-item:hover { border-color: var(--brand-soft-border); }
.strip-thumb {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--bg-light);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: var(--gray-text);
}
.strip-item .tag {
  font-size: 10px; font-weight: 700; color: var(--gray-text);
  background: var(--bg-light); border-radius: 6px; padding: 2px 7px;
}
.strip-all {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; font-size: 13px; color: var(--gray-text);
}
.strip-all:hover { color: var(--brand-strong); }

/* .header-middle — logo + nav + aksiyonlar (sticky) */
.header-sticky-bar {
  position: sticky; top: 0; z-index: 222;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  transition: var(--header-transition);
}
.header-sticky-bar.is-stuck { box-shadow: var(--box-shadow); }
.header-middle { display: flex; align-items: center; height: 76px; gap: 24px; }

.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 20px; letter-spacing: -0.5px; flex-shrink: 0;
}
.logo .logo-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}

/* ---------- 7) NAVİGASYON (navigasyon.md) ---------- */
.main-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.header-nav-item {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  font-size: 15px; font-weight: 600;
  color: var(--gray-text);
  background: transparent; border: none;
  border-radius: var(--radius-ui);
  white-space: nowrap;
  transition: var(--transition);
}
.header-nav-item:hover { color: var(--dark-text); background: var(--bg-light); }
.header-nav-item.active { color: var(--dark-text); background: var(--bg-light); }
.header-nav-item.active::after {
  content: '';
  position: absolute; left: 16px; right: 16px; bottom: 2px;
  height: 3px; border-radius: 3px;
  background: var(--brand-grad);
  box-shadow: 0 -1px 8px var(--brand-shadow);
  animation: navActiveBarIn 220ms ease-out;
}

.header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* theme-btn — 15-buton-katalogu.md (büyütülmüş varyant 40px) */
.theme-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-ui);
  background: var(--bg-light);
  color: var(--dark-text);
  border: none; font-size: 18px;
  transition: var(--transition);
}
.theme-btn:hover { background: var(--brand); color: #fff; }
body.dark-mode .theme-btn { background: rgba(255,255,255,0.08); color: #f0f6fc; }

/* Bayi bakiye göstergesi (header) */
.dealer-balance-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 14px; border-radius: var(--radius-ui);
  background: rgba(17,211,119,0.1); border: 1px solid rgba(17,211,119,0.25);
  color: var(--success-green); font-size: 14px; font-weight: 800;
  white-space: nowrap; transition: var(--transition);
}
.dealer-balance-pill i { font-size: 17px; }
.dealer-balance-pill:hover { background: rgba(17,211,119,0.18); }

/* nav-register-btn (Admin linki yerine de hizalı) */
.admin-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 14px; color: var(--brand-strong);
}
.admin-link i { font-size: 18px; }
.admin-link:hover { color: var(--brand); }

.nav-register-btn {
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 6px 15px var(--brand-shadow);
}

/* user-profile-pill — header.md */
.user-profile-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 6px 5px 5px; border-radius: 999px;
  transition: var(--transition);
}
.user-profile-pill:hover { background: var(--bg-light); }
.avatar-wrapper {
  position: relative;
  width: 34px; height: 34px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--ink-800); color: #fff;
  font-weight: 800; font-size: 14px;
}
.avatar-wrapper .lvl {
  position: absolute; top: -4px; right: -4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--success-green); color: #fff;
  font-size: 9px; font-weight: 800;
  display: grid; place-items: center;
  border: 2px solid var(--bg-header);
}
.user-name { font-size: 14px; font-weight: 700; color: var(--dark-text); }

/* header-icon-btn — 15-buton-katalogu.md */
.header-icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-ui);
  background: var(--bg-light);
  color: var(--gray-text);
  border: 1px solid transparent;
  font-size: 19px;
  transition: var(--transition);
}
.header-icon-btn:hover {
  color: var(--danger-red);
  background: var(--bg-header);
  border-color: rgba(255,68,84,0.2);
  box-shadow: 0 6px 15px rgba(255,68,84,0.12);
}

/* ---------- 8) MOBİL HEADER / MENÜ / ALT NAV (mobil-*.md) ---------- */
.header-hamburger-btn {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--radius-ui);
  background: var(--bg-light);
  border: none; color: var(--dark-text);
  font-size: 22px; place-items: center;
}

/* Tam ekran mobil menü */
.mobile-menu-offcanvas {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg-body);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex; flex-direction: column;
  padding: 18px 16px;
  overflow-y: auto;
}
.mobile-menu-offcanvas.open { transform: translateX(0); }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.close-menu-btn {
  width: 44px; height: 44px; border-radius: var(--radius-ui);
  background: var(--bg-light); border: none; color: var(--dark-text);
  font-size: 24px; display: grid; place-items: center;
  transition: background 0.3s;
}
.close-menu-btn:hover { background: var(--danger-red); color: #fff; }
.cat-list-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-light);
  padding: 14px 15px; margin-bottom: 8px;
  border-radius: var(--radius-ui);
  border-left: 4px solid transparent;
  color: var(--dark-text);
  font-size: 15px; font-weight: 700;
  transition: var(--transition);
}
.cat-list-card:hover { border-left-color: var(--brand); }
.cat-list-card.active { border-left-color: var(--brand); color: var(--brand-strong); }

/* Mobil menü kullanıcı kartı + hızlı erişim */
.mm-user { display: flex; align-items: center; gap: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: var(--radius-ui); padding: 12px 14px; margin-bottom: 12px; }
.mm-user .avatar-wrapper { width: 44px; height: 44px; border-radius: 12px; font-size: 17px; }
.mm-user-name { font-size: 16px; font-weight: 800; color: var(--dark-text); }
.mm-user-sub { font-size: 12px; color: var(--gray-text); font-weight: 600; }
.mm-user-bal { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--success-green); margin-top: 2px; }
.mm-quick { display: flex; gap: 10px; margin-bottom: 14px; }
.mm-quick .theme-btn.mm-theme { width: auto; flex: 1; height: 46px; gap: 8px; font-size: 14px; font-weight: 700; }
.mm-quick-btn { flex: 1; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-ui); font-size: 14px; font-weight: 700; background: var(--bg-light); border: 1px solid var(--border-color); color: var(--dark-text); }
.mm-quick-btn.admin { background: var(--brand-soft); border-color: var(--brand-soft-border); color: var(--brand-strong); }

/* Mobil alt navigasyon (mobil-menu.md) */
.mobile-bottom-nav {
  position: fixed; bottom: 0; left: 0;
  width: 100%; height: 72px; z-index: 999;
  background: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius-ui) var(--radius-ui) 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
  display: none;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bottom-nav::before {
  content: ""; position: absolute; inset: 0;
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 0;
}
body.dark-mode .mobile-bottom-nav { background: rgba(10,12,16,0.92); border-top-color: #1e2228; }
.mobile-bottom-nav .nav-list {
  position: relative; z-index: 1;
  display: flex; justify-content: space-around; align-items: center;
  height: 68px; padding: 0 6px;
}
.mobile-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--gray-text); font-size: 11px; font-weight: 600;
  min-width: 56px;
}
.mobile-nav-item i { font-size: 22px; }
.mobile-nav-item.active { color: var(--brand-strong); }
.mobile-nav-center-btn .center-icon-wrap {
  width: 46px; height: 46px; margin-top: -14px;
  display: grid; place-items: center;
  background: var(--brand-grad);
  border-radius: var(--radius-ui);
  color: #fff; font-size: 22px;
  box-shadow: 0 6px 16px var(--brand-shadow);
  border: 3px solid var(--bg-body);
}

/* ---------- 9) HERO ---------- */
.hero { padding: 80px 0 64px; }
.hero-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 48px; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--brand-strong); background: var(--brand-soft);
  border: 1px solid var(--brand-soft-border); border-radius: 999px;
  padding: 7px 14px; margin-bottom: 26px;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: pulse 2s infinite; }
.hero-title { font-size: 64px; font-weight: 900; letter-spacing: -2px; line-height: 1.02; }
.hero-title .accent { color: var(--brand); }
.hero-desc { color: var(--gray-text); font-size: 18px; margin: 24px 0 34px; max-width: 460px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-social { display: flex; align-items: center; gap: 16px; margin-top: 44px; }
.avatar-stack { display: flex; }
.avatar-stack span {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-light); border: 2px solid var(--bg-body);
  margin-left: -10px; font-weight: 800; font-size: 13px; color: var(--gray-text);
}
.avatar-stack span:first-child { margin-left: 0; }
.hero-social-text { font-size: 14px; }
.hero-social-text .stars { color: var(--brand); font-size: 14px; letter-spacing: 1px; }
.hero-social-text small { color: var(--gray-text); font-weight: 600; }

/* Hero bento kartları */
.hero-cards { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 18px; }
.hero-card {
  background: var(--bg-header);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  padding: 22px;
  box-shadow: var(--box-shadow);
}
.hero-card.span-2 { grid-column: span 2; }
.hero-card .hc-icon {
  width: 44px; height: 44px; border-radius: var(--radius-ui);
  display: grid; place-items: center; font-size: 22px; color: #fff; margin-bottom: 14px;
}
.hc-icon.orange { background: var(--brand-grad); }
.hero-card h4 { font-size: 16px; font-weight: 800; }
.hero-card p { color: var(--gray-text); font-size: 13px; margin: 4px 0 0; }
.hero-card .bar { margin-top: 14px; height: 6px; border-radius: 999px; background: var(--bg-light); overflow: hidden; }
.hero-card .bar i { display: block; height: 100%; width: 82%; background: var(--brand-grad); border-radius: 999px; }
.hero-card--dark { background: var(--ink-800); border-color: var(--ink-border); color: #fff; }
.hero-card--dark .big { font-size: 40px; font-weight: 900; letter-spacing: -1px; }
.hero-card--dark p { color: #9aa4b2; }
.hero-card--green { background: linear-gradient(150deg, #12c46e, #0aa15a); border: none; color: #fff; }
.hero-card--green .hc-icon { background: rgba(255,255,255,0.18); }
.hero-card--green h4 { color: #fff; }
.hero-card--green p { color: rgba(255,255,255,0.82); }
.hero-card .rating-num { font-size: 36px; font-weight: 900; letter-spacing: -1px; }
.hero-card .stars { color: var(--brand); letter-spacing: 2px; }
.hero-card .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; color: var(--gray-text); text-transform: uppercase; }

/* ---------- 10) LANDING BLOKLARI ---------- */
/* Stat kartları */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-card {
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); padding: 28px 26px;
  box-shadow: var(--card-shadow); transition: var(--transition);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.stat-icon { width: 46px; height: 46px; border-radius: var(--radius-ui); display: grid; place-items: center; font-size: 22px; margin-bottom: 18px; }
.stat-icon.blue { background: rgba(61,90,254,0.1); color: var(--primary-blue); }
.stat-icon.green { background: rgba(17,211,119,0.1); color: var(--success-green); }
.stat-icon.orange { background: var(--brand-soft); color: var(--brand-strong); }
.stat-icon.purple { background: rgba(124,77,255,0.1); color: #7c4dff; }
.stat-value { font-size: 34px; font-weight: 900; letter-spacing: -1px; }
.stat-label { color: var(--gray-text); font-size: 14px; font-weight: 600; margin-top: 2px; }

/* Feature kartları */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card {
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); padding: 34px 30px;
  box-shadow: var(--card-shadow); transition: var(--transition);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.feature-card .f-icon { width: 54px; height: 54px; border-radius: var(--radius-lg); display: grid; place-items: center; font-size: 26px; margin-bottom: 22px; }
.f-icon.orange { background: var(--brand-grad); color: #fff; }
.f-icon.green { background: rgba(17,211,119,0.12); color: var(--success-green); }
.f-icon.blue { background: rgba(61,90,254,0.12); color: var(--primary-blue); }
.feature-card h3 { font-size: 19px; font-weight: 800; margin-bottom: 10px; }
.feature-card p { color: var(--gray-text); font-size: 14.5px; margin: 0; }
.feature-meta { margin-top: 18px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.feature-meta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-green); }
.feature-meta.green { color: var(--success-green); }
.feature-meta.gray { color: var(--gray-text); }
.feature-card--dark { background: var(--ink-800); border-color: var(--ink-border); color: #fff; }
.feature-card--dark h3 { color: #fff; }
.feature-card--dark p { color: #9aa4b2; }

/* Nasıl çalışır — adımlar */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; margin-top: 40px; }
.step { text-align: center; position: relative; padding: 0 12px; }
/* Bağlantı çizgisi: başta boş (gri track).
   Bir adımın üzerine gelince O ADIMA KADAR olan çizgiler soldan sağa uzanır;
   önceki dolu çizgiler bozulmaz. */
.step:not(:last-child)::after {
  content: ''; position: absolute; top: 32px;
  left: calc(50% + 44px); right: calc(-50% + 44px);
  height: 2px; z-index: 0;
  background-color: var(--border-color);
  background-image: var(--brand-grad);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size 0.45s ease;
}
/* 2. adıma hover → 1-2 çizgisi */
.steps:has(.step:nth-child(2):hover) .step:nth-child(1)::after { background-size: 100% 100%; }
/* 3. adıma hover → 1-2 ve 2-3 (sırayla) */
.steps:has(.step:nth-child(3):hover) .step:nth-child(1)::after { background-size: 100% 100%; }
.steps:has(.step:nth-child(3):hover) .step:nth-child(2)::after { background-size: 100% 100%; transition-delay: 0.25s; }
/* 4. adıma hover → 1-2, 2-3, 3-4 (sırayla) */
.steps:has(.step:nth-child(4):hover) .step:nth-child(1)::after { background-size: 100% 100%; }
.steps:has(.step:nth-child(4):hover) .step:nth-child(2)::after { background-size: 100% 100%; transition-delay: 0.25s; }
.steps:has(.step:nth-child(4):hover) .step:nth-child(3)::after { background-size: 100% 100%; transition-delay: 0.5s; }
.step-icon {
  position: relative; z-index: 1;
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: var(--radius-lg); display: grid; place-items: center;
  background: var(--bg-header); border: 1px solid var(--border-color);
  color: var(--dark-text); font-size: 26px; box-shadow: var(--card-shadow);
  transition: var(--transition);
}
.step:first-child .step-icon { background: rgba(17,211,119,0.12); border-color: transparent; color: var(--success-green); }
/* Hover: ikon markaya döner ve yükselir */
.step:hover .step-icon {
  background: var(--brand-grad); border-color: transparent; color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 10px 24px var(--brand-shadow);
}
.step:hover .step-num { transform: scale(1.12); }
.step-num { transition: var(--transition); }
.step-num {
  position: absolute; top: -8px; right: -8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 800;
  display: grid; place-items: center; border: 2px solid var(--bg-body);
}
.step h4 { font-size: 17px; font-weight: 800; }
.step p { color: var(--brand-strong); font-size: 13.5px; margin: 6px 0 0; font-weight: 600; }

/* Yorumlar */
.testi-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; }
.testi-nav { display: flex; gap: 10px; margin-top: 26px; }
.testi-nav button {
  width: 46px; height: 46px; border-radius: var(--radius-ui);
  background: var(--bg-header); border: 1px solid var(--border-color);
  color: var(--dark-text); font-size: 18px; display: grid; place-items: center;
  transition: var(--transition);
}
.testi-nav button:hover { border-color: var(--brand); color: var(--brand-strong); }
.testi-card {
  position: relative;
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); padding: 38px 40px; box-shadow: var(--box-shadow);
}
.testi-card .quote-mark { position: absolute; top: 26px; right: 32px; font-size: 56px; color: var(--bg-light); font-family: Georgia, serif; line-height: 1; }
.testi-card .stars { color: var(--brand); letter-spacing: 2px; font-size: 16px; }
.testi-text { font-size: 21px; font-weight: 600; margin: 18px 0 28px; line-height: 1.5; }
.testi-author { display: flex; align-items: center; gap: 14px; }
.testi-author .av { width: 50px; height: 50px; border-radius: 50%; background: var(--brand-grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.testi-author .name { font-weight: 800; font-size: 15px; }
.testi-author .role { color: var(--gray-text); font-size: 13px; }
.testi-dots { display: flex; gap: 7px; margin-left: auto; }
.testi-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--bg-light); }
.testi-dots i.active { width: 22px; background: var(--brand); }

/* CTA bandı */
.cta-band { display: grid; grid-template-columns: 1.4fr 1fr; background: var(--ink-800); border-radius: var(--radius-card); overflow: hidden; color: #fff; }
.cta-left { padding: 52px 56px; }
.cta-left h2 { font-size: 36px; font-weight: 900; letter-spacing: -1px; color: #fff; }
.cta-left p { color: #9aa4b2; font-size: 16px; margin: 16px 0 30px; max-width: 440px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-actions .btn-outline { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.14); }
.cta-actions .btn-outline:hover { background: rgba(255,255,255,0.12); color: #fff; }
.cta-right { background: #0d1016; padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; }
.cta-right .big { font-size: 72px; font-weight: 900; letter-spacing: -2px; line-height: 1; }
.cta-right .sub { color: #9aa4b2; font-size: 15px; margin-top: 6px; }
.cta-mini-stats { display: flex; gap: 30px; margin-top: 28px; }
.cta-mini-stats .num { font-size: 22px; font-weight: 900; }
.cta-mini-stats .lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: #6b7480; text-transform: uppercase; }
/* Sağ panel (istatistikler) kaldırıldığında CTA bandı tek sütun + ortalı */
.cta-band--solo { grid-template-columns: 1fr; }
.cta-band--solo .cta-left { text-align: center; }
.cta-band--solo .cta-left p { margin: 16px auto 30px; }
.cta-band--solo .cta-actions { justify-content: center; }

/* ---------- 10b) OYUNLAR SAYFASI (urun-listesi-saas.md) ---------- */
.section-label.muted {
  color: var(--gray-text);
  background: var(--bg-light);
  border-color: var(--border-color);
}
.section-label.muted i { margin-right: 4px; }

/* Arama (saas-search türevi, geniş) */
.game-toolbar { margin: 30px 0 20px; }
.game-search { position: relative; }
.game-search > i {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: var(--gray-text);
}
.game-search input {
  width: 100%; height: 56px;
  background: var(--bg-header);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-ui);
  padding: 0 20px 0 54px;
  font-size: 15px; font-weight: 500;
  color: var(--dark-text);
  box-shadow: var(--card-shadow);
  transition: var(--transition);
}
.game-search input::placeholder { color: var(--gray-text); }
.game-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* Filtre pill'leri (sct-btn türevi, aktif = koyu) */
.game-filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.gf-btn {
  padding: 10px 20px;
  border-radius: var(--radius-ui);
  background: transparent;
  border: 1px solid transparent;
  color: var(--gray-text);
  font-size: 14px; font-weight: 700;
  white-space: nowrap;
  transition: var(--transition);
}
.gf-btn:hover { color: var(--dark-text); background: var(--bg-light); }
.gf-btn.active { background: var(--ink-800); color: #fff; }
body.dark-mode .gf-btn.active { background: #f0f6fc; color: var(--ink-900); }

/* Oyun grid + kart */
.game-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.game-card {
  display: flex; flex-direction: column;
  background: var(--bg-header);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}
.game-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); border-color: var(--brand-soft-border); }
.game-card.featured { border-color: var(--brand); box-shadow: 0 6px 20px rgba(255,138,0,0.12); }

.gc-media {
  position: relative;
  aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2f3a, #161a22);
}
.gc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gc-media .ph { font-size: 42px; color: rgba(255,255,255,0.25); }
/* Placeholder renk varyasyonları */
.game-card:nth-child(6n+1) .gc-media { background: linear-gradient(135deg, #3a2418, #1a120c); }
.game-card:nth-child(6n+2) .gc-media { background: linear-gradient(135deg, #1c2c44, #0e1622); }
.game-card:nth-child(6n+3) .gc-media { background: linear-gradient(135deg, #2c2140, #150f20); }
.game-card:nth-child(6n+4) .gc-media { background: linear-gradient(135deg, #173329, #0c1a14); }
.game-card:nth-child(6n+5) .gc-media { background: linear-gradient(135deg, #3a1f2a, #1c0f15); }
.game-card:nth-child(6n+6) .gc-media { background: linear-gradient(135deg, #2a2f3a, #161a22); }

.gc-highlight {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff; font-size: 9px; font-weight: 900;
  padding: 5px 9px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: 0.3px;
  box-shadow: 0 4px 10px rgba(217,119,6,0.35);
}
.gc-body { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.gc-title {
  font-size: 15px; font-weight: 800; color: var(--dark-text);
  line-height: 1.35; margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.gc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 8px;
}
.gc-badge.platform { background: var(--bg-light); color: var(--gray-text); }
.gc-badge.ozel {
  background: rgba(255,179,0,0.12); color: #b07d10;
  border: 1px solid rgba(255,179,0,0.25);
}
body.dark-mode .gc-badge.ozel { color: #ffcf5c; }

/* Boş durum (saas-empty-state) */
.saas-empty-state {
  grid-column: 1 / -1;
  padding: 64px 20px; text-align: center;
  background: var(--bg-header);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-ui);
  color: var(--gray-text);
}
.saas-empty-state i { font-size: 44px; color: var(--gray-text); opacity: 0.5; }
.saas-empty-state h3 { margin: 14px 0 4px; font-size: 18px; color: var(--dark-text); }

/* Oyun detay offcanvas (sağdan kayar) */
.offcanvas-backdrop {
  position: fixed; inset: 0; z-index: 1090;
  background: rgba(10, 12, 16, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.offcanvas-backdrop.show { opacity: 1; visibility: visible; }

.game-offcanvas {
  position: fixed; top: 0; right: 0; height: 100dvh;
  width: min(92vw, 420px); z-index: 1100;
  background: var(--bg-header);
  border-left: 1px solid var(--border-color);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex; flex-direction: column; overflow-y: auto;
}
.game-offcanvas.open { transform: translateX(0); }
.goc-header {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
}
.goc-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--brand-strong); }
.goc-close {
  width: 38px; height: 38px; border-radius: var(--radius-ui);
  background: var(--bg-light); border: none; color: var(--dark-text);
  font-size: 22px; display: grid; place-items: center; transition: var(--transition);
}
.goc-close:hover { background: var(--danger-red); color: #fff; }
.goc-cover {
  position: relative; margin: 20px; border-radius: var(--radius-card);
  aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, #2a2f3a, #161a22);
}
.goc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.goc-cover .ph { font-size: 54px; color: rgba(255, 255, 255, 0.25); }
.goc-content { padding: 0 20px 28px; }
.goc-title { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 12px; }
.goc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.goc-meta { margin: 22px 0; }
.goc-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--border-color); font-size: 14px;
}
.goc-meta-row:first-child { border-top: 1px solid var(--border-color); }
.goc-meta-row span { color: var(--gray-text); font-weight: 600; }
.goc-meta-row b { font-weight: 800; color: var(--dark-text); }
.goc-meta-row b.ok { color: var(--success-green); }
.goc-add { width: 100%; }

/* Satın alma toast'ı (sosyal kanıt) */
.buy-toast {
  position: fixed; left: 20px; bottom: 20px; z-index: 9000;
  width: min(92vw, 330px);
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-header);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-ui);
  box-shadow: 0 12px 34px rgba(0,0,0,0.14);
  padding: 12px 38px 12px 12px;
  transform: translateY(24px); opacity: 0; pointer-events: none;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.buy-toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.bt-thumb {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
  background: var(--bg-light);
  display: grid; place-items: center; color: var(--gray-text); font-size: 20px;
}
.bt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bt-body { min-width: 0; }
.bt-action { font-size: 12px; font-weight: 700; color: var(--gray-text); }
.bt-title { font-size: 13px; font-weight: 800; color: var(--dark-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-time { font-size: 11px; font-weight: 600; color: var(--gray-text); margin-top: 2px; }
.bt-close {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border: none; background: transparent;
  color: var(--gray-text); font-size: 18px; display: grid; place-items: center;
  border-radius: 6px;
}
.bt-close:hover { background: var(--bg-light); color: var(--dark-text); }

/* Oyunlar responsive */
@media (max-width: 1200px) { .game-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 991px)  { .game-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  {
  .game-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .game-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .game-filters::-webkit-scrollbar { display: none; }
  .buy-toast { bottom: 84px; left: 12px; }
}
@media (max-width: 560px)  { .game-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 10h) OYUN SEÇİMİ ---------- */
.sel-hero { text-align: center; margin-bottom: 34px; }
.sel-hero .sel-icon {
  width: 76px; height: 76px; margin: 0 auto 22px;
  border-radius: var(--radius-lg); display: grid; place-items: center;
  background: rgba(17,211,119,0.12); color: var(--success-green); font-size: 36px;
}
.sel-hero h1 { font-size: 44px; font-weight: 900; letter-spacing: -1px; }
.sel-hero p { color: var(--gray-text); font-size: 16px; margin-top: 10px; }
.sel-hero p b { color: var(--brand-strong); }

.sel-panel {
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); padding: 22px 24px; margin-bottom: 18px;
}
.sel-panel-label { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gray-text); margin-bottom: 12px; }
.sel-active-row { display: flex; align-items: center; gap: 10px; }
.sel-active-select {
  flex: 1; height: 52px; padding: 0 16px;
  background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-ui);
  font-size: 14px; font-weight: 700; color: var(--dark-text);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2385909e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.sel-key-tail { font-size: 11px; font-weight: 700; color: var(--gray-text); background: var(--bg-light); border-radius: 6px; padding: 4px 8px; }

.sel-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sel-search { position: relative; flex: 1; min-width: 220px; }
.sel-search > i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--gray-text); font-size: 19px; }
.sel-search input { width: 100%; height: 52px; padding: 0 18px 0 48px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--radius-ui); font-size: 14px; font-weight: 500; color: var(--dark-text); }
.sel-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.sel-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.sel-status { display: flex; align-items: center; gap: 18px; }
.sel-status-info { flex-shrink: 0; }
.sel-status-info h3 { font-size: 17px; font-weight: 800; }
.sel-status-info p { font-size: 13px; color: var(--gray-text); margin-top: 2px; }
.sel-progress { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-light); overflow: hidden; min-width: 80px; }
.sel-progress i { display: block; height: 100%; width: 0; background: var(--brand-grad); border-radius: 999px; transition: width 0.3s ease; }
.sel-confirm { flex-shrink: 0; height: 48px; }

/* Seçim kartı (game-card üzerine) */
.game-card.selectable { cursor: pointer; position: relative; }
.game-card.selectable .gc-check {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.85); border: 2px solid var(--border-color);
  display: grid; place-items: center; color: transparent; font-size: 16px; transition: var(--transition);
}
.game-card.selected { border-color: var(--success-green); box-shadow: 0 0 0 2px var(--success-green) inset, var(--card-shadow-hover); }
.game-card.selected .gc-check { background: var(--success-green); border-color: var(--success-green); color: #fff; }
.game-card.locked { opacity: 0.5; filter: grayscale(0.6); cursor: not-allowed; }
.game-card.locked .gc-lock { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; color: #fff; font-size: 30px; }
.game-card.locked .gc-media::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.35); }

/* ---------- 10c) KOD AL / GUARD SAYFASI ---------- */
.guard-page { max-width: 600px; margin: 0 auto; }
.section-label.success {
  color: var(--success-green);
  background: rgba(17, 211, 119, 0.1);
  border-color: rgba(17, 211, 119, 0.22);
}
.section-label.success i { margin-right: 4px; }

.guard-alert {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(255, 179, 0, 0.08);
  border: 1px solid rgba(255, 179, 0, 0.28);
  color: #9a7400; border-radius: var(--radius-ui);
  padding: 14px 16px; font-size: 14px; font-weight: 600;
  margin: 26px 0 30px;
}
.guard-alert i { color: var(--warning-orange); font-size: 18px; margin-top: 1px; flex-shrink: 0; }
body.dark-mode .guard-alert { color: #ffcf5c; }

.field { margin-bottom: 22px; }
.field-label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--gray-text); margin-bottom: 10px;
}
.select-wrap { position: relative; }
.select-wrap > i {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: var(--gray-text); pointer-events: none;
}
.guard-select {
  width: 100%; height: 56px; padding: 0 44px 0 18px;
  background: var(--bg-header);
  border: 1px solid var(--border-color); border-radius: var(--radius-ui);
  font-size: 15px; font-weight: 600; color: var(--dark-text);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  transition: var(--transition);
}
.guard-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* Doğrulama widget (Cloudflare yerine basit) */
.guard-verify-box {
  border: 1px solid var(--border-color); border-radius: var(--radius-ui);
  background: var(--bg-light); padding: 26px; display: flex; justify-content: center;
}
.verify-widget {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-ui); padding: 14px 18px;
  width: 300px; max-width: 100%; cursor: pointer; transition: var(--transition);
}
.verify-widget:hover { border-color: var(--brand-soft-border); }
.verify-check {
  width: 26px; height: 26px; border-radius: 6px;
  border: 2px solid var(--gray-text);
  display: grid; place-items: center; flex-shrink: 0;
  color: #fff; font-size: 16px; transition: var(--transition);
}
.verify-check i { opacity: 0; transition: opacity 0.2s; }
.verify-widget.loading { cursor: default; }
.verify-widget.loading .verify-check {
  border-color: var(--brand); border-top-color: transparent;
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
.verify-widget.done { border-color: rgba(17,211,119,0.4); }
.verify-widget.done .verify-check { background: var(--success-green); border-color: var(--success-green); }
.verify-widget.done .verify-check i { opacity: 1; }
.verify-label { font-size: 14px; font-weight: 600; color: var(--dark-text); }
.verify-widget.done .verify-label { color: var(--success-green); font-weight: 700; }

.verify-done {
  display: none; align-items: center; gap: 7px;
  color: var(--success-green); font-size: 14px; font-weight: 700; margin-top: 14px;
}
.verify-done.show { display: inline-flex; }

.guard-actions { display: flex; gap: 12px; margin-top: 28px; }
.guard-actions .btn { flex: 1; height: 56px; }
.guard-refresh {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: var(--radius-ui);
  background: var(--bg-header); border: 1px solid var(--border-color);
  color: var(--gray-text); font-size: 20px;
  display: grid; place-items: center; transition: var(--transition);
}
.guard-refresh:hover { border-color: var(--brand); color: var(--brand-strong); }
.guard-refresh.spin i { animation: spin 0.6s ease; }

.btn:disabled, .btn.is-disabled {
  background: var(--bg-light) !important; color: var(--gray-text) !important;
  box-shadow: none !important; cursor: not-allowed; transform: none !important;
}
.btn:disabled::before { display: none; }

/* Üretilen kod */
.guard-result {
  display: none; margin-top: 26px;
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); padding: 28px; text-align: center;
}
.guard-result.show { display: block; }
.guard-result .gr-label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gray-text); }
.guard-code {
  font-size: 40px; font-weight: 900; letter-spacing: 10px;
  color: var(--dark-text); margin: 12px 0; padding-left: 10px;
}
.gr-actions { display: flex; align-items: center; justify-content: center; gap: 14px; }
.gr-copy {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-ui);
  background: var(--brand-soft); border: 1px solid var(--brand-soft-border);
  color: var(--brand-strong); font-size: 13px; font-weight: 700; transition: var(--transition);
}
.gr-copy:hover { background: var(--brand); color: #fff; }
.guard-timer { font-size: 14px; font-weight: 800; color: var(--success-green); }
.guard-timer.danger { color: var(--danger-red); }
.guard-result.expired .guard-code { color: var(--gray-text); text-decoration: line-through; letter-spacing: 6px; }

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

/* guard-request modal ekstra */
.gm-pending { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 15px; font-weight: 600; color: var(--gray-text); }
.gm-spin i { display: inline-block; animation: spin 0.8s linear infinite; color: var(--brand-strong); font-size: 18px; }
.gm-codebox { padding-top: 4px; }
.gm-code-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gm-code-label { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: var(--gray-text); }
.gm-code-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-green); }
.gm-code { font-size: 40px; font-weight: 900; letter-spacing: 10px; color: var(--success-green); text-align: center; padding-left: 10px; }
.gm-footnote { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--gray-text); margin-top: 8px; }

/* ---------- 10d) DOĞRULA / ANAHTAR SAYFASI ---------- */
.verify-page { max-width: 600px; margin: 0 auto; }

.key-format-hint {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-light); border: 1px solid var(--border-color);
  border-radius: var(--radius-ui); padding: 14px 16px;
  font-size: 13px; font-weight: 600; color: var(--gray-text);
  margin: 28px 0 24px;
}
.key-format-hint i { font-size: 16px; }
.key-format-hint b { color: var(--dark-text); font-family: ui-monospace, monospace; letter-spacing: 0.5px; }

.key-input {
  width: 100%; height: 64px; padding: 0 20px;
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-ui);
  font-size: 20px; font-weight: 700; letter-spacing: 1px;
  color: var(--dark-text); font-family: ui-monospace, monospace; text-transform: uppercase;
  transition: var(--transition);
}
.key-input::placeholder { color: var(--gray-text); font-weight: 600; }
.key-input:focus, .key-input.valid { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.verify-btn { width: 100%; height: 56px; margin-top: 20px; }

.faq-row { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border-color); }
.faq-link { display: inline-flex; align-items: center; gap: 8px; color: var(--gray-text); font-size: 14px; font-weight: 700; transition: var(--transition); }
.faq-link:hover { color: var(--brand-strong); }

/* key-verify modal (terminal görünümü) */
.key-modal-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: grid; place-items: center; padding: 20px;
  background: rgba(10, 12, 16, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.key-modal-overlay.show { opacity: 1; visibility: visible; }
.key-modal {
  width: min(94vw, 440px);
  background: var(--bg-header); border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform: scale(0.94) translateY(10px); transition: transform 0.3s ease;
}
.key-modal-overlay.show .key-modal { transform: none; }
.km-titlebar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--bg-light); border-bottom: 1px solid var(--border-color);
}
.km-dots { display: flex; gap: 6px; }
.km-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.km-dots .r { background: #ff5f57; } .km-dots .y { background: #febc2e; } .km-dots .g { background: #28c840; }
.km-name { font-size: 13px; font-weight: 700; color: var(--gray-text); font-family: ui-monospace, monospace; }
.km-close { margin-left: auto; background: none; border: none; color: var(--gray-text); font-size: 20px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; }
.km-close:hover { background: rgba(0,0,0,0.06); color: var(--dark-text); }
.km-body { padding: 22px 22px 18px; }
.km-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: var(--dark-text);
  padding: 7px 0; opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.km-step.show { opacity: 1; transform: none; }
.km-step .ic { width: 22px; height: 22px; display: grid; place-items: center; color: var(--success-green); font-size: 18px; flex-shrink: 0; }
.km-step .ic .spin-ic { animation: spin 0.7s linear infinite; color: var(--gray-text); }
.km-divider { height: 1px; background: var(--border-color); margin: 14px 0; opacity: 0; transition: opacity 0.3s; }
.km-divider.show { opacity: 1; }
.km-status { display: flex; gap: 44px; opacity: 0; transition: opacity 0.3s; }
.km-status.show { opacity: 1; }
.km-status .lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gray-text); margin-bottom: 4px; }
.km-status .val { font-size: 15px; font-weight: 800; color: var(--success-green); }
.km-note { display: flex; align-items: center; gap: 7px; margin-top: 16px; color: var(--success-green); font-size: 14px; font-weight: 700; opacity: 0; transition: opacity 0.3s; }
.km-note.show { opacity: 1; }
.km-step.err .ic { color: var(--danger-red); }
.km-note.err { color: var(--danger-red); }
.km-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-top: 1px solid var(--border-color); background: var(--bg-top);
  flex-wrap: nowrap;
}
.km-link {
  margin-right: auto; background: none; border: none;
  color: var(--gray-text); font-size: 12.5px; font-weight: 700;
  white-space: nowrap; padding: 0; flex-shrink: 1; min-width: 0;
}
.km-link:hover { color: var(--danger-red); }
.km-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; padding: 0 16px; border-radius: var(--radius-ui);
  font-size: 13px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent; transition: var(--transition); flex-shrink: 0;
}
.km-btn.secondary { background: var(--bg-light); border-color: var(--border-color); color: var(--dark-text); }
.km-btn.secondary:hover { border-color: var(--gray-text); }
.km-btn.primary { background: var(--brand-grad); color: #fff; box-shadow: 0 6px 15px var(--brand-shadow); }
.km-btn.primary:hover { transform: translateY(-1px); }
/* Cooldown sırasında pasif görünüm (inline turuncu stili !important ile bastırır) */
.km-btn:disabled { background: var(--bg-light) !important; color: var(--gray-text) !important; box-shadow: none !important; cursor: not-allowed; transform: none !important; }

/* Dar ekranda kibarca alt alta */
@media (max-width: 460px) {
  .km-footer { flex-wrap: wrap; }
  .km-link { order: 3; margin: 4px auto 0; }
  .km-btn { flex: 1; }
}

/* ---------- 10e) AUTH (giriş / kayıt) ---------- */
@media (max-width: 560px) { .auth-login-btn, .auth-register-btn { display: none; } }
.mobile-menu-auth { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-color); }

.auth-wrap { display: grid; place-items: center; padding: 56px 0; }
.auth-card {
  width: 100%; max-width: 440px;
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); padding: 36px 32px; box-shadow: var(--box-shadow);
}
.auth-head { text-align: center; margin-bottom: 26px; }
.auth-head .logo { justify-content: center; margin-bottom: 18px; font-size: 22px; }
.auth-title { font-size: 24px; font-weight: 900; letter-spacing: -0.5px; }
.auth-sub { color: var(--gray-text); font-size: 14px; margin-top: 6px; }
.auth-field { margin-bottom: 18px; }
.auth-field label { display: block; font-size: 13px; font-weight: 800; color: var(--dark-text); margin-bottom: 8px; }
.auth-input-wrap { position: relative; }
.auth-input-wrap > i.icon-left { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--gray-text); font-size: 18px; pointer-events: none; }
.auth-input {
  width: 100%; height: 54px;
  background: var(--input-bg); border: 1px solid var(--border-color);
  border-radius: var(--radius-ui); padding: 0 16px 0 46px;
  font-size: 15px; font-weight: 600; color: var(--dark-text); transition: var(--transition);
}
.auth-input:focus { outline: none; border-color: var(--brand); background: var(--bg-header); box-shadow: 0 0 0 3px var(--brand-soft); }
.auth-pass-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: none; background: transparent;
  color: var(--gray-text); font-size: 18px; border-radius: 8px; display: grid; place-items: center;
}
.auth-pass-toggle:hover { color: var(--dark-text); background: var(--bg-light); }
.auth-submit { width: 100%; height: 54px; margin-top: 6px; }
.auth-error {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,68,84,0.08); border: 1px solid rgba(255,68,84,0.25);
  color: var(--danger-red); border-radius: var(--radius-ui);
  padding: 12px 14px; font-size: 13px; font-weight: 600; margin-bottom: 18px;
}
.auth-foot { text-align: center; margin-top: 22px; font-size: 14px; color: var(--gray-text); }
.auth-foot a { color: var(--brand-strong); font-weight: 700; }

/* ---------- 10f) PROFİL / OYUNLARIM ---------- */
.profile-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); padding: 18px 22px; box-shadow: var(--card-shadow);
}
.lib-avatar {
  position: relative; flex-shrink: 0;
  width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(135deg, #6d5efc, #574bd6);
  color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 20px;
}
.lib-avatar .edit {
  position: absolute; bottom: -5px; right: -5px;
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--ink-800); color: #fff; font-size: 11px;
  display: grid; place-items: center; border: 2px solid var(--bg-header);
}
.lib-meta { flex: 1; min-width: 0; }
.lib-meta .uname { font-weight: 800; font-size: 15px; color: var(--dark-text); }
.lib-meta .uname .at { color: var(--gray-text); font-weight: 700; }
.lib-meta .ucount { color: var(--gray-text); font-size: 13px; font-weight: 600; margin-top: 2px; }
.lib-suggest-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 10px 18px; border-radius: var(--radius-ui);
  background: var(--bg-header); border: 1px solid var(--border-color);
  color: var(--dark-text); font-size: 13px; font-weight: 700; transition: var(--transition);
}
.lib-suggest-btn:hover { border-color: var(--brand); color: var(--brand-strong); }

.rank-card {
  display: flex; gap: 16px; margin-top: 18px;
  background: rgba(255,179,0,0.05); border: 1px solid rgba(255,179,0,0.22);
  border-radius: var(--radius-card); padding: 22px;
}
.rank-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px; background: rgba(255,179,0,0.12); color: var(--warning-orange);
  display: grid; place-items: center; font-size: 22px;
}
.rank-body { flex: 1; min-width: 0; }
.rank-label { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #b07d10; }
.rank-title { font-size: 18px; font-weight: 900; color: var(--dark-text); margin: 2px 0 8px; }
.rank-desc { color: var(--gray-text); font-size: 13.5px; line-height: 1.6; }
.rank-desc.dim { opacity: 0.8; margin-top: 4px; }
.rank-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; color: var(--brand-strong); font-size: 13px; font-weight: 700; }
.rank-link:hover { color: var(--brand); }

.pending-card {
  display: flex; align-items: center; gap: 16px; margin-top: 16px;
  background: rgba(17,211,119,0.05); border: 1px solid rgba(17,211,119,0.22);
  border-radius: var(--radius-card); padding: 18px 22px;
}
.pending-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px; background: rgba(17,211,119,0.12); color: var(--success-green);
  display: grid; place-items: center; font-size: 22px;
}
.pending-body { flex: 1; min-width: 0; }
.pending-label { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #0a9c58; }
.pending-title { font-size: 16px; font-weight: 900; color: var(--dark-text); margin: 2px 0 1px; }
.pending-sub { color: var(--gray-text); font-size: 12.5px; font-weight: 600; }
.pending-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  height: 44px; padding: 0 20px; border-radius: var(--radius-ui);
  background: linear-gradient(135deg, var(--success-green) 0%, #0db866 100%);
  color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 4px 15px rgba(17,211,119,0.25);
  border: none; transition: var(--transition);
}
.pending-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(17,211,119,0.32); }

/* Kütüphane grid + kart */
.library-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px; margin-top: 32px;
}
.lib-card {
  display: flex; flex-direction: column;
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); overflow: hidden; transition: var(--transition);
}
.lib-card:hover { box-shadow: var(--card-shadow-hover); }
.lib-media { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #2a2f3a, #161a22); }
.lib-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lib-media .ph { font-size: 40px; color: rgba(255,255,255,0.22); }
.lib-platform {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(0,0,0,0.65); color: #fff; font-size: 11px; font-weight: 800;
  padding: 5px 10px; border-radius: 8px; backdrop-filter: blur(4px);
}
.lib-status {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--success-green); color: #fff;
  font-size: 10px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 5px 9px; border-radius: 8px;
}
.lib-status.passive { background: var(--gray-text); }
.lib-body { padding: 16px; }
.lib-title { font-size: 16px; font-weight: 800; color: var(--dark-text); margin-bottom: 14px; }

.cred-field {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-light); border: 1px solid var(--border-color);
  border-radius: var(--radius-ui); padding: 7px 8px 7px 10px; margin-bottom: 8px;
}
.cred-label {
  flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--gray-text); background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: 6px; padding: 4px 8px;
}
.cred-value { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--dark-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred-value.mask { letter-spacing: 2px; }
.cred-btn {
  width: 30px; height: 30px; flex-shrink: 0; border: none; background: transparent;
  color: var(--gray-text); font-size: 16px; border-radius: 6px; display: grid; place-items: center; transition: var(--transition);
}
.cred-btn:hover { background: var(--bg-header); color: var(--brand-strong); }
.cred-btn.copied { color: var(--success-green); }
.lib-guard-btn {
  width: 100%; height: 44px; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--bg-light); border: 1px solid var(--border-color);
  border-radius: var(--radius-ui); color: var(--dark-text); font-size: 13px; font-weight: 700; transition: var(--transition);
}
.lib-guard-btn:hover { border-color: var(--brand); color: var(--brand-strong); background: var(--brand-soft); }

@media (max-width: 600px) {
  .profile-card, .pending-card { flex-wrap: wrap; }
  .lib-suggest-btn, .pending-btn { width: 100%; justify-content: center; }
  .library-grid { grid-template-columns: 1fr; }
}

/* ---------- 10g) ADMIN PANELİ (site içi) ---------- */
.admin-head { text-align: center; margin-bottom: 36px; }
.admin-head h1 { font-size: 40px; font-weight: 900; letter-spacing: -1px; }
.admin-head p { color: var(--gray-text); font-size: 15px; margin-top: 8px; }

.admin-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }

.admin-sidebar {
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); padding: 14px; position: sticky; top: 92px;
}
.admin-menu { display: flex; flex-direction: column; gap: 4px; }
.admin-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-ui);
  font-size: 14px; font-weight: 700; color: var(--gray-text);
  transition: var(--transition);
}
.admin-menu a i { font-size: 18px; }
.admin-menu a:hover { background: var(--bg-light); color: var(--dark-text); }
.admin-menu a.active {
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 6px 15px var(--brand-shadow);
}

.admin-panel {
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); padding: 30px 32px;
}
.admin-panel-title { font-size: 22px; font-weight: 900; letter-spacing: -0.3px; margin-bottom: 24px; }

.admin-flash {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; border-radius: var(--radius-ui);
  font-size: 14px; font-weight: 600; margin-bottom: 22px;
}
.admin-flash.ok { background: rgba(17,211,119,0.08); border: 1px solid rgba(17,211,119,0.25); color: var(--success-green); }
.admin-flash.err { background: rgba(255,68,84,0.08); border: 1px solid rgba(255,68,84,0.25); color: var(--danger-red); }

/* Admin form öğeleri (bento-form temelli) */
.adm-group { margin-bottom: 20px; }
.adm-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.adm-row.two { grid-template-columns: 1fr 1fr; }
.adm-label { display: block; font-size: 13px; font-weight: 800; color: var(--dark-text); margin-bottom: 8px; }
.adm-input, .adm-select {
  width: 100%; height: 52px;
  background: var(--input-bg); border: 1px solid var(--border-color);
  border-radius: var(--radius-ui); padding: 0 16px;
  font-size: 14px; font-weight: 600; color: var(--dark-text);
  transition: var(--transition);
}
.adm-select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2385909e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.adm-input:focus, .adm-select:focus { outline: none; border-color: var(--brand); background: var(--bg-header); box-shadow: 0 0 0 3px var(--brand-soft); }
.adm-help { font-size: 12px; font-weight: 600; color: var(--brand-strong); margin-top: 8px; }
.adm-help.muted { color: var(--gray-text); }

.adm-check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; cursor: pointer; }
.adm-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--brand); flex-shrink: 0; cursor: pointer; }
.adm-check .cl-title { font-size: 14px; font-weight: 700; color: var(--dark-text); }
.adm-check .cl-help { font-size: 12px; font-weight: 600; color: var(--brand-strong); margin-top: 3px; }

.adm-dropzone-row { display: grid; grid-template-columns: 1fr 220px; gap: 14px; }
.adm-dropzone {
  border: 2px dashed var(--border-color); border-radius: var(--radius-ui);
  padding: 30px; text-align: center; cursor: pointer; transition: var(--transition);
}
.adm-dropzone:hover { border-color: var(--brand); }
.adm-dropzone i { font-size: 28px; color: var(--gray-text); }
.adm-dropzone .dz-main { font-size: 14px; font-weight: 700; color: var(--dark-text); margin-top: 8px; }
.adm-dropzone .dz-sub { font-size: 12px; color: var(--gray-text); margin-top: 2px; }
.adm-dropzone img.preview { max-height: 120px; margin: 6px auto 0; border-radius: 8px; }
.adm-gridfind {
  border: 1px dashed var(--brand-soft-border); border-radius: var(--radius-ui);
  display: grid; place-items: center; gap: 6px; color: var(--brand-strong);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: var(--transition);
}
.adm-gridfind:hover { background: var(--brand-soft); }
.adm-gridfind i { font-size: 24px; }

.adm-submit { width: 100%; height: 54px; margin-top: 10px; }

/* Admin tablo */
.adm-table { width: 100%; border-collapse: collapse; }
.adm-table th, .adm-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--border-color); font-size: 14px; }
.adm-table th { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gray-text); }
.adm-table td { font-weight: 600; }
.adm-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.adm-badge.admin { background: rgba(255,68,84,0.12); color: var(--danger-red); }
.adm-badge.user { background: var(--bg-light); color: var(--gray-text); }
.adm-badge.green { background: rgba(17,211,119,0.12); color: var(--success-green); }
.adm-badge.gray { background: var(--bg-light); color: var(--gray-text); }
.adm-mini-btn { padding: 7px 12px; border-radius: var(--radius-ui); font-size: 12px; font-weight: 700; border: 1px solid var(--border-color); background: var(--bg-header); color: var(--dark-text); transition: var(--transition); }
.adm-mini-btn:hover { border-color: var(--brand); color: var(--brand-strong); }
.adm-mini-btn.danger:hover { border-color: var(--danger-red); color: var(--danger-red); }

/* İşlem kayıtları */
.log-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.log-head-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.log-live {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(17,211,119,0.1); border: 1px solid rgba(17,211,119,0.25);
  color: var(--success-green); font-size: 13px; font-weight: 800;
  padding: 6px 12px; border-radius: 999px;
}
.log-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-green); animation: pulse 2s infinite; }
.log-refreshed { font-size: 13px; color: var(--gray-text); font-weight: 600; }
.log-refreshed b { color: var(--dark-text); }
.log-table td { vertical-align: top; }
.log-table .log-date { white-space: nowrap; color: var(--dark-text); font-weight: 700; }
.log-table .log-user { font-weight: 800; color: var(--dark-text); }
.log-table .log-game { color: var(--dark-text); font-weight: 700; max-width: 220px; }
.log-event { font-weight: 800; }
.log-event.green { color: var(--success-green); }
.log-event.red { color: var(--danger-red); }
.log-event.blue { color: var(--primary-blue); }
.log-detail { color: var(--gray-text); font-weight: 600; font-size: 13px; line-height: 1.5; }
.log-detail .log-lbl { color: var(--gray-text); opacity: 0.75; }
.log-detail .log-em { color: var(--dark-text); font-weight: 800; }

/* Kullanıcı Yönetimi */
.um-search { position: relative; margin-bottom: 22px; }
.um-search > i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--gray-text); font-size: 19px; }
.um-search input {
  width: 100%; height: 52px; padding: 0 18px 0 48px;
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-ui); font-size: 14px; font-weight: 500; color: var(--dark-text);
  box-shadow: var(--card-shadow); transition: var(--transition);
}
.um-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.um-list { display: flex; flex-direction: column; gap: 14px; }
.um-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); padding: 18px 20px; transition: var(--transition);
}
.um-card:hover { box-shadow: var(--card-shadow-hover); }
.um-card.banned { opacity: 0.6; }
.um-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.um-info { flex: 1; min-width: 0; }
.um-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.um-name { font-size: 16px; font-weight: 800; color: var(--dark-text); }
.um-role { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.um-role.user { background: var(--bg-light); color: var(--gray-text); }
.um-role.admin { background: rgba(255,68,84,0.12); color: var(--danger-red); }
.um-role.ban { background: rgba(255,68,84,0.12); color: var(--danger-red); }
.um-count { font-size: 13px; font-weight: 600; color: var(--gray-text); margin-top: 5px; }
.um-actions { display: flex; gap: 8px; flex-shrink: 0; }
.um-act-btn {
  width: 40px; height: 36px; border: none; border-radius: 10px;
  display: grid; place-items: center; font-size: 17px; cursor: pointer; transition: var(--transition);
}
.um-act-btn.purple { background: rgba(124,77,255,0.12); color: #7c4dff; }
.um-act-btn.purple:hover { background: #7c4dff; color: #fff; }
.um-act-btn.green { background: rgba(17,211,119,0.12); color: var(--success-green); }
.um-act-btn.green:hover { background: var(--success-green); color: #fff; }
.um-act-btn.yellow { background: rgba(255,179,0,0.16); color: #d89600; }
.um-act-btn.yellow:hover { background: var(--warning-orange); color: #fff; }
.um-act-btn.red { background: rgba(255,68,84,0.12); color: var(--danger-red); }
.um-act-btn.red:hover { background: var(--danger-red); color: #fff; }

/* Admin modal (genel) */
.um-overlay {
  position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px;
  background: rgba(10,12,16,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s;
}
.um-overlay.show { opacity: 1; visibility: visible; }
.um-modal {
  width: min(94vw, 560px); max-height: 88vh; overflow-y: auto;
  background: var(--bg-header); border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  transform: scale(0.96); transition: transform 0.25s ease;
}
.um-overlay.show .um-modal { transform: none; }
.um-modal.sm { width: min(94vw, 440px); }
.um-modal-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px 14px; }
.um-modal-head .um-avatar { width: 50px; height: 50px; }
.um-mh-title { font-size: 20px; font-weight: 900; color: var(--dark-text); }
.um-modal-close { margin-left: auto; width: 34px; height: 34px; border: none; background: transparent; color: var(--gray-text); font-size: 22px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; align-self: flex-start; }
.um-modal-close:hover { background: var(--bg-light); color: var(--dark-text); }
.um-modal-body { padding: 8px 24px 24px; }
.um-section-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--dark-text); margin: 4px 0 14px; }

/* Modal: kütüphane öğesi */
.um-lib-item { display: flex; align-items: center; gap: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: var(--radius-ui); padding: 12px; margin-bottom: 10px; }
.um-lib-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; background: var(--ink-800); display: grid; place-items: center; color: rgba(255,255,255,0.4); font-size: 18px; flex-shrink: 0; }
.um-lib-info { flex: 1; min-width: 0; }
.um-lib-title { font-size: 14px; font-weight: 800; color: var(--dark-text); }
.um-lib-meta { font-size: 12px; font-weight: 600; color: var(--gray-text); margin-top: 2px; }
.um-lib-meta .perm { color: var(--success-green); font-weight: 700; }
.um-lib-del { width: 38px; height: 38px; flex-shrink: 0; border: none; border-radius: 10px; background: rgba(255,68,84,0.1); color: var(--danger-red); font-size: 17px; cursor: pointer; transition: var(--transition); }
.um-lib-del:hover { background: var(--danger-red); color: #fff; }

.um-addbox { border: 1px solid var(--border-color); border-radius: var(--radius-ui); padding: 18px; margin-top: 16px; }
.um-addbox .lbl { font-size: 12px; font-weight: 700; color: var(--gray-text); margin: 12px 0 6px; }
.um-empty { text-align: center; color: var(--gray-text); padding: 18px; font-size: 13px; }

.um-ban-icon { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,68,84,0.1); color: var(--danger-red); display: grid; place-items: center; font-size: 30px; margin: 6px auto 12px; }
.btn-danger { background: var(--danger-red); color: #fff; }
.btn-danger:hover { filter: brightness(0.95); }
.btn-light { background: var(--bg-light); color: var(--dark-text); border: 1px solid var(--border-color); }
.btn-light:hover { border-color: var(--gray-text); }

/* Oyun Yönetimi (admin) */
.gm-search { position: relative; margin-bottom: 22px; }
.gm-search > i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--gray-text); font-size: 19px; }
.gm-search input {
  width: 100%; height: 52px; padding: 0 18px 0 48px;
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-ui); font-size: 14px; font-weight: 500; color: var(--dark-text);
  box-shadow: var(--card-shadow); transition: var(--transition);
}
.gm-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.gm-list { display: flex; flex-direction: column; gap: 14px; }
.gm-card {
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); padding: 20px 22px;
  display: flex; align-items: flex-start; gap: 16px; transition: var(--transition);
}
.gm-card:hover { box-shadow: var(--card-shadow-hover); }
.gm-main { flex: 1; min-width: 0; }
.gm-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.gm-title { font-size: 18px; font-weight: 800; color: var(--dark-text); }
.gm-badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.gm-badge.ozel { background: linear-gradient(135deg,#8b5cf6,#7c3aed); color: #fff; }
.gm-badge.featured { background: var(--brand-grad); color: #fff; }
.gm-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.gm-info { font-size: 14px; color: var(--gray-text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-info b { color: var(--dark-text); font-weight: 800; }
.gm-actions { display: flex; gap: 8px; flex-shrink: 0; }
.gm-act { width: 42px; height: 38px; border: none; border-radius: 10px; display: grid; place-items: center; font-size: 18px; cursor: pointer; transition: var(--transition); }
.gm-act.edit { background: rgba(255,179,0,0.16); color: #d89600; }
.gm-act.edit:hover { background: var(--warning-orange); color: #fff; }
.gm-act.del { background: rgba(255,68,84,0.12); color: var(--danger-red); }
.gm-act.del:hover { background: var(--danger-red); color: #fff; }

/* Düzenle modalı (geniş) */
.um-modal.lg { width: min(94vw, 640px); }
.gm-current-img { position: relative; border-radius: var(--radius-ui); overflow: hidden; margin-top: 6px; }
.gm-current-img img { width: 100%; display: block; max-height: 220px; object-fit: cover; }
.gm-img-remove {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--danger-red); color: #fff; font-size: 18px; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

@media (max-width: 600px) {
  .gm-info-grid { grid-template-columns: 1fr; }
  .gm-card { flex-direction: column; }
  .gm-actions { align-self: flex-end; }
}

/* Anahtar Sorgulama */
.key-lookup { display: flex; gap: 12px; align-items: stretch; }
.key-lookup-search { position: relative; flex: 1; }
.key-lookup-search > i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--gray-text); font-size: 19px; }
.key-lookup-search input {
  width: 100%; height: 52px; padding: 0 18px 0 48px;
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-ui); font-size: 14px; font-weight: 600; color: var(--dark-text);
  font-family: ui-monospace, monospace; transition: var(--transition);
}
.key-lookup-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.key-lookup-btn { height: 52px; padding: 0 26px; flex-shrink: 0; }

.key-card { border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 22px; }
.key-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.key-code { font-family: ui-monospace, monospace; font-size: 16px; font-weight: 800; color: var(--dark-text); }
.key-status { padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.key-status.green { background: rgba(17,211,119,0.12); color: var(--success-green); }
.key-status.orange { background: rgba(255,179,0,0.16); color: #d89600; }
.key-status.gray { background: var(--bg-light); color: var(--gray-text); }
.key-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 14px; color: var(--gray-text); font-weight: 600; }
.key-grid b { color: var(--dark-text); font-weight: 800; }
.key-rel-title { font-size: 17px; font-weight: 800; margin: 24px 0 14px; }
.um-role.used { background: rgba(124,77,255,0.14); color: #7c4dff; }

@media (max-width: 560px) { .key-grid { grid-template-columns: 1fr; } }

/* Duyurular */
.ann-create { border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 24px; margin-bottom: 22px; background: var(--bg-top); }
.ann-title { font-size: 16px; font-weight: 800; color: var(--dark-text); line-height: 1.4; padding-right: 50px; }
.ann-content { color: var(--gray-text); font-size: 14px; line-height: 1.6; margin: 8px 0 12px; }
.ann-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; color: var(--gray-text); }
.ann-meta b { color: var(--dark-text); font-weight: 700; }

/* Oyun Önerileri (kart) */
.sg-list { display: flex; flex-direction: column; gap: 14px; }
.sg-card { position: relative; background: var(--bg-header); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 18px 20px; transition: var(--transition); }
.sg-card:hover { box-shadow: var(--card-shadow-hover); }
.sg-top { display: flex; align-items: center; gap: 12px; }
.sg-name { font-size: 15px; font-weight: 800; color: var(--dark-text); }
.sg-email { font-size: 13px; font-weight: 600; color: var(--gray-text); margin-top: 1px; }
.sg-text { font-size: 15px; color: var(--dark-text); margin: 12px 0 6px; }
.sg-note { font-size: 13px; color: var(--gray-text); margin: 0 0 6px; }
.sg-date { font-size: 12px; font-weight: 600; color: #8aa0c8; }
body.dark-mode .sg-date { color: #6b7e9e; }
.sg-del { position: absolute; top: 16px; right: 16px; width: 40px; height: 38px; border: none; border-radius: 10px; background: rgba(255,68,84,0.1); color: var(--danger-red); font-size: 17px; cursor: pointer; transition: var(--transition); }
.sg-del:hover { background: var(--danger-red); color: #fff; }
.sg-badge { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; vertical-align: middle; }

/* SteamGridDB sonuç grid'i */
.sgdb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.sgdb-item { border: 2px solid var(--border-color); border-radius: var(--radius-ui); overflow: hidden; background: var(--bg-light); cursor: pointer; padding: 0; transition: var(--transition); aspect-ratio: 2/3; }
.sgdb-item:hover { border-color: var(--brand); box-shadow: 0 8px 20px var(--brand-shadow); transform: translateY(-3px); }
.sgdb-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Otomatik tamamlama (kullanıcı arama) */
.ac-wrap { position: relative; }
.ac-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; background: var(--bg-header); border: 1px solid var(--border-color); border-radius: var(--radius-ui); box-shadow: var(--dropdown-shadow); overflow: hidden; max-height: 260px; overflow-y: auto; }
.ac-item { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 14px; font-weight: 700; color: var(--dark-text); cursor: pointer; border-bottom: 1px solid var(--border-color); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--bg-light); }
.ac-sub { font-size: 12px; font-weight: 600; color: var(--gray-text); margin-left: auto; }
.ac-badge { font-size: 10px; font-weight: 800; color: var(--success-green); background: rgba(17,211,119,0.12); border-radius: 999px; padding: 2px 7px; }

/* Bayi kartları */
.dealer-list { display: flex; flex-direction: column; gap: 14px; }
.dealer-card { background: var(--bg-header); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 18px 20px; transition: var(--transition); }
.dealer-card:hover { box-shadow: var(--card-shadow-hover); }
.dealer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dealer-name { font-size: 18px; font-weight: 800; color: var(--dark-text); }
.dealer-email { font-size: 13px; color: var(--gray-text); margin-top: 2px; }
.dealer-balance { font-size: 22px; font-weight: 900; color: var(--dark-text); letter-spacing: -0.5px; }
.dealer-sales { font-size: 12px; color: var(--gray-text); margin-top: 2px; }
.dealer-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.dealer-actions .adm-mini-btn { height: 42px; justify-content: center; }
@media (max-width: 560px) { .dealer-actions { grid-template-columns: 1fr; } }

/* Kayıtsız mod — oyun kartında çoklu hesap blokları */
.lib-acc + .lib-acc { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-color); }
.lib-acc-plat { font-size: 12px; font-weight: 800; color: var(--brand-strong); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.lib-acc .lib-guard-btn { margin-top: 10px; width: 100%; }

/* Zaman aşımı ayarları (admin) */
.to-card { border: 1px solid var(--border-color); border-radius: var(--radius-ui); padding: 16px 18px; margin-bottom: 12px; transition: var(--transition); }
.to-card.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset, 0 2px 12px var(--brand-shadow); }
.to-card .to-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.to-info { flex: 1 1 auto; }
.to-name { font-weight: 800; font-size: 15px; color: var(--dark-text); display: flex; align-items: center; gap: 8px; }
.to-sub { font-size: 12.5px; color: var(--brand-strong); margin-top: 2px; }
.to-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-text); display: inline-block; }
.to-card.on .to-dot { background: var(--success-green); }
.plat-name { flex: 1 1 140px; min-width: 0; }
.to-controls { display: flex; gap: 10px; }
.to-amount { width: 90px; }
.to-unit { width: 110px; }
.to-secs { flex: 0 0 auto; min-width: 90px; text-align: right; font-size: 13px; font-weight: 600; }
.to-total { margin-top: 10px; font-size: 12.5px; }
/* Varsayılan kartta kontroller ayrı satır */
#toDefault .to-controls { margin-top: 14px; }
#toDefault .to-amount { flex: 1 1 auto; width: auto; }
.to-badge { background: rgba(255,148,23,0.12); color: var(--brand-strong); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
/* Toggle switch */
.to-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.to-switch input { opacity: 0; width: 0; height: 0; }
.to-slider { position: absolute; inset: 0; cursor: pointer; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 999px; transition: var(--transition); }
.to-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 50%; transition: var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.to-switch input:checked + .to-slider { background: var(--success-green); border-color: transparent; }
.to-switch input:checked + .to-slider::before { left: calc(100% - 21px); }
.adm-input:disabled, .adm-select:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 600px) {
  .to-card .to-row { gap: 10px; }
  .plat-name { flex: 1 1 100%; }
  .to-controls { flex: 1 1 auto; }
  .to-amount { flex: 1 1 auto; width: auto; }
  .to-secs { flex: 1 1 100%; text-align: left; }
}

/* Rank kademeleri editörü (admin) */
.rank-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr auto; gap: 12px; align-items: end; border: 1px solid var(--border-color); border-radius: var(--radius-ui); padding: 14px; margin-bottom: 10px; }
.rank-row .adm-label { margin-bottom: 6px; }
.rank-del { width: 44px; height: 48px; border: none; border-radius: 10px; background: rgba(255,68,84,0.1); color: var(--danger-red); font-size: 17px; cursor: pointer; }
.rank-del:hover { background: var(--danger-red); color: #fff; }
.rank-games-box { max-height: 200px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-ui); padding: 10px 12px; background: var(--bg-header); }
.rank-game-item { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 14px; font-weight: 600; color: var(--dark-text); cursor: pointer; }
.rank-game-item input { width: 17px; height: 17px; accent-color: var(--brand); }
@media (max-width: 700px) { .rank-row { grid-template-columns: 1fr 1fr; } .rank-row .rank-del { grid-column: 1 / -1; width: 100%; } }

/* Ek hesap bloğu (oyun ekle) */
.acc-block { position: relative; border: 1px solid var(--border-color); border-radius: var(--radius-ui); padding: 16px; margin-bottom: 12px; background: var(--bg-top); }
.acc-block-title { font-size: 12px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--gray-text); margin-bottom: 12px; }
.acc-remove { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: none; border-radius: 8px; background: rgba(255,68,84,0.1); color: var(--danger-red); font-size: 16px; cursor: pointer; display: grid; place-items: center; transition: var(--transition); }
.acc-remove:hover { background: var(--danger-red); color: #fff; }

/* Guard ayarları radio */
.g-radio { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--dark-text); cursor: pointer; }
.g-radio input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }

.adm-placeholder { text-align: center; padding: 60px 20px; color: var(--gray-text); }
.adm-placeholder i { font-size: 48px; opacity: 0.4; }
.adm-placeholder h3 { margin: 14px 0 4px; color: var(--dark-text); font-size: 18px; }

@media (max-width: 991px) {
  .admin-layout { grid-template-columns: 1fr; }
  /* Grid blowout fix: item'lar min-width:auto yüzünden viewport'u taşırmasın */
  .admin-layout > * { min-width: 0; }
  .admin-sidebar { position: static; }
}
@media (max-width: 600px) {
  .adm-row, .adm-row.two { grid-template-columns: 1fr; }
  .adm-dropzone-row { grid-template-columns: 1fr; }
  .admin-head h1 { font-size: 30px; }
}

/* ---------- 10j) ÖDÜLLER (rank) ---------- */
.rwd-current { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--bg-header); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 24px 26px; }
.rwd-current-label { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gray-text); }
.rwd-current-name { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; margin: 4px 0 8px; }
.rwd-current-sub { color: var(--gray-text); font-size: 14px; line-height: 1.6; max-width: 460px; }
.rwd-current-sub b { color: var(--brand-strong); }
.rwd-current-note { font-size: 12px; color: var(--gray-text); margin-top: 8px; opacity: 0.85; }
.rwd-verify-btn { flex-shrink: 0; height: 56px; }

.rwd-section-title { font-size: 18px; font-weight: 800; margin: 28px 0 14px; display: flex; align-items: center; gap: 8px; }

.rwd-gift-list { display: flex; flex-direction: column; gap: 10px; }
.rwd-gift { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--bg-header); border: 1px solid var(--border-color); border-radius: var(--radius-ui); padding: 14px 18px; }
.rwd-gift-code { font-family: ui-monospace, monospace; font-size: 15px; font-weight: 800; color: var(--dark-text); letter-spacing: 0.5px; }
.rwd-gift-sub { font-size: 12px; color: var(--gray-text); font-weight: 600; margin-top: 2px; }
.rwd-gift-copy { height: 44px; flex-shrink: 0; }

.rwd-tier-list { display: flex; flex-direction: column; gap: 12px; }
.rwd-tier { background: var(--bg-header); border: 1px solid var(--border-color); border-radius: var(--radius-ui); padding: 16px 18px; opacity: 0.7; }
.rwd-tier.reached { opacity: 1; }
.rwd-tier-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.rwd-tier-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--bg-light); color: var(--gray-text); font-size: 19px; }
.rwd-tier-info { flex: 1; min-width: 0; }
.rwd-tier-name { font-size: 16px; font-weight: 800; color: var(--dark-text); }
.rwd-tier-meta { font-size: 12.5px; color: var(--gray-text); margin-top: 2px; }
.rwd-reward { color: var(--primary-blue); font-weight: 700; }
.rwd-tier-count { font-size: 15px; font-weight: 800; color: var(--dark-text); flex-shrink: 0; }
.rwd-tier-bar { height: 8px; border-radius: 999px; background: var(--bg-light); overflow: hidden; }
.rwd-tier-bar i { display: block; height: 100%; background: var(--gray-text); border-radius: 999px; transition: width 0.4s ease; }

@media (max-width: 600px) {
  .rwd-current { flex-direction: column; align-items: stretch; }
  .rwd-verify-btn { width: 100%; }
  .rwd-current-name { font-size: 22px; }
  .rwd-gift { flex-wrap: wrap; }
  .rwd-gift-copy { width: 100%; justify-content: center; }
}

/* ---------- 10i) SİTE DUYURU POPUP ---------- */
.ann-popup-overlay {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px;
  background: rgba(10,12,16,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.ann-popup-overlay.show { opacity: 1; visibility: visible; }
.ann-popup {
  position: relative; width: min(94vw, 460px);
  background: var(--bg-header); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); padding: 30px 28px 24px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  transform: scale(0.94) translateY(10px); transition: transform 0.3s ease;
}
.ann-popup-overlay.show .ann-popup { transform: none; }
.ann-popup-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: none; background: var(--bg-light); color: var(--gray-text); font-size: 20px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.ann-popup-close:hover { background: var(--danger-red); color: #fff; }
.ann-popup-icon { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--brand-grad); color: #fff; font-size: 30px; box-shadow: 0 8px 22px var(--brand-shadow); }
.ann-popup-title { font-size: 21px; font-weight: 900; letter-spacing: -0.3px; margin-bottom: 10px; }
.ann-popup-body { color: var(--gray-text); font-size: 15px; line-height: 1.6; white-space: pre-line; }
.ann-popup-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.ann-popup-actions .btn { height: 48px; }

/* ---------- 11) FOOTER (footer.md) ---------- */
.modern-footer-bg {
  background: linear-gradient(180deg, #11141a 0%, #0a0c10 100%);
  border-top: 1px solid var(--ink-border);
  color: #8b949e;
  padding: 64px 0 28px;
  margin-top: 8px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer-brand .logo { color: #fff; margin-bottom: 14px; }
.footer-brand p { max-width: 280px; font-size: 14px; }
.footer-col h5 { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; margin: 0 0 18px; }
.footer-col a { display: block; padding: 7px 0; font-size: 14px; font-weight: 600; transition: var(--transition); }
.footer-col a:hover { color: #fff; }
.modern-footer-social { display: flex; gap: 12px; }
.modern-footer-social a {
  width: 40px; height: 40px; border-radius: var(--radius-ui);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  display: grid; place-items: center; color: #8b949e; font-size: 18px;
  transition: var(--transition);
}
.modern-footer-social a:hover { background: rgba(255,255,255,0.1); color: #fff; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: space-between; align-items: center; font-size: 13px;
}
.footer-bottom .credit { display: inline-flex; align-items: center; gap: 7px; }
.footer-bottom .credit b { color: #fff; }

/* ---------- 12) ANİMASYONLAR (11-animasyonlar.md) ---------- */
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.7; } }
@keyframes navActiveBarIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ---------- 13) RESPONSIVE (08-responsive.md) ---------- */
@media (max-width: 1100px) { .hero-title { font-size: 52px; } }

@media (max-width: 991px) {
  .main-nav { display: none; }
  .header-hamburger-btn { display: grid; }
  /* Mobilde header sade: sadece hamburger kalır, gerisi yan menüde */
  .header-actions > *:not(.header-hamburger-btn) { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-cards { max-width: 520px; }
  .testi-grid { grid-template-columns: 1fr; gap: 28px; }
  .cta-band { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 767px) {
  .container { padding: 0 16px; }
  .section { padding: 48px 0; }
  .section-title { font-size: 27px; }
  .hero { padding: 48px 0 40px; }
  .hero-title { font-size: 40px; letter-spacing: -1px; }
  .hero-desc { font-size: 16px; }
  .hero-actions .btn { flex: 1; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .feature-grid { grid-template-columns: 1fr; gap: 16px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 28px 12px; margin-top: 28px; }
  .step { padding: 0 4px; }
  .step:not(:last-child)::after { display: none; }
  .hero-cards { grid-template-columns: 1fr 1fr; }
  .cta-left { padding: 36px 24px; }
  .cta-left h2 { font-size: 28px; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; justify-content: center; }
  .cta-right { padding: 32px 24px; }
  .cta-right .big { font-size: 54px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .header-top-label .txt { display: none; }
  .mobile-bottom-nav { display: block; }
  body { padding-bottom: 72px; }   /* alt nav için boşluk */
  .modern-footer-bg { margin-bottom: 0; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-cards { grid-template-columns: 1fr; }
  .hero-card.span-2 { grid-column: span 1; }
  .hero-card { padding: 18px; }
  .hero-card--dark .big { font-size: 34px; }
  .hero-card .rating-num { font-size: 30px; }
  /* Adımlar: küçük telefonda daha kompakt ikon/yazı */
  .step-icon { width: 56px; height: 56px; font-size: 22px; margin-bottom: 12px; }
  .step h4 { font-size: 15px; }
  .step p { font-size: 12.5px; }
}

/* =====================================================================
   MOBİL İNCE AYAR — tüm sayfalar için kapsamlı dokunuşlar
   ===================================================================== */

/* Yatay taşmayı engelle (mobilde sağa kayma olmasın) */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }

@media (max-width: 991px) {
  /* Admin sol menü → yatay kaydırılan şerit (dikeyde yer kaplamasın) */
  .admin-sidebar { position: static; padding: 8px; margin-bottom: 4px; min-width: 0; overflow: hidden; }
  .admin-menu { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
  .admin-menu::-webkit-scrollbar { display: none; }
  .admin-menu a { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; }
  /* İçerikteki geniş öğeler (tablolar) panel içinde kaydırılsın, sayfayı taşırmasın */
  .admin-panel { overflow-x: hidden; }
  .adm-table-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 767px) {
  /* Genel altlık */
  .section { padding: 44px 0; }
  .section-title { font-size: 26px; }
  .container, .container.wide { padding: 0 16px; }

  /* Admin paneli */
  .admin-head h1 { font-size: 28px; }
  .admin-head { margin-bottom: 24px; }
  .admin-panel { padding: 18px 16px; }
  .admin-panel-title { font-size: 19px; }

  /* Başlık + buton satırları sarılsın (log-head: Guard/Bayi/Duyuru başlıkları) */
  .log-head { flex-wrap: wrap; gap: 10px; }
  .log-head .btn-sm { width: 100%; justify-content: center; }
  .log-head-right { width: 100%; justify-content: space-between; }

  /* Tüm form satırları tek sütun */
  .adm-row, .adm-row.two { grid-template-columns: 1fr; }

  /* Tablolar: kompakt + yatay kaydırma (sarmalayıcılar zaten overflow-x) */
  .adm-table { font-size: 13px; }
  .adm-table th, .adm-table td { padding: 10px 10px; }

  /* Dokunma hedefleri (min 40-44px) */
  .adm-mini-btn { min-height: 40px; }
  .gf-btn, .cf-btn { min-height: 40px; }

  /* Oyun Seçimi durum çubuğu dikey */
  .sel-status { flex-wrap: wrap; }
  .sel-status .sel-progress { order: 3; flex: 1 0 100%; }
  .sel-confirm { width: 100%; }
  .sel-hero h1 { font-size: 30px; }
  .sel-hero .sel-icon { width: 64px; height: 64px; font-size: 30px; }
  .sel-toolbar { flex-direction: column; align-items: stretch; }
  .sel-filters { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .sel-filters::-webkit-scrollbar { display: none; }

  /* Guard / kod modalları içerik taşarsa kaydırılsın */
  .key-modal { max-height: 92vh; overflow-y: auto; }
  .um-modal { max-height: 92vh; }

  /* Profil rank/pending kartları */
  .rank-card, .pending-card { padding: 18px 16px; }

  /* SteamGridDB grid daralt */
  .sgdb-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

@media (max-width: 480px) {
  .admin-head h1 { font-size: 23px; }
  .admin-panel { padding: 16px 13px; }
  .section-title { font-size: 23px; }

  /* Büyük kod yazıları küçült */
  .gm-code, .guard-code { font-size: 32px; letter-spacing: 6px; }
  .key-code, .cred-value.mask { font-size: 13px; }

  /* Modal başlık/gövde sıkılaştır */
  .um-modal-head { padding: 18px 18px 12px; }
  .um-modal-body { padding: 6px 18px 20px; }
  .um-mh-title { font-size: 18px; }

  /* Bayi/öneri/duyuru kartları */
  .dealer-balance { font-size: 19px; }
  .dealer-card, .sg-card, .um-card, .gm-card, .lib-card, .stat-card, .feature-card { padding: 16px 14px; }

  /* Oyun grid 2 sütun zaten; kart başlık küçült */
  .gc-title { font-size: 14px; }
  .stat-value { font-size: 28px; }
}