.blog-slider {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  background: #ebebed;
  box-shadow: 0 14px 80px rgba(34, 35, 58, 0.2);
  padding: 30px;
  border: 3px solid #fff;
  border-radius: 25px;
  height: 375px;
  top: -10px;
  transition: all 0.3s ease;
}

.blog-slider__item {
  display: flex;
  align-items: center;
  pointer-events: none;
}

.blog-slider__item.swiper-slide-active {
  pointer-events: auto;
}

.blog-slider__title p {
  font-size: 1.5rem;
  margin-bottom: 10px;
  line-height: 1.4;
  color: #0e3f8c;
  font-weight: 600;
}

.blog-slider__text p {
  font-size: 1rem;
  color: #000;
}

.blog-slider__img {
  width: 300px;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  transform: translateX(-80px);
  border: 2px solid #ffffff;
}

.blog-slider__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.blog-slider__item.swiper-slide-active .blog-slider__img img {
  opacity: 1;
  transition-delay: 0.3s;
}

.blog-slider__content {
  position: relative;
  top: -150px;
  margin-left: 16rem;
  text-align: left;
  padding-right: 25px;
  transform: translateY(-60%);
}

.blog-slider__content>* {
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.4s ease;
}

.blog-slider__item.swiper-slide-active .blog-slider__content>* {
  opacity: 1;
  transform: none;
}

.blog-slider__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, #204289, #4a9cd5);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  width: 20%;
  max-width: 150px;
  margin-top: 5px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.blog-slider__button:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

.blog-slider__pagination {
  position: absolute;
  z-index: 21;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-slider__pagination .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  border-radius: 10px;
  background: #062744;
  opacity: 0.2;
  transition: all 0.3s ease;
}

.blog-slider__pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #0e3f8c;
  height: 30px;
  box-shadow: 0 0 20px rgba(228, 228, 228, 0.3);
}

/* RESPONSIVE - TABLET */
@media (max-width: 992px) {
  .blog-slider {
    max-width: 680px;
    height: auto;
  }

  .blog-slider__content {
    margin-left: 0;
    padding: 0 15px;
    top: 0;
    transform: none;
  }
}

@media (max-width: 768px) {
  .blog-slider {
    max-width: 80%;
    margin: 10px auto;
    padding: 8px;
    border-radius: 12px;
    overflow: visible;
    height: 60vh;
    /* Tetapkan tinggi slider fix 60% dari tinggi layar */
    min-height: 300px;
    /* Minimal tinggi biar nggak terlalu kecil di HP kecil */
    max-height: 400px;
    /* Maksimal tinggi agar konten tidak menjulur panjang */
    position: relative;
  }

  .blog-slider__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .blog-slider__img {
    border: 1px solid #ffffff;
    /*Tebalkansedikitborderputih*/
    width: 95%;
    /*Besarkangambarsedikit(dari85%ke95%)*/
    max-width: 260px;
    /*Besarkanmaksimal*/
    height: 220px;
    /*Tinggidiperbesaragarproporsional*/
    margin: 0 auto 10px;
    border-radius: 12px;
    /*Sedikitlebihbulat*/
    transform: translateY(-60px);
    box-sizing: border-box;
    /*Pastikanborderikutukurangambar*/
    overflow: hidden;
    /*Supayaisigambartidakmelewatiborder*/

  }

  .blog-slider__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Hilangkan kemungkinan ada space aneh */
    border-radius: 12px;
    /* Biar sudut gambar pas dengan border */
  }

  .blog-slider__content {
    margin-left: 0;
    padding: 0 8px;
  }

  .blog-slider__content h1,
  .blog-slider__title p {
    font-weight: 600;
    font-size: 1rem;
    /* Kecilkan judul */
    margin-bottom: 8px;
    line-height: 1.3;
  }

  .blog-slider__text p {
    font-size: 0.75rem;
    /* Kecilkan deskripsi */
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .blog-slider__button {
    font-size: 0.7rem;
    /* Sedikit lebih besar teksnya */
    padding: 6px 10px;
    /* Panjang ke kanan dengan padding horizontal besar */
    border-radius: 6px;
    display: inline-block;
    width: 80%;
    /* Tombol ambil 80% lebar kontainer */
    max-width: 100px;
    /* Batasi maksimal panjang biar nggak terlalu panjang */
    text-align: center;
    /* Pastikan teks di tengah */
    margin: 0 auto;
    /* Tengah secara horizontal */
  }

  .blog-slider__pagination .swiper-pagination-bullet {
    display: none;
  }

}

@media (max-width: 480px) {
  .blog-slider__img {
    max-width: 200px;
    height: 160px;
    /* Kecilkan lagi untuk hp kecil */
  }

  .blog-slider__content h1,
  .blog-slider__title p {
    font-size: 1rem;
  }

  .blog-slider__text p {
    font-size: 0.7rem;
  }

  .blog-slider__button {
    font-size: 0.7rem;
    /* Sedikit lebih besar teksnya */
    padding: 6px 10px;
    /* Panjang ke kanan dengan padding horizontal besar */
    border-radius: 6px;
    display: inline-block;
    width: 80%;
    /* Tombol ambil 80% lebar kontainer */
    max-width: 100px;
    /* Batasi maksimal panjang biar nggak terlalu panjang */
    text-align: center;
    /* Pastikan teks di tengah */
    margin: 0 auto;
    /* Tengah secara horizontal */
  }
}



.background-news {
  background: url('/assets/img/BACKGROUND NEWS (1).jpg') no-repeat center center;
  background-size: cover;
  min-height: 670px;
}

@media (max-width: 768px) {
  .background-news {
    background: url('/assets/img/BACKGROUIND NEWS MOBILE.jpg') no-repeat center center;
    background-size: cover;
    min-height: 610px;
    /* Tinggi lebih pendek untuk layar HP */
  }
}

