/* ============================================================================
   SMURF MARKT — "NOVA" REDESIGN (ajans-kalite görsel katman)
   Altyapıya dokunmaz: en son yüklenir, mevcut sınıfları yeniden giydirir.
   GERİ ALMAK İÇİN: master.njk içindeki redesign.css satırını sil, yeter.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- 1) TOKENLAR ---------- */
:root {
  --nv-bg: #070b16;
  --nv-bg-2: #0c1222;
  --nv-surface: rgba(255, 255, 255, .035);
  --nv-surface-2: rgba(255, 255, 255, .06);
  --nv-line: rgba(255, 255, 255, .08);
  --nv-line-strong: rgba(255, 255, 255, .14);
  --nv-text: #eef2ff;
  --nv-muted: rgba(226, 232, 255, .55);
  --nv-a: #6366f1;             /* indigo   */
  --nv-b: #22d3ee;             /* cyan     */
  --nv-c: #a855f7;             /* violet   */
  --nv-grad: linear-gradient(120deg, var(--nv-a), var(--nv-c) 50%, var(--nv-b));
  --nv-grad-soft: linear-gradient(120deg, rgba(99,102,241,.16), rgba(168,85,247,.10) 50%, rgba(34,211,238,.14));
  --nv-radius: 16px;
  --nv-radius-sm: 12px;
  --nv-shadow: 0 20px 60px rgba(2, 6, 23, .55);
  --nv-glow: 0 0 0 1px rgba(99,102,241,.35), 0 10px 40px rgba(99,102,241,.28);
  --nv-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2) TABAN ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', var(--bs-font-sans-serif), sans-serif !important;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(1000px 600px at -10% 20%, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, rgba(168,85,247,.10), transparent 60%),
    linear-gradient(180deg, var(--nv-bg), var(--nv-bg-2) 60%, var(--nv-bg));
  background-attachment: fixed;
  color: var(--nv-text);
  letter-spacing: .01em;
}
h1, h2, h3, h4, .sm-hero__title, .category-main-title, .game-marquee-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  letter-spacing: -.02em;
}
::selection { background: rgba(99,102,241,.45); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--nv-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99,102,241,.6), rgba(34,211,238,.5));
  border-radius: 99px; border: 2px solid var(--nv-bg);
}
kbd {
  background: var(--nv-surface-2); border: 1px solid var(--nv-line-strong);
  border-radius: 6px; padding: 2px 7px; font-size: 11px; color: var(--nv-muted);
}

/* ---------- 3) NAVBAR (buzlu cam) ---------- */
.sm-nav, nav.navbar {
  background: rgba(9, 13, 26, .72) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--nv-line) !important;
  box-shadow: 0 8px 30px rgba(2, 6, 23, .35);
}
.sm-nav__link, .nav-link {
  font-weight: 500; font-size: 14px;
  border-radius: 10px; transition: all .22s var(--nv-ease);
}
.sm-nav__link:hover { background: var(--nv-surface-2); transform: translateY(-1px); }
.sm-nav__brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.01em; }
.sm-nav__dropdown, .dropdown-menu {
  background: rgba(13, 18, 34, .92) !important;
  backdrop-filter: blur(20px);
  border: 1px solid var(--nv-line-strong) !important;
  border-radius: 14px !important;
  box-shadow: var(--nv-shadow) !important;
  overflow: hidden; padding: 6px !important;
}
.dropdown-item { border-radius: 9px; transition: all .16s; padding: 9px 12px; }
.dropdown-item:hover { background: var(--nv-grad-soft) !important; }

/* ---------- 4) BUTONLAR ---------- */
.btn { border-radius: 12px !important; font-weight: 600; transition: all .25s var(--nv-ease) !important; }
.btn-primary, .sm-hero__cta, .sm-buy__cta {
  background: var(--nv-grad) !important;
  background-size: 160% 160% !important;
  border: none !important;
  box-shadow: 0 8px 28px rgba(99,102,241,.35);
}
.btn-primary:hover, .sm-hero__cta:hover, .sm-buy__cta:hover:not(:disabled) {
  background-position: 90% 50% !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(99,102,241,.5);
}
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary {
  border: 1px solid var(--nv-line-strong) !important;
  background: var(--nv-surface) !important;
  color: var(--nv-text) !important;
}
.btn-outline-primary:hover {
  border-color: rgba(99,102,241,.6) !important;
  background: rgba(99,102,241,.12) !important;
  transform: translateY(-1px);
}

