.grid-slider-a{
  position: relative;
}
.grid-slider-a .swiper-slide{
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.grid-slider-item {
  background: none;
  padding: 15px;
  text-align: center;
}
.grid-slider-item h1{
  color: var(--var-color-c);
}
.grid-slider-item p{
  color: rgba(0,0,0,.8);
}
.grid-slider-a .grid-slider-item{
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* menjaga jarak antar elemen */
  align-items: center;
  height: 100%; /* biar memenuhi slide */
  text-align: center;
}

.btn-one-next,
.btn-one-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(34,100,210,0.5);
  border-radius: 50%;
  z-index: 10;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  color: #fff;
  font-size: 16px;
}

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

/* Efek hover */
.btn-one-next:hover,
.btn-one-prev:hover {
  background-color: rgba(34,100,210,0.8);
  transform: translateY(-50%) scale(1.1);
}

.grid-slider-b.swiper {
  position: relative;
  padding: 20px 0; /* optional: beri ruang atas/bawah */
}

.grid-slider-b .swiper-slide {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: stretch;    /* agar card sama tinggi */
}
.news-swipper{
  column-gap: 2.5rem;
}
.grid-slider-b-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* jangan space-between */
  align-items: center;
  flex: 1;                     /* biar stretch sesuai slide */
  text-align: center;
  padding: 20px;
  background: transparent;
  box-sizing: border-box;
  position: relative;   /* supaya pseudo-element bisa di posisi relatif card */
  padding-bottom: 20px; /* beri ruang untuk border */
  transition: all 0.3s ease;
  overflow: hidden;
}
.grid-slider-b-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;      /* total tinggi border */
  width: 0;         /* mulai dari 0, nanti saat hover muncul */
  background: linear-gradient(to right, var(--var-color-b) 50%, var(--var-color-c) 50%); /* 2 warna */
  transition: width 0.3s ease;
}
.grid-slider-b-item:hover::after {
  width: 100%;      /* penuh card */
}
.grid-slider-b-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.grid-slider-b-item h1, .grid-slider-b-item h4,
.grid-slider-b-item p{
  color: #fff;
}
.grid-slider-b-item img {
  width: 100%;
  max-height: 100px;
  padding: 30px 0 10px 0;
  object-fit: contain;
  margin-bottom: 15px;
}

.btn-two-next,
.btn-two-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(251,223,2,0.5);
  border-radius: 50%;
  z-index: 10;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  color: #fff;
  font-size: 16px;
}

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

/* Efek hover */
.btn-two-next:hover,
.btn-two-prev:hover {
  background-color: rgba(251,223,2,0.8);
  transform: translateY(-50%) scale(1.1);
}
.btn-one-next, .btn-one-prev,
.btn-two-next, .btn-two-prev,
.btn-three-next, .btn-three-prev {
  transition: opacity 0.3s ease;
}

/*c*/
.grid-slider-c.swiper {
  position: relative;
  padding: 20px 0;
}
.grid-slider-c .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-flow: column;
  flex: 1;
}

.grid-slider-c-item{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 1; 
  text-align: center;
  background: #fff;
  border: 1px solid #ddd;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 20px;
  transition: all 0.3s ease;
  overflow: hidden;
}
.grid-slider-c-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(to right, var(--var-color-b) 50%, var(--var-color-c) 50%);
  transition: width 0.3s ease;
}
.grid-slider-c-item:hover::after {
  width: 100%;
}
.grid-slider-c-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.grid-slider-c-item h1, .grid-slider-c-item h4,
.grid-slider-c-item p{
  color: #000;
  padding: 0 10px;
}
.grid-slider-c-item .cat a{
  text-decoration: none;
  color: var(--var-color-a);
}
.grid-slider-c-img img {
  max-width: 100%;
  padding: 0;
  object-fit: cover;
}

.btn-three-next,
.btn-three-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(251,223,2,0.5);
  border-radius: 50%;
  z-index: 10;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  color: #fff;
  font-size: 16px;
}

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

/* Efek hover */
.btn-three-next:hover,
.btn-three-prev:hover {
  background-color: rgba(251,223,2,0.8);
  transform: translateY(-50%) scale(1.1);
}