/* ============================================================================
   SMURF MARKT — "AURORA 2027" (BOLD — görünür dönüşüm, çökmez)
   NOVA (redesign.css) üstüne EN SON yüklenir. Bileşenlerin kendi inline
   <style>'ları head'deki bu dosyadan SONRA geldiği için, override etmek üzere
   !important kullanılır. Krizi önlemek için: JS yok, kart-başına animasyon yok,
   will-change yok — tüm ağır işler yalnızca hero'da (birkaç eleman) ve statik.
   DOĞRU sınıflar hedeflenir: nv-hero__*, sm-pcard, category-*, sm-nav__*, nv-foot__*.
   GERİ ALMAK: master.njk'deki aurora.css satırını sil.
   ========================================================================== */

:root {
  --au-a: #818cf8; --au-b: #c084fc; --au-c: #22d3ee;
  --au-grad: linear-gradient(120deg, #6366f1, #a855f7 52%, #22d3ee);
  --au-ease: cubic-bezier(.22, 1, .36, 1);
  --au-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Apple render ---------- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ============================================================================
   1) HERO — DRAMATİK YENİDEN GİYDİRME (gerçek sınıf: nv-hero)
   ========================================================================== */
.nv-hero { padding: 104px 0 72px !important; }

/* Hareketli aurora ışıkları — sadece hero'da, birkaç pseudo-eleman (ucuz) */
.nv-hero__bg::before, .nv-hero__bg::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(70px);
  pointer-events: none; opacity: .5;
}
.nv-hero__bg::before {
  width: 520px; height: 520px; top: -150px; left: 6%;
  background: radial-gradient(circle, #6366f1, transparent 70%);
  animation: au-float 17s ease-in-out infinite;
}
.nv-hero__bg::after {
  width: 460px; height: 460px; top: 20px; right: 4%;
  background: radial-gradient(circle, #a855f7, transparent 70%);
  animation: au-float 21s ease-in-out infinite reverse;
}
@keyframes au-float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(26px,-30px); } }
.nv-hero__mesh { animation: au-pulse 9s ease-in-out infinite; }
@keyframes au-pulse { 0%,100% { opacity: .85; } 50% { opacity: 1; } }

