/* =========================================================================
 * wmt2.css — World Memory Test 2.0 Tasarım Sistemi (mockup-aligned)
 * -------------------------------------------------------------------------
 * Bu dosya mevcut style.v2.css (neümorfik) token'larına DOKUNMAZ.
 * Yalnızca mockup'ın flat-modern estetiğini gerektiren yüzeyleri override eder:
 *  - .navbar / topbar
 *  - .footer
 *  - .container.page-content
 *  - 2.0 rozeti ve marka alanı
 *
 * Yükleme sırası: style.v2.css sonra, wmt2.css (header.php içinde)
 * Cascade sıralaması gereği wmt2.css daima SONRA gelir ki kazansın.
 * ========================================================================= */

:root {
  /* ── Marka renkleri (mockup) ────────────────────────────────── */
  --wmt2-navy:    #142044;
  --wmt2-purple:  #6547f5;
  --wmt2-purple2: #7b4cff;
  --wmt2-blue:    #3189ee;
  --wmt2-cyan:    #31c7d1;

  /* ── Yüzeyler ─────────────────────────────────────────────── */
  --wmt2-bg:      #Ece7e0;
  --wmt2-card:    #ffffff;
  --wmt2-muted:   #74809b;
  --wmt2-line:    #e9edf5;

  /* ── Efektler ─────────────────────────────────────────────── */
  --wmt2-shadow:  0 8px 28px rgba(31, 45, 82, 0.08);
  --wmt2-shadow-sm: 0 4px 14px rgba(31, 45, 82, 0.06);
  --wmt2-shadow-hover: 0 14px 38px rgba(101, 71, 245, 0.14);
  --wmt2-radius:    20px;
  --wmt2-radius-sm: 12px;
  --wmt2-radius-lg: 28px;

  /* ── Tipografi (mockup'taki hissi yakalamak için) ────────── */
  --wmt2-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ── Dark mode (mevcut [data-theme="dark"] ile uyumlu) ────────
 * Açık temadaki sıcak krem tonu (#Ece7e0) ile uyum için tüm palet
 * aynı sıcak/kahverengi ailesinden seçildi (eski soğuk lacivert çıkarıldı). */
:root[data-theme="dark"] {
  --wmt2-bg:     #1f1c19;
  --wmt2-card:   #2a2622;
  --wmt2-muted:  #9a948a;
  --wmt2-line:   #38332d;
  --wmt2-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  --wmt2-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* ──────────────────────────────────────────────────────────────────────
 * TOPBAR (mockup) — eski .navbar'ı modern flat görünüme taşır
 * -------------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 76px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--wmt2-card);
  border-bottom: 1px solid var(--wmt2-line);
  box-shadow: var(--wmt2-shadow-sm);
  font-family: var(--wmt2-font);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
          backdrop-filter: saturate(180%) blur(8px);
}

/* Marka alanı — SVG beyin + isim + 2.0 rozeti */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--wmt2-navy);
  font-weight: 800;
}
:root[data-theme="dark"] .navbar-brand { color: #fff; }

.navbar-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--wmt2-purple), var(--wmt2-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(101, 71, 245, 0.35);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.navbar-brand:hover .navbar-brand-mark {
  transform: rotate(8deg) scale(1.06);
}
.navbar-brand-mark svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  display: block;
}

.navbar-brand-text {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--wmt2-navy);
}
:root[data-theme="dark"] .navbar-brand-text { color: #fff; }

.navbar-brand-version {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wmt2-purple), var(--wmt2-cyan));
  color: #fff;
  letter-spacing: 0.06em;
  margin-left: 4px;
  line-height: 1.4;
}

/* Menü linkleri — modern, yumuşak hover */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}
.navbar-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--wmt2-radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--wmt2-muted);
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.navbar-nav a:hover {
  background: rgba(101, 71, 245, 0.08);
  color: var(--wmt2-purple);
  transform: translateY(-1px);
}
.navbar-nav a.active {
  background: linear-gradient(135deg, rgba(101,71,245,.12), rgba(49,199,209,.08));
  color: var(--wmt2-purple);
}

/* Nav iconları (emoji → SVG yolu) */
.navbar-nav .nav-ico,
.nav-more-menu .nav-more-icon,
.mob-nav-list .mob-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 2px;
  color: currentColor;
  font-size: 0; /* emoji'yi gizle */
}
.navbar-nav .nav-ico svg,
.nav-more-menu .nav-more-icon svg,
.mob-nav-list .mob-nav-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Sağ taraf — dil + tema + bildirim + avatar */
.navbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.lang-select-wrapper select.lang-select,
.navbar-controls select.lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--wmt2-bg);
  border: 1px solid var(--wmt2-line);
  border-radius: 10px;
  padding: 8px 30px 8px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wmt2-navy);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2374809b'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  transition: border-color .2s ease;
}
:root[data-theme="dark"] .lang-select-wrapper select.lang-select,
:root[data-theme="dark"] .navbar-controls select.lang-select {
  color: #fff;
  background-color: rgba(255,255,255,0.05);
}
.lang-select-wrapper select.lang-select:hover,
.navbar-controls select.lang-select:hover { border-color: var(--wmt2-purple); }

