.ss-wrap{
  --ss-bg-1:#eaf4ff;
  --ss-bg-2:#ffffff;
  --ss-neon:#ff1744;
  --ss-title-color:#0d0c2b;
  --ss-card-bg:#0a0a0f;
  --ss-tab-bg:#ffffff;
  --ss-tab-text:#0d0c2b;
  --ss-tab-hover-bg:#ffffff;
  --ss-tab-hover-text:var(--ss-neon);
  background:linear-gradient(160deg,var(--ss-bg-1),var(--ss-bg-2) 70%);
  background-size:cover;
  background-position:center;
  padding:24px 24px 32px;
  font-family:"Vazirmatn","Tahoma",sans-serif;
  color:#0d0c2b;
  border-radius:12px;
}
.ss-header{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:24px;
}
.ss-title{
  margin:0;font-size:28px;font-weight:700;color:var(--ss-title-color);
  text-decoration:none;display:inline-block;transition:color .2s;
}
a.ss-title:hover{color:var(--ss-neon);}
.ss-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-inline-end:16px;}
.ss-tab{
  background:var(--ss-tab-bg);border:1px solid rgba(13,12,43,.2);
  color:var(--ss-tab-text);padding:10px 20px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:14px;transition:.2s;
}
.ss-tab:hover{
  background:var(--ss-tab-hover-bg);
  color:var(--ss-tab-hover-text);
  border-color:var(--ss-tab-hover-text);
}
.ss-tab.active{
  background:#0d0c2b;border-color:#0d0c2b;color:#fff;
  box-shadow:0 0 12px rgba(255,23,68,.6);
}

.ss-slider-outer{position:relative;}
.ss-track-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ss-track-viewport::-webkit-scrollbar{display:none;}
.ss-track{
  display:flex;gap:20px;
  padding:20px 4px 10px;
}

/* ===== کارت‌های قرمز - مشکی نئونی ===== */
.ss-card{
  flex:0 0 260px;
  scroll-snap-align:start;
  border-radius:28px;
  padding:20px 16px 24px;
  position:relative;
  text-align:center;
  background:var(--ss-card-bg);
  border:1px solid rgba(255,23,68,.35);
  box-shadow:
    0 0 18px rgba(255,23,68,.25),
    inset 0 0 30px rgba(255,23,68,.05);
  transition:box-shadow .3s, transform .3s;
}
.ss-card:hover{
  box-shadow:
    0 0 26px rgba(255,23,68,.55),
    inset 0 0 40px rgba(255,23,68,.1);
  transform:translateY(-4px);
}
.ss-card-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--ss-neon);color:#fff;font-size:11px;font-weight:700;
  padding:4px 14px;border-radius:6px;letter-spacing:.3px;
  white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 0 10px rgba(255,23,68,.8);
}

/* ===== قاب تصویر با افکت اسکرول روی هاور ===== */
.ss-card-screen{
  background:#111;
  border-radius:18px;
  height:240px;
  margin-top:14px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,23,68,.25);
}
.ss-card-screen img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:auto;
  display:block;
  image-rendering:auto;
  transform:translateY(0);
  transition:transform linear .6s;
}

.ss-card-name{
  margin-top:18px;font-weight:700;font-size:16px;min-height:24px;
  color:#fff;
}

/* ===== نقطه‌های اسکرول ===== */
.ss-dots{display:flex;justify-content:center;gap:8px;margin-top:24px;}
.ss-dots button{
  width:9px;height:9px;border-radius:50%;border:none;
  background:rgba(13,12,43,.25);cursor:pointer;padding:0;transition:.2s;
}
.ss-dots button.active{background:var(--ss-neon);box-shadow:0 0 8px var(--ss-neon);width:22px;border-radius:5px;}

@media(max-width:640px){
  .ss-wrap{padding:18px 14px 24px;}
  .ss-title{font-size:20px;}
  .ss-tab{padding:8px 14px;font-size:13px;}
  .ss-card{flex:0 0 190px;padding:16px 12px 20px;}
  .ss-card-screen{height:190px;}
  .ss-card-name{font-size:14px;margin-top:12px;}
}

@media(max-width:400px){
  .ss-card{flex:0 0 170px;}
  .ss-card-screen{height:170px;}
}