/* .news_ir h1 {
  margin-bottom: 40px;
  padding-top: 40px;
  text-transform: uppercase;
  background-color: #0e3f8c;
  -webkit-background-clip: text;
  color: transparent;
  font-family: 'Bank Gothic Light Regular', sans-serif;
  font-weight: 100;
  font-size: 3rem;
} */

.news-title {
  font-family: 'BankGothic Md BT', sans-serif;
  color: #ffffff;
  font-size: 3.3rem;
  margin-bottom: 55px;
  letter-spacing: 10px;
  text-transform: uppercase;
}

/* Responsive untuk tablet dan mobile */
@media (max-width: 768px) {
  .news-title {
    font-size: 2.2rem;
    /* Ukuran lebih kecil di tablet */
    margin-bottom: 80px;
    letter-spacing: 5px;
  }
}

@media (max-width: 480px) {
  .news-title {
    font-size: 2.2rem;
    letter-spacing: 5px;
    margin-bottom: 80px;
  }
}

/* ✅ Default untuk laptop / desktop */
.section-faq {
  background: url('/assets/img/FAQ BACKGROUND (1).jpg') no-repeat center center / cover;
  font-family: 'Poppins', sans-serif;
  min-height: 600px;
}

/* ✅ Versi untuk mobile */
@media (max-width: 767.98px) {
  .mobaile_bg {
    background: url('/assets/img/BACKGROUIND FAQ MOBILE.jpg') no-repeat center center / cover !important;
  }
}


.blog-slider__title h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  line-height: 1.5;
  color: #0e3f8c;
  font-weight: 100;
  font-family: 'Montserrat', sans-serif;
}

/* Saat tampilan di HP (layar kecil) */
@media (max-width: 768px) {
  .blog-slider__title h3 {
    font-size: 1.1rem;
    /* sedikit lebih kecil */
    font-weight: 500;
    /* lebih tebal agar terbaca jelas */
  }
}

/* Saat tampilan di layar besar (PC) */
@media (min-width: 769px) {
  .blog-slider__title h3 {
    font-size: 1.4rem;
    font-weight: 400;
    /* tetap ringan di desktop */
  }
}


.blog-slider__text p {
  font-size: 0.9rem;
  color: #232323;
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
}

/* Untuk HP dan tablet kecil */
@media (max-width: 768px) {
  .blog-slider__text p {
    font-size: 0.85rem;
    /* sedikit lebih kecil agar pas di layar HP */
    font-weight: 400;
    /* sedikit lebih tebal biar terbaca jelas */
  }
}

/* Untuk PC dan layar besar */
@media (min-width: 769px) {
  .blog-slider__text p {
    font-size: 1rem;
    /* sedikit lebih besar di layar lebar */
    font-weight: 500;
    /* tetap tipis untuk tampilan elegan */
  }
}




/* === Info Section Responsive Typography === */
.sect-block {
  background: url('/assets/img/info_news.jpg') no-repeat center center !important;
  background-size: cover !important;
  min-height: 600px !important;
}

/* Judul utama (info title) */
.sect-block h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 200 !important;
  color: #000 !important;
  text-align: justify !important;
  line-height: 1.4 !important;
  font-size: clamp(1.1rem, 1vw + 1rem, 1.6rem) !important;
  margin-bottom: 0.5rem !important;
}

/* Tanggal kecil */
.sect-block small {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(0.8rem, 0.6vw + 0.7rem, 0.95rem) !important;
  color: #333 !important;
}

/* Deskripsi berita */
.sect-block .tex-news {
  font-family: 'Montserrat', sans-serif !important;
  color: #000 !important;
  text-align: justify !important;
  line-height: 1.7 !important;
  font-size: clamp(0.9rem, 0.7vw + 0.7rem, 1.1rem) !important;
  font-weight: clamp(300, 1vw * 80, 500) !important;
  margin-top: 1rem !important;
}

/* Judul "Recommendation" */
.sect-block h4 {
  font-family: 'Montserrat', sans-serif !important;
  color: #0e3f8c !important;
  font-size: clamp(1.2rem, 0.8vw + 1rem, 1.6rem) !important;
  font-weight: 300 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.5rem !important;
}

/* Card rekomendasi */
.sect-block .articles h5 {
  font-family: 'Poppins', sans-serif !important;
  color: #000 !important;
  font-size: clamp(0.9rem, 0.6vw + 0.8rem, 1.1rem) !important;
  font-weight: 400 !important;
  text-align: left !important;
  margin-bottom: 0.3rem !important;
}

/* Responsif gambar agar tidak terlalu besar di HP */
.sect-block img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 5px !important;
  object-fit: cover !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* === Responsif tambahan (penguatan media query) === */

/* Untuk HP kecil (max 576px) */
@media (max-width: 576px) {
  .sect-block h3 {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
  }

  .sect-block .tex-news {
    font-size: 0.9rem !important;
    font-weight: 450 !important;
   color: #000 !important;
  }

  .sect-block h4 {
    font-size: 1.2rem !important;
  }

  .sect-block img {
    height: auto !important;
  }
}

/* Untuk tablet (577px–992px) */
@media (min-width: 577px) and (max-width: 992px) {
  .sect-block h3 {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
  }

  .sect-block .tex-news {
    font-size: 1rem !important;
    color: #000 !important;
  }

  .sect-block h4 {
    font-size: 1.4rem !important;
  }
}

/* Untuk layar besar (PC) */
@media (min-width: 993px) {
  .sect-block h3 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
  }

  .sect-block .tex-news {
    font-size: 1.1rem !important;
    color: #000 !important;
  }

  .sect-block h4 {
    font-size: 1.6rem !important;
  }
}