/* ---------- 5) HERO ---------- */
.sm-hero { border-bottom: 1px solid var(--nv-line); }
.sm-hero__title {
  font-weight: 700 !important;
  background: linear-gradient(120deg, #fff 30%, #c7d2fe 55%, #67e8f9);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 30px rgba(99,102,241,.25));
}
.sm-hero__subtitle { color: var(--nv-muted) !important; font-size: 17px; }
.sm-hero__badge {
  background: var(--nv-surface-2) !important;
  border: 1px solid var(--nv-line-strong) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.sm-hero__badge-dot {
  background: #34d399 !important;
  box-shadow: 0 0 0 4px rgba(52,211,153,.18), 0 0 12px rgba(52,211,153,.8) !important;
}
.sm-hero__search {
  background: rgba(13, 18, 34, .7) !important;
  border: 1px solid var(--nv-line-strong) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(14px);
  transition: all .25s var(--nv-ease);
  box-shadow: var(--nv-shadow);
}
.sm-hero__search:hover { border-color: rgba(99,102,241,.55) !important; box-shadow: var(--nv-glow); }
.sm-hero__stat-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }

/* ---------- 6) ÜRÜN KARTLARI (gradyan halka + cam) ---------- */
.sm-pcard, .card.sm-pcard {
  position: relative;
  background: var(--nv-surface) !important;
  border: 1px solid var(--nv-line) !important;
  border-radius: var(--nv-radius) !important;
  overflow: hidden;
  transition: transform .3s var(--nv-ease), box-shadow .3s var(--nv-ease), border-color .3s;
  backdrop-filter: blur(6px);
}
.sm-pcard::after {           /* hover'da gradyan halka */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; background: var(--nv-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.sm-pcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(2,6,23,.6), 0 0 40px rgba(99,102,241,.12);
  border-color: transparent !important;
}
.sm-pcard:hover::after { opacity: 1; }
.sm-pcard__media { overflow: hidden; }
.sm-pcard__img { transition: transform .5s var(--nv-ease); }
.sm-pcard:hover .sm-pcard__img { transform: scale(1.06); }
.sm-pcard__title { font-weight: 600; letter-spacing: -.01em; }
.sm-pcard__badge {
  border-radius: 999px !important; font-weight: 700; letter-spacing: .04em;
  backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.sm-pcard__btn {
  background: var(--nv-surface-2) !important;
  border: 1px solid var(--nv-line-strong) !important;
  border-radius: 12px !important; font-weight: 600;
  transition: all .22s var(--nv-ease);
}
.sm-pcard:hover .sm-pcard__btn {
  background: var(--nv-grad) !important; border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(99,102,241,.4);
}

/* ---------- 7) KATEGORİ BÖLÜMLERİ ---------- */
.category-section { position: relative; }
.category-toggle-bar {
  background: var(--nv-surface) !important;
  border: 1px solid var(--nv-line) !important;
  border-radius: var(--nv-radius) !important;
  padding: 18px 22px !important;
  transition: all .25s var(--nv-ease);
  backdrop-filter: blur(8px);
}
.category-toggle-bar:hover { border-color: rgba(99,102,241,.4) !important; background: var(--nv-surface-2) !important; }
.category-main-title { font-weight: 700 !important; }
.category-main-title::after {
  content: ''; display: block; width: 44px; height: 3px; margin-top: 8px;
  border-radius: 99px; background: var(--nv-grad);
}
.category-subtitle-text { color: var(--nv-muted) !important; }
.category-chevron { transition: transform .3s var(--nv-ease); }

/* ---------- 8) MARQUEE / GAME KARTLARI ---------- */
.game-marquee-area {
  background: var(--nv-grad-soft);
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-radius);
  padding: 18px 0 22px;
}
.game-marquee-title {
  background: var(--nv-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-weight: 700 !important;
}
.game-card {
  background: var(--nv-surface-2) !important;
  border: 1px solid var(--nv-line-strong) !important;
  border-radius: var(--nv-radius-sm) !important;
  transition: all .25s var(--nv-ease);
}
.game-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(34,211,238,.5) !important;
  box-shadow: 0 12px 34px rgba(34,211,238,.18);
}
.game-card.featured { border-color: rgba(168,85,247,.55) !important; box-shadow: 0 0 24px rgba(168,85,247,.2); }

/* ---------- 9) ÜST FEATURED ŞERİT + CANLI DESTEK ---------- */
#featured-marquee {
  background: rgba(9, 13, 26, .85) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--nv-line) !important;
}
#featured-marquee .fm-badge {
  background: var(--nv-grad) !important;
  box-shadow: 0 0 16px rgba(99,102,241,.5) !important;
}
#featured-marquee .fm-item:hover { color: #a5b4fc !important; }
#lc-btn { background: var(--nv-grad) !important; box-shadow: 0 8px 26px rgba(99,102,241,.45) !important; }
#lc-label { background: rgba(13,18,34,.9) !important; border: 1px solid var(--nv-line-strong); }

