/* Epinbux anasayfa kayan seritleri (26.10.2026). Tum siniflar epx- onekli; derlenmis app.css ile cakismaz.
   Sablon: pages/partials/epx-home-sections.php. Renkler sitenin paletinden. */
:root {
  --epx-ink: #173601;
  --epx-ink-2: #163300;
  --epx-lime: #9fe870;
  --epx-lime-soft: #e8f8dc;
  --epx-mute: #5b6b55;
  --epx-line: #dfe5dc;
  --epx-card: #ffffff;
}

.epx-sec { padding: 28px 0; }
.epx-sec--cats { background: linear-gradient(180deg, #f4f8f1 0%, #ffffff 100%); }
.epx-sec--gift { background: #ffffff; }
.epx-sec--game { background: linear-gradient(180deg, #f6f7f5 0%, #eef3ea 100%); }
.epx-sec--plain { background: #ffffff; padding-top: 12px; }
.epx-sec--trust { background: #ecefec; padding: 22px 0; }
@media (min-width: 1024px) { .epx-sec { padding: 44px 0; } }

.epx-wrap { max-width: calc(80rem + 32px); margin: 0 auto; padding: 0 16px; } /* "Populer Urunler" ile ayni: max-w-7xl + px-4 */

.epx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.epx-title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--epx-ink); font-weight: 700; font-size: 1.125rem; line-height: 1.25; }
@media (min-width: 640px) { .epx-title { font-size: 1.25rem; } } /* "Populer Urunler" basligiyla ayni: 18 / 20 / 30 px */
@media (min-width: 1024px) { .epx-title { font-size: 1.875rem; } }
.epx-title-icon { flex: none; padding: 6px; box-sizing: content-box; border-radius: 10px; background: var(--epx-lime); color: var(--epx-ink-2); }
.epx-sub { margin: 6px 0 0; color: var(--epx-mute); font-size: 0.9375rem; }
.epx-all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; white-space: nowrap; color: var(--epx-ink-2); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.epx-all:hover { text-decoration: underline; }
.epx-all:focus-visible, .epx-cat:focus-visible, .epx-chip:focus-visible, .epx-card-link:focus-visible, .epx-cta-btn:focus-visible { outline: 3px solid var(--epx-ink-2); outline-offset: 3px; border-radius: 12px; }
.epx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Marquee ---- */
.epx-marquee { position: relative; overflow: hidden; padding: 8px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.epx-marquee + .epx-marquee { margin-top: 4px; }
.epx-track { display: flex; gap: 16px; width: max-content; margin: 0; padding: 0; list-style: none;
  animation: epx-scroll var(--epx-dur, 80s) linear infinite; will-change: transform; }
.epx-marquee--right .epx-track { animation-direction: reverse; }
.epx-marquee:hover .epx-track, .epx-marquee:focus-within .epx-track, .epx-marquee.epx-paused .epx-track { animation-play-state: paused; }
.epx-item { flex: none; }
@keyframes epx-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }

/* Kapsayiciya sigan serit: kaymaz, kopya yok; dar ekranda yatay kaydirilir */
.epx-marquee--static { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; }
.epx-marquee--static::-webkit-scrollbar { display: none; }
.epx-marquee--static .epx-track { animation: none; will-change: auto; display: grid; width: auto; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.epx-marquee--static .epx-cat { width: auto; }
@media (max-width: 639px) { .epx-marquee--static .epx-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .epx-marquee--static .epx-cat { height: 150px; } }

/* Dokunmatik cihaz ve hareket azaltma: animasyon yok, parmakla yatay kaydirma */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .epx-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .epx-marquee::-webkit-scrollbar { display: none; }
  .epx-track { animation: none; will-change: auto; }
  .epx-item { scroll-snap-align: start; }
  .epx-item[aria-hidden="true"] { display: none; }
}

/* ---- Kategori kartlari ---- */
.epx-cat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 200px; height: 170px; padding: 16px; box-sizing: border-box;
  border: 1px solid var(--epx-line); border-radius: 18px; background: var(--epx-card); text-decoration: none; box-shadow: 0 2px 6px rgba(22, 51, 0, .06); transition: transform .2s ease, box-shadow .2s ease; }
.epx-cat:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(22, 51, 0, .12); }
.epx-cat-logos { display: flex; height: 56px; margin-bottom: 6px; }
.epx-cat-logos img { width: 56px; height: 56px; object-fit: cover; border-radius: 14px; border: 3px solid #fff; background: #f1f4ef; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.epx-cat-logos img + img { margin-left: -16px; }
.epx-cat-name { color: var(--epx-ink); font-weight: 700; font-size: 1rem; text-align: center; }
.epx-cat-count { color: var(--epx-mute); font-size: 0.8125rem; }

.epx-chip { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px 0 8px; border: 1px solid var(--epx-line); border-radius: 999px; background: var(--epx-card);
  color: var(--epx-ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; }
.epx-chip img { width: 40px; height: 40px; object-fit: cover; border-radius: 999px; background: #f1f4ef; }
.epx-chip:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(22, 51, 0, .10); }

/* ---- Urun kartlari ---- (27.10.2026: gorsel kenardan kenara 4:5; logolarin cogu dikey 360x500, kalani kare 250x250) */
.epx-card { display: flex; flex-direction: column; width: 200px; height: 100%; padding: 0; box-sizing: border-box; border: 1px solid var(--epx-line); border-radius: 16px; background: var(--epx-card);
  box-shadow: 0 2px 6px rgba(22, 51, 0, .05); transition: transform .2s ease, box-shadow .2s ease; }
.epx-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(22, 51, 0, .12); }
.epx-card-link { display: block; color: inherit; text-decoration: none; border-radius: 15px 15px 0 0; }
.epx-card-link:focus-visible { outline-offset: -3px; }
.epx-card-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 15px 15px 0 0; background: #f1f4ef; }
.epx-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.epx-card-ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: #b7c2b1; font-weight: 700; font-size: 1.5rem; }
.epx-card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; margin: 10px 12px 4px; color: #1f2a1a; font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.epx-card-price { margin: 0 12px 10px; color: var(--epx-ink); font-weight: 700; font-size: 1rem; }
.epx-card-from { color: var(--epx-mute); font-weight: 500; font-size: 0.75rem; }
.epx-btn { display: flex; align-items: center; justify-content: center; min-height: 40px; margin: auto 12px 12px; border-radius: 999px; background: var(--epx-lime); color: var(--epx-ink-2); font-weight: 700; font-size: 0.875rem; text-decoration: none; transition: background .2s ease; }
.epx-btn:hover { background: #8fdc5e; }

/* ---- CTA banner ---- */
.epx-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; padding: 28px 22px; border-radius: 24px;
  background: radial-gradient(120% 140% at 85% 20%, #2f5a12 0%, #173601 45%, #0f2300 100%); color: #fff; }
@media (min-width: 768px) { .epx-cta { padding: 40px 44px; } }
.epx-cta-text { position: relative; z-index: 1; max-width: 34rem; }
.epx-cta-title { margin: 0 0 10px; color: #fff; font-weight: 800; font-size: 1.5rem; line-height: 1.2; }
@media (min-width: 1024px) { .epx-cta-title { font-size: 2rem; } }
.epx-cta-desc { margin: 0 0 18px; color: #d7e8cc; font-size: 0.9375rem; line-height: 1.55; }
.epx-cta-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--epx-lime); color: var(--epx-ink-2); font-weight: 700; text-decoration: none; transition: transform .2s ease; }
.epx-cta-btn:hover { transform: translateY(-2px); }
.epx-cta-art { position: relative; flex: none; width: 260px; height: 170px; }
.epx-cta-card { position: absolute; width: 150px; height: 112px; object-fit: cover; border-radius: 14px; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.epx-cta-card--0 { left: 0; top: 34px; transform: rotate(-10deg); }
.epx-cta-card--1 { left: 58px; top: 6px; transform: rotate(4deg); z-index: 2; }
.epx-cta-card--2 { left: 112px; top: 46px; transform: rotate(14deg); }
@media (max-width: 767px) { .epx-cta-art { display: none; } }

/* ---- Guven seridi ---- */
.epx-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) { .epx-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.epx-trust-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; background: #fff; color: var(--epx-ink-2); }
.epx-trust-item svg { flex: none; padding: 8px; box-sizing: content-box; border-radius: 12px; background: var(--epx-lime-soft); }
.epx-trust-item h3 { margin: 2px 0 4px; color: var(--epx-ink); font-weight: 700; font-size: 0.9375rem; }
.epx-trust-item p { margin: 0; color: var(--epx-mute); font-size: 0.8125rem; line-height: 1.45; }
.epx-trust-item a { color: var(--epx-ink-2); font-weight: 600; text-decoration: underline; }
@media (max-width: 400px) { .epx-trust { grid-template-columns: 1fr; } }