/* Epinbux ust menu baglantilari, Wise tarzi hap hover (03.11.2026). Yukleyen: layouts/vitrin.php (anasayfa + kategori).
   .epx-subnav: pages/anasayfa.php alt menu (Hediye Kartlari, E-PiN vb.); .epx-subnav--pill: pages/kategori.php kategori haplari.
   Baglantilardaki Tailwind hover:* siniflari @media disinda oldugu icin dokunmatikte yapisir; taban kural onlari ezer. */
:root {
  --nav-text: #163300;
  --nav-text-hover: #0D1F00;
  --nav-hover-bg: rgba(211, 242, 192, 0.4); /* #D3F2C0 %40 */
  --nav-icon-bg: #E2F6D5;
  --nav-icon-bg-hover: #D3F2C0;
  --nav-current-bg: #9fe870; /* kategori sayfasinda secili hap (eski bg-[#9fe870]) */
}
.epx-subnav > a, .epx-subnav > a:hover { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; padding: 0 12px; border-radius: 999px; font-weight: 600; color: var(--nav-text); background-color: transparent; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.epx-subnav > a > svg { flex: none; width: 24px; height: 24px; padding: 4px; box-sizing: border-box; border-radius: 999px; background-color: var(--nav-icon-bg); transition: background-color .15s ease; }
.epx-subnav > a:focus-visible, .epx-subnav > a.is-active, .epx-subnav > a[aria-current="page"] { color: var(--nav-text-hover); background-color: var(--nav-hover-bg); }
.epx-subnav > a:focus-visible > svg, .epx-subnav > a.is-active > svg, .epx-subnav > a[aria-current="page"] > svg { background-color: var(--nav-icon-bg-hover); }
.epx-subnav > a:focus-visible { outline: 2px solid var(--nav-text); outline-offset: -2px; } /* iceri: nav overflow-x:auto disariyi kirpar */
@media (hover: hover) {
  .epx-subnav > a:hover { color: var(--nav-text-hover); background-color: var(--nav-hover-bg); }
  .epx-subnav > a:hover > svg { background-color: var(--nav-icon-bg-hover); }
}
/* Kategori haplari: gri cerceve (Tailwind border-gray-300) kalir; secili kategori lime kalir, hoverda degismez */
.epx-subnav--pill > a[aria-current="page"], .epx-subnav--pill > a[aria-current="page"]:hover { color: var(--nav-text); background-color: var(--nav-current-bg); }