/* ---------- 10) GENEL KARTLAR / FORMLAR / MODALLAR ---------- */
.card, .bg-gray {
  background: var(--nv-surface) !important;
  border: 1px solid var(--nv-line) !important;
  border-radius: var(--nv-radius) !important;
}
.form-control, .form-select, .sm-buy__field-input {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--nv-line-strong) !important;
  border-radius: 12px !important;
  color: var(--nv-text) !important;
  transition: all .2s;
}
.form-control:focus, .form-select:focus {
  border-color: rgba(99,102,241,.65) !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.15) !important;
  background: rgba(255,255,255,.06) !important;
}
.modal-content {
  background: rgba(13, 18, 34, .96) !important;
  backdrop-filter: blur(24px);
  border: 1px solid var(--nv-line-strong) !important;
  border-radius: 20px !important;
  box-shadow: var(--nv-shadow) !important;
}
.badge { border-radius: 999px; font-weight: 600; }

/* ---------- 11) SATIN ALMA FORMU ---------- */
.sm-buy__variant, .sm-buy__group, .sm-buy__addon {
  border-radius: var(--nv-radius-sm) !important;
  transition: all .22s var(--nv-ease) !important;
}
.sm-buy__variant.is-active {
  background: var(--nv-grad-soft) !important;
  border-color: rgba(99,102,241,.65) !important;
  box-shadow: 0 8px 26px rgba(99,102,241,.22) !important;
}
.sm-buy__group.is-active {
  background: var(--nv-grad) !important; border-color: transparent !important;
}
.sm-buy__total-value {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--nv-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 12) FEEDBACK / YORUM KARTLARI ---------- */
.feedback-card, [class*="feedback"] .card {
  background: var(--nv-surface) !important;
  border: 1px solid var(--nv-line) !important;
  border-radius: var(--nv-radius) !important;
}
.fa-star, .bi-star-fill { color: #fbbf24; }

/* ---------- 13) FOOTER ---------- */
.footer, footer {
  position: relative;
  background: rgba(7, 10, 20, .9) !important;
  border-top: 1px solid var(--nv-line) !important;
}
.footer::before, footer::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--nv-grad); opacity: .5;
}
.footer a, footer a { transition: color .2s, transform .2s; }
.footer a:hover, footer a:hover { color: #a5b4fc !important; }

/* ---------- 14) FAKE-BUYER TOAST POLİSAJ ---------- */
.fakebuyer-toast {
  background: rgba(13, 18, 34, .85) !important;
  border: 1px solid var(--nv-line-strong) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px) !important;
}

/* ---------- 15) ANNOUNCEMENT BAR ---------- */
.announcement, [class*="announcement-bar"] {
  background: var(--nv-grad) !important;
  font-weight: 600; letter-spacing: .01em;
}

/* ---------- 16) SAYFALAMA / SEKMELER ---------- */
.pagination .page-link {
  background: var(--nv-surface); border: 1px solid var(--nv-line);
  color: var(--nv-text); border-radius: 10px; margin: 0 3px;
  transition: all .2s;
}
.pagination .page-item.active .page-link { background: var(--nv-grad); border-color: transparent; }
.nav-tabs .nav-link.active { background: var(--nv-surface-2); border-color: var(--nv-line-strong); }

