/**
 * Header stilleri
 *
 * ── hidden özelliği ─────────────────────────────────────────
 * Tema JS'i görünürlüğü `el.hidden = true` ile yönetiyor
 * (oturum durumu, sepet boş/dolu, rozetler).
 *
 * Tarayıcının kendi [hidden] kuralı `display: none` ama zayıf.
 * Tailwind'in `block`, `flex`, `flex-none`, `grid` gibi display
 * sınıfları onu eziyor; eleman gizlenmesi gerekirken görünür
 * kalıyordu — giriş yaptıktan sonra giriş bağlantısının
 * kaybolmaması ve dolu sepette "Sepetiniz boş" yazması bu
 * yüzdendi.
 *
 * Aşağıdaki kural [hidden] olan her elemanı gerçekten gizliyor.
 * !important şart: Tailwind'in display sınıfları da aynı
 * özgüllükte ve sonra geliyor.
 */
[hidden] {
    display: none !important;
}

/* ── Kategori şeridi ─────────────────────────────────────
   Menü taşınca yatay kayar; kaydırma çubuğu görünmesin,
   şerit ince bir çizgi gibi dursun. */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Üst kayan şerit ─────────────────────────────────────
   İki kopya yan yana akar; ilki tamamen çıkınca başa döner,
   bu yüzden kayma kesintisiz görünür. */
@keyframes header-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.header-marquee {
  animation: header-marquee-scroll 28s linear infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .header-marquee { animation: none; }
}

/* ── Kategori şeridi ─────────────────────────────────────
   Üzerine gelince vurgu rengine döner; ilk kategori (kampanya
   vb.) dolu kutuyla sürekli öne çıkar. */
.nav-cat:hover { color: var(--accent); }

.nav-cat-accent {
  color: var(--accent);
}

.nav-cat-accent:hover {
  background: var(--accent);
  color: #fff;
}