/* Tema / ikon butonları */
.btn-theme-toggle,
.header-user-btn,
.header-login-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: var(--wmt2-bg) !important;
  border: 1px solid var(--wmt2-line) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--wmt2-navy);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
:root[data-theme="dark"] .btn-theme-toggle,
:root[data-theme="dark"] .header-user-btn,
:root[data-theme="dark"] .header-login-btn { color: #fff; }

.btn-theme-toggle:hover,
.header-user-btn:hover,
.header-login-btn:hover {
  border-color: var(--wmt2-purple) !important;
  transform: translateY(-1px);
}

.header-avatar,
.header-avatar-fallback {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 2px solid var(--wmt2-purple) !important;
}
.header-avatar-fallback {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--wmt2-purple), var(--wmt2-blue));
  color: #fff !important;
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
}

/* "More" (•••) açılır menüsü */
.nav-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--wmt2-bg);
  border: 1px solid var(--wmt2-line);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--wmt2-navy);
}
:root[data-theme="dark"] .nav-more-btn { color: #fff; }
.nav-more-btn:hover,
.nav-more-btn[aria-expanded="true"] {
  border-color: var(--wmt2-purple);
  background: rgba(101, 71, 245, 0.08);
  color: var(--wmt2-purple);
}
.nav-more-menu {
  background: var(--wmt2-card);
  border: 1px solid var(--wmt2-line);
  border-radius: var(--wmt2-radius-sm);
  box-shadow: var(--wmt2-shadow);
  padding: 6px;
}
.nav-more-menu a {
  color: var(--wmt2-navy);
}
:root[data-theme="dark"] .nav-more-menu a { color: #fff; }
.nav-more-menu a.active { background: var(--wmt2-purple); color: #fff; }

/* Hamburger butonu */
.hamburger {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--wmt2-bg);
  border: 1px solid var(--wmt2-line);
  cursor: pointer;
}
.hamburger:hover { border-color: var(--wmt2-purple); }
.hamburger span { background: var(--wmt2-navy); }
:root[data-theme="dark"] .hamburger span { background: #fff; }

/* Mobil drawer */
.mobile-nav-drawer {
  background: var(--wmt2-card) !important;
  border-left: 1px solid var(--wmt2-line) !important;
  box-shadow: -20px 0 60px rgba(31, 45, 82, 0.18) !important;
}
.mob-nav-header {
  border-bottom: 1px solid var(--wmt2-line) !important;
}
.mob-nav-brand {
  color: var(--wmt2-purple) !important;
}
.mob-nav-list a {
  color: var(--wmt2-navy) !important;
}
:root[data-theme="dark"] .mob-nav-list a { color: #fff !important; }
.mob-nav-list a.active {
  background: rgba(101, 71, 245, 0.12) !important;
  color: var(--wmt2-purple) !important;
}
.mob-nav-list a.active::before {
  background: var(--wmt2-purple) !important;
}
.mob-lang-btn,
.mob-theme-btn {
  background: var(--wmt2-bg) !important;
  border: 1px solid var(--wmt2-line) !important;
  color: var(--wmt2-navy) !important;
}
:root[data-theme="dark"] .mob-lang-btn,
:root[data-theme="dark"] .mob-theme-btn { color: #fff !important; }
.mob-lang-btn.active {
  background: var(--wmt2-purple) !important;
  color: #fff !important;
  border-color: var(--wmt2-purple) !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * CONTAINER — mockup'taki 1500px max-width
 * -------------------------------------------------------------------- */
.container.page-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px;
  font-family: var(--wmt2-font);
}

/* ──────────────────────────────────────────────────────────────────────
 * FOOTER — flat modern
 * -------------------------------------------------------------------- */
footer {
  margin-top: 60px;
  padding: 32px 28px;
  background: var(--wmt2-card);
  border-top: 1px solid var(--wmt2-line);
  font-family: var(--wmt2-font);
}
.footer-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--wmt2-muted);
}
:root[data-theme="dark"] footer { color: var(--wmt2-muted); }
.footer-text { color: var(--wmt2-muted); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-links a {
  color: var(--wmt2-muted);
  text-decoration: none;
  font-weight: 600;
  transition: color .15s ease;
}
.footer-links a:hover { color: var(--wmt2-purple); }
.footer-social a {
  background: var(--wmt2-bg) !important;
  color: var(--wmt2-muted) !important;
  border: 1px solid var(--wmt2-line);
}
.footer-social a:hover {
  background: var(--wmt2-purple) !important;
  color: #fff !important;
  border-color: var(--wmt2-purple);
}

/* ──────────────────────────────────────────────────────────────────────
 * MOBİL breakpoint — topbar yüksekliği ve padding küçülür
 * -------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .navbar { padding: 0 16px; height: 64px; gap: 12px; }
  .navbar-brand-text { font-size: 0.85rem; }
  .navbar-nav { display: none; }
  .nav-more { display: none; }
  .hamburger { display: flex; }
  .container.page-content { padding: 20px 14px; }
}
@media (max-width: 480px) {
  .navbar { padding: 0 12px; height: 60px; }
  .navbar-brand-text { font-size: 0.78rem; }
  .navbar-brand-version { font-size: 0.55rem; padding: 1px 6px; }
}

/* ════════════════════════════════════════════════════════════════
 * GAMECARD — M2 mockup-aligned bileşen stilleri
 * ════════════════════════════════════════════════════════════════ */

.gc-card {
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  min-height: 132px;
  padding: 16px;
  border-radius: 17px;
  background: var(--wmt2-card);
  border: 1px solid var(--wmt2-line);
  box-shadow: var(--wmt2-shadow-sm);
  text-decoration: none;
  color: var(--wmt2-navy);
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              box-shadow .25s ease,
              border-color .2s ease;
  overflow: hidden;
  font-family: var(--wmt2-font);
}
:root[data-theme="dark"] .gc-card { color: #fff; }

.gc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wmt2-shadow-hover);
  border-color: var(--wmt2-purple);
}
.gc-card[data-accent="purple"] { border-left: 4px solid var(--wmt2-purple); }
.gc-card[data-accent="cyan"]   { border-left: 4px solid var(--wmt2-cyan); }
.gc-card[data-accent="gold"]   { border-left: 4px solid #f5a623; }
.gc-card[data-accent="cyan-purple"] {
  border-left: 4px solid;
  border-image: linear-gradient(180deg, var(--wmt2-purple), var(--wmt2-cyan)) 1;
}

.gc-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 100px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(101,71,245,.10), rgba(49,199,209,.08));
  font-size: 4.5rem;
  overflow: hidden;
  flex-shrink: 0;
}
.gc-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.gc-emoji { line-height: 1; }

.gc-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.gc-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wmt2-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root[data-theme="dark"] .gc-title { color: #fff; }
.gc-desc {
  font-size: 0.875rem;
  color: #4a5468;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:root[data-theme="dark"] .gc-desc { color: #c8c2b6; }

.gc-bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.gc-level {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(101,71,245,.10);
  color: var(--wmt2-purple);
  font-size: 0.72rem;
  font-weight: 700;
}
.gc-score {
  margin-left: auto;
  font-weight: 700;
  color: var(--wmt2-blue);
  font-size: 0.85rem;
}
.gc-play {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wmt2-purple), var(--wmt2-blue));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  transition: transform .2s ease;
}
.gc-card:hover .gc-play { transform: translateX(2px); }

/* Favori yıldız — sağ üst (kart köşesi) */
.gc-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #f5a623;
  padding: 0;
  transition: transform .2s ease, background .2s ease;
  z-index: 2;
}
:root[data-theme="dark"] .gc-fav { background: rgba(0,0,0,.4); }
.gc-fav:hover { transform: scale(1.1); background: #fff; }
.gc-fav svg { width: 18px; height: 18px; }
.gc-fav[aria-pressed="true"] { color: #f5a623; }

/* NEW rozeti */
.gc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  z-index: 2;
}
.gc-badge-new {
  background: linear-gradient(135deg, #f5a623, #e94e77);
  color: #fff;
}

/* ── Mini varyant (ana sayfa tier-4) ─────────────────────── */
.gc-card.gc-mini {
  grid-template-columns: 60px 1fr;
  min-height: 92px;
  padding: 12px 14px;
  gap: 12px;
}
.gc-visual-mini {
  width: 60px;
  height: 60px;
  font-size: 1.7rem;
  border-radius: 12px;
}

/* ── Featured varyant (Major System) ──────────────────────── */
.gc-card.gc-featured {
  grid-template-columns: 100px 1fr;
  border-image: linear-gradient(135deg, var(--wmt2-purple), var(--wmt2-cyan)) 1;
  border-left: 4px solid;
  background: linear-gradient(135deg, rgba(101,71,245,.05), rgba(49,199,209,.03));
}
.gc-visual-feat {
  width: 100px;
  height: 100px;
  font-size: 2.2rem;
}

/* ── Bölüm başlığı ───────────────────────────────────────── */
.gc-section {
  margin: 32px 0 14px;
}
.gc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.gc-section-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--wmt2-navy);
  letter-spacing: -0.01em;
}
:root[data-theme="dark"] .gc-section-title { color: #fff; }
.gc-section-link {
  color: var(--wmt2-purple);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.gc-section-link:hover { text-decoration: underline; }

/* ── Grid (mockup 4 sütun desktop) ───────────────────────── */
.gc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 900px) {
  .gc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .gc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobil */
@media (max-width: 720px) {
  .gc-card { grid-template-columns: 80px 1fr; min-height: 110px; padding: 12px; gap: 12px; }
  .gc-visual { width: 80px; height: 80px; font-size: 3rem; }
  .gc-card.gc-mini { grid-template-columns: 56px 1fr; min-height: 80px; padding: 10px 12px; }
  .gc-visual-mini { width: 56px; height: 56px; font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gc-card, .gc-card:hover, .gc-fav, .gc-play { transition: none !important; transform: none !important; }
}