/* DEV başlık + parlayan gradyan (component inline stilini !important ile ez) */
.nv-hero__title {
  font-size: clamp(30px, 4.2vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.04 !important;
  letter-spacing: -.03em !important;
  margin: 0 0 16px !important;
  background: linear-gradient(100deg, #ffffff 16%, #a5b4fc 40%, #67e8f9 56%, #ffffff 80%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: au-sheen 6.5s linear infinite;
  filter: drop-shadow(0 8px 30px rgba(99,102,241,.28));
}
@keyframes au-sheen { 0% { background-position: 170% 0; } 100% { background-position: -70% 0; } }

/* Alt slogan — mockup başlığı gibi renkli gradyan */
.nv-hero__subtitle {
  font-size: clamp(16px, 2vw, 19px) !important;
  font-weight: 600 !important;
  max-width: 640px !important;
  background: linear-gradient(100deg, #c4b5fd, #f0abfc 48%, #67e8f9) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html[data-sm-theme="light"] .nv-hero__subtitle {
  background: linear-gradient(100deg, #7c3aed, #db2777 48%, #0891b2) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}

/* Cam arama — daha büyük + parlama */
.nv-hero__search {
  max-width: 600px !important; padding: 18px 22px !important; border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 24px 70px rgba(2,6,23,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition: all .3s var(--au-ease) !important;
}
.nv-hero__search:hover { border-color: rgba(129,140,248,.7) !important; transform: translateY(-3px) !important;
  box-shadow: 0 0 0 1px rgba(129,140,248,.5), 0 30px 80px rgba(99,102,241,.3) !important; }

/* CTA'lar */
.nv-hero__cta-main { padding: 16px 34px !important; font-size: 15.5px !important; border-radius: 15px !important;
  background: var(--au-grad) !important; background-size: 180% 180% !important;
  box-shadow: 0 16px 44px rgba(99,102,241,.5) !important; transition: all .3s var(--au-ease) !important; }
.nv-hero__cta-main:hover { background-position: 90% 50% !important; transform: translateY(-3px) !important;
  box-shadow: 0 22px 60px rgba(99,102,241,.65) !important; }

/* Kategori çipleri — daha belirgin */
.nv-hero__cat { padding: 11px 21px !important; font-size: 14px !important; border-radius: 99px !important;
  border: 1px solid rgba(255,255,255,.15) !important; transition: all .25s var(--au-spring) !important; }
.nv-hero__cat:hover { background: rgba(99,102,241,.22) !important; border-color: rgba(129,140,248,.7) !important;
  transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 10px 28px rgba(99,102,241,.3) !important; }

/* İstatistik sayıları — büyük & gradyan */
.nv-hero__trust b { font-size: 15px !important; }

/* "Fast & easy delivery / Warranty / 24-7 / Rank rewards" satırı — kaldırıldı */
.nv-hero__feat { display: none !important; }

/* ============================================================================
   2) ÜRÜN KARTLARI — görünür yeni stil (gerçek sınıf: sm-pcard)
   ========================================================================== */
.sm-pcard {
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: linear-gradient(168deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important;
  transition: transform .34s var(--au-spring), box-shadow .34s var(--au-ease), border-color .34s !important;
}
.sm-pcard:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(129,140,248,.55) !important;
  box-shadow: 0 30px 66px rgba(2,6,23,.66), 0 0 46px rgba(99,102,241,.20) !important;
}
.sm-pcard__title { font-size: .98rem !important; font-weight: 600 !important; letter-spacing: -.01em !important;
  transition: color .18s ease; }
.sm-pcard:hover .sm-pcard__title { color: #fff !important; }
.sm-pcard__media { border-radius: 20px 20px 0 0 !important; }
.sm-pcard__img { transition: transform .55s var(--au-ease) !important; }
.sm-pcard:hover .sm-pcard__img { transform: scale(1.07) !important; }

/* ============================================================================
   3) BÖLÜM BAŞLIKLARI (category-*) — daha büyük & belirgin
   ========================================================================== */
.category-main-title { font-size: clamp(22px, 2.8vw, 30px) !important; font-weight: 700 !important; }
.category-toggle-bar { border-radius: 18px !important; padding: 22px 26px !important;
  box-shadow: 0 1px 2px rgba(2,6,23,.3) !important; transition: all .25s var(--au-ease) !important; }
.category-toggle-bar:hover { border-color: rgba(129,140,248,.4) !important; }
.category-chevron { transition: transform .3s var(--au-spring) !important; }

/* ============================================================================
   4) NAV + BUTON + FORM + FOOTER cila (gerçek sınıflar)
   ========================================================================== */
.sm-nav__link { position: relative; }
.sm-nav__link::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  border-radius: 99px; background: var(--au-grad); transform: scaleX(0); transform-origin: center;
  transition: transform .3s var(--au-ease); }
.sm-nav__link:hover::after { transform: scaleX(1); }
.sm-nav__cart-btn { transition: transform .18s var(--au-spring) !important; }
.sm-nav__cart-btn:hover { transform: translateY(-1px) scale(1.05) !important; }

/* ---- TEMİZ & PROFESYONEL NAV ----
   Tüm linkler aynı sade görünümde; tür farkı SADECE ikon renginde ve çok ince
   hover tintinde belli olur. Dolgulu rengarenk pill YOK. Tek belirgin CTA: Cart. */
.sm-nav__link {
  border-radius: 12px !important; font-weight: 500 !important; font-size: 14.5px !important;
  color: rgba(230,235,250,.78) !important; background: transparent !important;
  border: 1px solid transparent !important; padding: 8px 14px !important;
  transition: color .18s ease, background .18s ease !important;
}
.sm-nav__link:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; }
.sm-nav__link::after { display: none !important; } /* alt çizgiyi kapat — hover tint yeterli */

/* Tür vurgusu yalnızca ikon renginde */
/* #feedbackDropdown eski (dropdown'lu) hâlden kalma — #feedbackNav yeni tek link. */
#feedbackDropdown i, #feedbackDropdown .sm-nav__link-icon,
#feedbackNav i, #feedbackNav .sm-nav__link-icon { color: #f5b944 !important; }
#feedbackDropdown:hover,
#feedbackNav:hover { background: rgba(245,183,68,.12) !important; }
.sm-nav__link[href="/marketplace"] .sm-nav__link-icon { color: #a78bfa !important; }
.sm-nav__link[href="/marketplace"]:hover { background: rgba(167,139,250,.12) !important; }
.sm-nav__link[href="/livechat"] .sm-nav__link-icon { color: #22c55e !important; }
.sm-nav__link[href="/livechat"]:hover { background: rgba(34,197,94,.13) !important; }
.sm-nav__link[href^="/#cat-"]:hover { background: rgba(129,140,248,.13) !important; }
#catDropdown .sm-nav__link-icon { color: #a5b4fc !important; }
/* Kategoriler menüsü masaüstünde ÜZERİNE GELİNCE açılır (tıklama gerekmez) */
@media (min-width: 992px) {
  .sm-nav__item.dropdown:hover > .dropdown-menu { display: block !important; margin-top: 0 !important; }
}

.btn { transition: transform .18s var(--au-spring), box-shadow .3s var(--au-ease), background-position .3s var(--au-ease) !important; }
.btn:active { transform: translateY(1px) scale(.985) !important; }

.form-control, .form-select { transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important; }
:where(a, button, input, select, textarea, .btn, .sm-pcard):focus-visible {
  outline: none !important; box-shadow: 0 0 0 2px rgba(7,11,22,.9), 0 0 0 4.5px rgba(129,140,248,.75) !important; border-radius: 12px;
}

.modal-content { box-shadow: 0 30px 70px rgba(2,6,23,.6) !important; }
.modal.fade .modal-dialog { transition: transform .34s var(--au-ease), opacity .34s ease; transform: translateY(14px) scale(.98); }
.modal.show .modal-dialog { transform: none; }

.nv-foot__col a { transition: color .18s ease, padding-left .18s ease; }
.nv-foot__col a:hover { padding-left: 4px; }

/* ============================================================================
   5) ÜRÜN SAYFASI — yapışkan satın-alma kartı
   ========================================================================== */
@media (min-width: 992px) { .sm-product__right { position: sticky; top: 88px; align-self: start; } }
.sm-product__buybox { border-radius: 20px !important; box-shadow: 0 12px 30px rgba(2,6,23,.46) !important; }
.sm-buy__variant, .sm-buy__addon { transition: transform .18s var(--au-spring), border-color .18s, background .18s, box-shadow .3s var(--au-ease) !important; }
.sm-buy__variant:hover, .sm-buy__addon:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(2,6,23,.34); }

/* ============================================================================
   6) HAREKET AZALTMA
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nv-hero__bg::before, .nv-hero__bg::after, .nv-hero__mesh, .nv-hero__title { animation: none !important; }
  .nv-hero__title { -webkit-text-fill-color: #eef2ff !important; }
}