/* Kapsayıcı + başlık */
.arsx{background:#fff;border:1px solid #eceff3;border-radius:16px;padding:14px}
.arsx-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.arsx-head-inner{display:flex;flex-direction:column;gap:2px;align-items:center;margin:auto}
.arsx-title{font-weight:800;font-size:22px}
.arsx-sub{opacity:.75;font-size:13px}
.arsx-count{font:700 13px/1.1 system-ui; background:#fff6f6; border:1px solid #ffd0d0; color:#7f1d1d; padding:6px 10px; border-radius:12px; white-space:nowrap}
.arsx-count span{min-width:2ch; display:inline-block; text-align:center}

/* Track */
.arsx-viewport{position:relative; overflow:hidden}
.arsx-track{display:flex; gap:16px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; padding:2px 44px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.arsx-track::-webkit-scrollbar{display:none}
.arsx-nav{position:absolute; top:50%; transform:translateY(-50%); border:0; background:#fff; border:1px solid #e5e7eb; border-radius:12px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.06)}
.arsx-nav.prev{left:6px} .arsx-nav.next{right:6px}

/* Kart */
.arsx-card{position:relative; display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid #e9edf2; border-radius:14px; padding:12px; min-width:240px; max-width:240px; box-shadow:0 4px 14px rgba(0,0,0,.04)}
.arsx-img{display:block; border-radius:12px; overflow:hidden; background:#f6f7f9}
.arsx-img img{display:block; width:100%; height:180px; object-fit:cover}
.arsx-name{font-size:15px; font-weight:700; line-height:1.35; color:#111; text-decoration:none}
.arsx-prices{display:flex; gap:8px; align-items:baseline}
.arsx-prices .now{font-weight:800; font-size:16px; color:#16a34a}
.arsx-prices .old{font-size:18px; color:#00000; text-decoration:line-through}
.arsx-icons{display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:#58606b}
.arsx-cta{display:flex; gap:8px; margin-top:auto}
.arsx-btn{flex:1; text-align:center; background:#1d4ed8; color:#fff; padding:6px 10px; border-radius:10px; font-weight:700; font-size:13px; text-decoration:none}
.arsx-btn:hover{filter:brightness(.95)}
.arsx-btn.ghost{background:#fff; color:#111; border:1px solid #e5e7eb}

/* Rozet & Favori */
.arsx-badge{position:absolute; right:12px; top:12px; z-index:2; height:22px; display:inline-flex; align-items:center; padding:0 8px; border-radius:999px; font-size:12px; font-weight:800; color:#fff}
.arsx-sale{background:#e11d48}
.arsx-fav{position:absolute; left:12px; top:12px; z-index:2; border:0; background:#fff; border-radius:999px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.15); cursor:pointer}
.arsx-fav.on{background:#ffe5ea; color:#e11d48}

/* Responsive */
@media (max-width:980px){ .arsx-card{min-width:200px; max-width:200px} .arsx-img img{height:160px} }
@media (max-width:640px){ .arsx-card{min-width:80%; max-width:80%} .arsx-img img{height:200px} .arsx-track{padding:2px 56px} }
/* Sayaç: daha büyük, ikonlu */
.arsx-count{
  font: 800 16px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background: linear-gradient(135deg,#fff2f2,#ffe9e9);
  border: 1px solid #ffc6c6;
  color:#7a1220;
  padding:10px 14px; border-radius:14px; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
}
.arsx-count::before{content:"🕒"; font-size:18px; margin-right:2px}
.arsx-count span{min-width:2.2ch; display:inline-block; text-align:center;
  background:#fff; padding:2px 4px; border-radius:6px; border:1px solid #f2b8b8}

/* Görsel içinde favori sağ-alt */
.arsx-img{position:relative; display:block; border-radius:12px; overflow:hidden; background:#f6f7f9}
.arsx-fav{
  position:absolute; right:10px; bottom:10px; z-index:2;
  border:0; background:#fff; border-radius:999px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15); cursor:pointer; color:#e11d48;
}
.arsx-fav.on{ background:#ffe5ea; color:#e11d48 }

/* % indirim rozeti (sağ üst) */
.arsx-badge{position:absolute; right:12px; top:25px; z-index:2; height:24px;
  display:inline-flex; align-items:center; padding:0 10px; border-radius:999px;
  font-size:13px; font-weight:800; color:#fff}
.arsx-sale{background:#e11d48}