/* =========================
   CATEGORY SECTION
========================= */

.category-section{
  width:100%;
  display:flex;
  justify-content:center;
  margin:20px 0 70px;
}

.category-inner{
  width:90%;
  max-width:1600px;
  display:flex;
  flex-direction:column;
}

/* =========================
   CATEGORY HEADER
========================= */

.category-header{
  width:100%;
  margin-bottom:15px;
}

.category-header h2{
  font-family:'Nunito';
  font-size:1.4rem;
  font-weight:700;
  color:#2b2b2b;
  letter-spacing:0.4px;
  position:relative;
  display:inline-block;
  padding-bottom:6px;
}

.category-header h2::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:45%;
  height:3px;
  border-radius:2px;
}

.category-section:nth-of-type(6n+1) h2::after{ background:#ff8447; }
.category-section:nth-of-type(6n+2) h2::after{ background:#59d5e0; }
.category-section:nth-of-type(6n+3) h2::after{ background:#78a983; }
.category-section:nth-of-type(6n+4) h2::after{ background:#ff3ea5; }
.category-section:nth-of-type(6n+5) h2::after{ background:#ffc700; }
.category-section:nth-of-type(6n+6) h2::after{ background:#6c63ff; }

/* =========================
   SLIDER
========================= */

.card-slider{
  position:relative;
  width:100%;
  margin:0 auto;
  padding:0 40px;
}

/* TRACK */
.card-slider-track{
  display:flex;
  gap:30px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:15px 0;
  scrollbar-width:none;
  will-change:scroll-position;
}

.card-slider-track::-webkit-scrollbar{
  display:none;
}

/* =========================
   CARD WIDTH
========================= */

.card-slider-track .card{
  flex:0 0 calc((100% - 180px) / 7);
}

/* =========================
   FADE EFFECT
========================= */

/* Sağ fade her zaman */
.card-slider::after{
  content:'';
  position:absolute;
  top:0;
  right:40px;
  width:60px;
  height:100%;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(
    to left,
    rgba(255,255,255,1),
    rgba(255,255,255,0)
  );
}

/* Sol fade sadece scroll olunca */
.card-slider.show-left-fade::before{
  content:'';
  position:absolute;
  top:0;
  left:40px;
  width:60px;
  height:100%;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(
    to right,
    rgba(255,255,255,1),
    rgba(255,255,255,0)
  );
}

/* =========================
   BUTTONS
========================= */

.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-size:26px;
  cursor:pointer;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.25s, transform 0.25s;
}

.slider-btn:hover{
  background:rgba(0,0,0,0.8);
  transform:translateY(-50%) scale(1.05);
}

.slider-btn.prev{ left:10px; }
.slider-btn.next{ right:10px; }

.slider-btn.hidden{ display:none; }

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1400px){
  .card-slider-track .card{
    flex:0 0 calc((100% - 150px) / 6);
  }
}

@media(max-width:1200px){
  .card-slider-track .card{
    flex:0 0 calc((100% - 120px) / 5);
  }
}

@media(max-width:991px){
  .card-slider-track .card{
    flex:0 0 calc((100% - 90px) / 4);
  }
}

@media(max-width:700px){
  .card-slider{
    padding:0 25px;
  }

  .slider-btn.prev{ left:5px; }
  .slider-btn.next{ right:5px; }

  .card-slider::after{ right:25px; }
  .card-slider.show-left-fade::before{ left:25px; }

  .card-slider-track .card{
    flex:0 0 calc((100% - 60px) / 3);
  }
}

@media(max-width:500px){
  .card-slider{
    padding:0 20px;
  }

  .slider-btn{
    width:36px;
    height:36px;
    font-size:22px;
  }

  .card-slider::after{ right:20px; }
  .card-slider.show-left-fade::before{ left:20px; }

  .card-slider-track .card{
    flex:0 0 calc((100% - 30px) / 2);
  }
}