/* ---------- 17) AÇIK TEMA UYUMU ---------- */
html[data-sm-theme="light"] body {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(99,102,241,.08), transparent 60%),
    radial-gradient(1000px 600px at -10% 20%, rgba(34,211,238,.06), transparent 55%),
    linear-gradient(180deg, #f5f7ff, #eef1fb 60%, #f5f7ff);
  color: #0e1726;
}
html[data-sm-theme="light"] .sm-nav,
html[data-sm-theme="light"] nav.navbar { background: rgba(255,255,255,.8) !important; border-bottom-color: #e2e7f4 !important; }
html[data-sm-theme="light"] .card,
html[data-sm-theme="light"] .sm-pcard,
html[data-sm-theme="light"] .bg-gray,
html[data-sm-theme="light"] .category-toggle-bar { background: #fff !important; border-color: #e2e7f4 !important; }
html[data-sm-theme="light"] .sm-hero__title {
  background: linear-gradient(120deg, #1e1b4b 30%, #4338ca 60%, #0e7490);
  -webkit-background-clip: text; background-clip: text;
}
html[data-sm-theme="light"] .form-control,
html[data-sm-theme="light"] .form-select { background: #fff !important; color: #0e1726 !important; border-color: #dbe1f0 !important; }
html[data-sm-theme="light"] .modal-content { background: #fff !important; }
html[data-sm-theme="light"] .footer, html[data-sm-theme="light"] footer { background: #fff !important; border-top-color: #e2e7f4 !important; }
html[data-sm-theme="light"] #featured-marquee { background: rgba(255,255,255,.9) !important; }
html[data-sm-theme="light"] #featured-marquee .fm-item { color: #0e1726 !important; }
html[data-sm-theme="light"] .fakebuyer-toast { background: rgba(255,255,255,.92) !important; }
html[data-sm-theme="light"] .fakebuyer-product { color: #0e1726 !important; }
html[data-sm-theme="light"] ::-webkit-scrollbar-track { background: #eef1fb; }

/* ---------- 18) HAREKET AZALTMA (erişilebilirlik) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 19) NAVBAR → YÜZEN CAM KAPSÜL ---------- */
header.sticky-top { padding: 10px 14px 0; background: transparent; }
header.sticky-top nav.navbar, .sm-nav {
  max-width: 1320px; margin: 0 auto !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  background: rgba(9, 13, 26, .78) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: 0 14px 44px rgba(2,6,23,.5), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html[data-sm-theme="light"] header.sticky-top nav.navbar,
html[data-sm-theme="light"] .sm-nav {
  background: rgba(255,255,255,.85) !important;
  border-color: #e2e7f4 !important;
  box-shadow: 0 14px 40px rgba(30,27,75,.12) !important;
}

/* ---------- 20) KATEGORİ BAŞLIKLARI — BÜYÜK & GRADYAN ---------- */
.category-toggle-bar { padding: 22px 26px !important; }
.category-main-title {
  font-size: clamp(20px, 2.6vw, 27px) !important; font-weight: 700 !important;
  background: linear-gradient(115deg, #fff 40%, #a5b4fc);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-sm-theme="light"] .category-main-title {
  background: linear-gradient(115deg, #111c3d 40%, #4338ca);
  -webkit-background-clip: text; background-clip: text;
}
.category-chevron { color: #a5b4fc; font-size: 18px; }

/* ---------- 21) ESKİ HERO/FOOTER KALINTI TEMİZLİĞİ ---------- */
.sm-hero__animated-gradient, .smurf-aurora-container { display: none !important; }

/* ---------- 22) ÜRÜN SAYFASI GÖRSEL ORANTISI ---------- */
#sm-main-image, .sm-product__media img { max-height: 360px !important; width: auto !important;
  max-width: 100%; object-fit: contain; margin: 0 auto; display: block; border-radius: 16px; }
.sm-product__media { text-align: center; background: rgba(255,255,255,.02); border-radius: 18px; padding: 10px; }