@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    background-image: linear-gradient(to bottom left, #9961CF, #3A1359, #FFFFFF);
    /*padding-top: 80px;*/
    text-align: center;
    /*background-image: url("assets/bg9.jpg");
    background-size: contain; /* Pastikan gambar menutupi seluruh halaman
    background-position: center;  Pusatkan gambar */
    overflow-x: hidden;
}
html {
    scroll-behavior: smooth;
}
.alt {
    background-image: linear-gradient(45deg, #7b10df,#FFFFFF, #f414fc); /* Warna abu-abu terang untuk tampilan lebih profesional */
    padding: 20px;
    text-align: center;
    max-width: 100%;
}

.logo img {
    width: 250px; /* Perkecil ukuran logo */
    height: 250px; /* Pastikan aspek rasio tetap */
    opacity: 0;
    transform: scale(1.1);
    animation: fadeIn 2s ease-in-out forwards;
}
@keyframes fadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* Responsif: Perkecil header di layar lebih kecil */
@media (max-width: 768px) {
    .header {
        width: 50%; /* Lebarkan sedikit di layar tablet */
        padding: 15px;
    }
    
    .logo img {
      width: 200px; /* Perkecil ukuran logo */
      height: 200px; /* Lebih kecil di layar kecil */
    }
}

@media (max-width: 480px) {
    .header {
        width: 70%; /* Lebih lebar untuk tampilan mobile */
    }

    .logo img {
      width: 150px; /* Perkecil ukuran logo */
      height: 150px; /* Perkecil lagi di HP */
    }
}
/* ===== Navbar base ===== */
#navbar {
  position: sticky;
  top: 0;
  overflow: hidden;
  background-color: white;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between; /* kiri-kanan */
  align-items: center;
  padding: 10px 20px;
  z-index: 1000;
}

.nav-left {
  display: flex;
  justify-content: center;
  flex: 1;
}

.nav-left a { margin: 0 5px; }

/* ===== Link style (kiri & kanan) ===== */
#navbar a,
.nav-right a {
  position: relative;
  color: #333;
  text-align: center;
  padding: 14px 30px;              /* jarak antar item */
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border-radius: 0;                 /* tak perlu rounded, karena tak pakai bg hover */
  transition: color .25s ease;
}

/* garis bawah animasi */
#navbar a::after,
.nav-right a::after {
  content: "";
  position: absolute;
  left: 14px;                      /* sejajar dengan padding kiri */
  right: 14px;                     /* sejajar dengan padding kanan */
  bottom: 8px;                     /* jarak dari teks */
  height: 2px;
  background: #9961CF;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
  border-radius: 2px;
}

/* hover & keyboard focus -> tampilkan underline */
#navbar a:hover::after,
#navbar a:focus-visible::after,
.nav-right a:hover::after,
.nav-right a:focus-visible::after {
  transform: scaleX(1);
}

/* opsional: warna teks saat hover/focus */
#navbar a:hover,
#navbar a:focus-visible,
.nav-right a:hover,
.nav-right a:focus-visible {
  color: #3A1359;
}

/* state aktif (jika ingin underline selalu terlihat) */
#navbar a.active::after,
.nav-right a.active::after {
  transform: scaleX(1);
}

/* prefer-reduced-motion: matikan animasi */
@media (prefers-reduced-motion: reduce) {
  #navbar a::after,
  .nav-right a::after { transition: none; }
  #navbar a, .nav-right a { transition: none; }
}

/* ===== Section scroll offset ===== */
#promotion, #program2, #produk, #testimoni, #dokumentasi {
  scroll-margin-top: 15vh;
}

/* ===== Responsif ===== */
@media screen and (max-width: 768px) {
  #navbar a, .nav-right a {
    font-size: 14px;
    padding: 10px 15px;
  }
  #navbar a::after, .nav-right a::after {
    left: 10px; right: 10px; bottom: 6px;
  }
}

@media screen and (max-width: 480px) {
  #navbar a, .nav-right a {
    font-size: 12px;
    padding: 8px 5px;
  }
  #navbar a::after, .nav-right a::after {
    left: 5px; right: 5px; bottom: 5px;
  }
}

  
/* Kontainer Slideshow */
.slideshow-container {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
}

/* Slide */
.mySlides {
  display: none;
  position: relative;
}

/* Gambar dalam slideshow */
.mySlides img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

/* Posisi teks di dalam slide */
.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  width: 80%;
  max-width: 700px;
  background: rgba(19, 8, 8, 0.5);
  padding: 20px;
  border-radius: 10px;
}

/* Judul */
.hero-text h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

/* Paragraf */
.hero-text p {
  font-size: 16px;
  line-height: 1.5;
}

/* Tombol */
.hero-text button {
  border: 1px solid white;
  background-color: transparent;
  color: white;
  padding: 12px 20px;
  font-size: 1.2vw;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.3s;
}

.hero-text button:hover {
  background: #9961CF;
}

/* Navigasi prev & next */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2vw;
  cursor: pointer;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 5px;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.prev:hover, .next:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Titik indikator */
.dot {
  height: 15px;
  width: 15px;
  margin: 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  cursor: pointer;
}

.active, .dot:hover {
  background-color: #717171;
}

.img-mobile {
  display: none;
}

.img-desktop {
  display: block;
}

  
  /* Fading animation */
  .fade {
    opacity: 1; /* Pastikan tidak disembunyikan sebelum animasi */
    animation-name: slideIn;
    animation-duration: 1.5s;
    animation-fill-mode: both; /* Mencegah kedipan */
    will-change: transform, opacity;
  }
  
  @keyframes slideIn {
    from {
        opacity: 0;
        transform: translate3d(-50px, 0, 0); /* Gunakan translate3d */
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
    
  }
  /* RESPONSIVE DESIGN */
@media screen and (max-width: 768px) {
  .img-mobile {
    display: block;
  }
  .img-desktop {
    display: none;
  }
  .hero-text {
    width: 90%;
    padding: 15px;
  }
  
  .hero-text h3 {
    font-size: 13px;
  }

  .hero-text p {
    font-size: 10px;
  }

  .hero-text button {
    font-size: 10px;
    padding: 10px 15px;
  }

  .prev, .next {
    font-size: 3vw;
    padding: 8px;
  }
}

@media screen and (max-width: 480px) {
  .hero-text h3 {
    font-size: 10px;
  }

  .hero-text p {
    font-size: 8px;
  }

  .hero-text button {
    font-size: 2vw;
    padding: 5px 10px;
  }

  .prev, .next {
    display: none;
  }
  .dot{
    width: 5px;
    height: 5px;
  }
}
/* Container utama */
.box-content {
  
  
  text-align: center;
  background-color: white;
   /* Ganti dengan path gambar */
  background-size: cover;  /* Menyesuaikan gambar agar menutupi elemen */
  background-position: center;  /* Memposisikan gambar di tengah */
  background-repeat: no-repeat;  /* Mencegah pengulangan gambar */
  padding-top: 25px;

}
@media screen and (max-width: 768px) {
  .box-content{
    margin: 0 15px 0 15px;
  }
}

/* Judul dengan garis bawah */
.teks-judul {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 10px;
  display: inline-block;
  border-bottom: 4px solid #9961CF; /* Warna garis bawah */

  opacity: 0; /* Awalnya disembunyikan */
  transform: translateY(-30px); /* Geser sedikit ke bawah */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.teks-judul.show {
  opacity: 1;
  transform: translateY(0);
}

/* Flexbox Container */
.flex-container {
  display: flex;
  flex-wrap: wrap; /* Agar responsif */
  justify-content: center;
  gap: 20px; /* Jarak antar item */
  font-size: 30px;
  text-align: center;
  margin: 25px;
  background-color: transparent;
}

/* Flex Item */
.flex-item {
  background-color: transparent;
  padding: 10px;
  flex: 1 1 300px; /* Basis 300px, bisa lebih kecil jika layar sempit */
  max-width: 300px; /* Maksimum lebar setiap item */
  
  opacity: 0; /* Awalnya disembunyikan */
  transform: translateY(30px); /* Geser sedikit ke bawah */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* Saat Elemen Muncul di Layar */
.flex-item.show {
  opacity: 1;
  transform: translateY(0);
}
/* Gambar Responsif */
.flex-item img {
  width: 100%;
  height: auto;
  max-width: 326px; /* Agar tidak lebih besar dari ukuran aslinya */
  border-radius: 8px; /* Membuat sudut gambar sedikit membulat */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
}

/* Efek Hover */
.flex-item:hover {
  transform: scale(1.05);
}

/* 🔹 RESPONSIVE DESIGN */

/* Tablet (≤ 768px) */
@media screen and (max-width: 768px) {
  .teks-judul {
    font-size: 24px;
  }

  .flex-container {
    gap: 15px;
  }

  .flex-item {
    flex: 1 1 45%; /* 2 Kolom saat di tablet */
    max-width: 45%;
  }
}

/* Smartphone (≤ 480px) */
@media screen and (max-width: 480px) {
  .teks-judul {
    font-size: 20px;
  }

  .flex-container {
    flex-direction: column; /* Jadi 1 kolom di layar kecil */
    align-items: center;
  }

  .flex-item {
    flex: 1 1 100%;
    max-width: 90%;
  }
}
.responsive {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Agar semua item ada di tengah */
  gap: 50px; /* Jarak antar item */
  padding: 20px;
  margin-bottom: 25px;
}

.gallery {
  border: 1px solid black;
  background: rgba(255, 255, 255, 0.7);
  padding: 0;
  border-radius: 10px;
  width: 240px;
  height: auto;
  transition: 0.3s;
  text-align: center;

  opacity: 0;
  transform: translateY(30px); /* Mulai dari atas */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.gallery.show{
  opacity: 1;
  transform: translateY(0);
}

.gallery img {
  width: 240px;
  height: 300px;
  object-fit: cover;

}
.gallery img:hover {
  transform: scale(1.05);
}

.desc {
  padding: 15px;
  font-weight: bold;
  color: #333;
  font-size: 1rem;
}
/* Responsif untuk Tablet */
@media (max-width: 768px) {
  .responsive {
    gap: 30px;
  }

  .gallery {
    width: 200px;
  }

  .gallery img {
    width: 200px;
    height: 250px;
  }

  .desc {
    font-size: 0.9rem;
  }
}

/* Responsif untuk HP */
@media (max-width: 480px) {
  .responsive {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .gallery {
    width: 90%;
  }

  .gallery img {
    width: 100%;
    height: auto;
  }

  .desc {
    font-size: 0.85rem;
    padding: 10px;
  }
}

.box-content-layanan {
  margin: 0 40px 0 40px;
  border-bottom: 1px solid #333;
  text-align: center;
  background-color: white;
   /* Ganti dengan path gambar */
  background-size: cover;  /* Menyesuaikan gambar agar menutupi elemen */
  background-position: center;  /* Memposisikan gambar di tengah */
  background-repeat: no-repeat;  /* Mencegah pengulangan gambar */
  padding-top: 25px;
}
@media screen and (max-width: 768px) {
  .box-content-layanan{
    margin: 0 15px 0 15px;
  }
}

/* Flexbox Container */
.flex-container-layanan {
  display: flex;
  flex-wrap: wrap; /* Agar responsif */
  justify-content: center;
  gap: 20px; /* Jarak antar item */
  font-size: 30px;
  text-align: center;
  margin: 25px;
  background-color: transparent;

  opacity: 0;
  transform: translateY(30px); /* Mulai dari atas */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.flex-container-layanan.show{
  opacity: 1;
  transform: translateY(0);
}


/* Flex Item */
.flex-item-layanan {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  flex: 1 1 200px; /* Basis 300px, bisa lebih kecil jika layar sempit */
  max-width: 200px; /* Maksimum lebar setiap item */
  max-height: 200px;
  transition: transform 0.3s ease;
  border-radius: 10px;
  border: 1px solid #9961CF;
}
.flex-item-layanan h3{
  font-size: 16px;
  border-bottom: 1px solid #9961CF;
}
.flex-item-layanan p{
  font-size: 14px;
  margin-bottom: 10px;
}
/* Gambar Responsif */
.flex-item-layanan img {
  width: 100%;
  height: auto;
  margin-bottom: 50px;
  max-width: 326px; /* Agar tidak lebih besar dari ukuran aslinya */
  border-radius: 8px; /* Membuat sudut gambar sedikit membulat */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
  border: 3px solid #9961CF;
}

/* Efek Hover */
.flex-item-layanan:hover {
  transform: scale(1.05);
}

.scroll-container-produk{
  background-color: transparent;
  overflow: auto;
  white-space: nowrap;
  padding: 30px;
  
}
.scroll-container-produk video {
  width: 100%;
  max-width: 250px; /* Batas maksimum agar tetap proporsional */
  height: auto;
  border: 2px solid #9961CF; /* Border terlihat */
  border-radius: 10px;
  margin: 10px;
}
/* Responsif untuk Tablet */
@media (max-width: 768px) {
  .flex-container-layanan {
    gap: 15px;
    margin: 20px;
  }

  .flex-item-layanan {
    flex: 1 1 250px;
    max-width: 250px;
  }

  .flex-item-layanan img {
    max-width: 250px;
  }
}

/* Responsif untuk HP */
@media (max-width: 480px) {
  .flex-container-layanan {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .flex-item-layanan {
    flex: 1 1 90%;
    max-width: 90%;
  }

  .flex-item-layanan img {
    max-width: 100%;
  }
}

/* ===== GRID LIST ===== */
.service-list {
  display: grid;
  /* Desktop: kunci 5 kolom stabil */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;

  /* Center seluruh grid via container, bukan justify-content:center */
  max-width: 1400px;    /* sesuaikan dengan layout */
  margin: 20px auto;
  padding: 0;

  /* Samakan tinggi per-track baris */
  align-items: stretch;
  grid-auto-rows: 1fr;

  /* Animasi masuk */
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.service-list.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== CARD / ITEM ===== */
.service-item {
  display: flex;           /* agar konten bisa didorong vertikal */
  flex-direction: column;
  background: rgba(255, 255, 255, 0.7);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  height: 80%;            /* penting: isi penuh track grid */
}

/* Hilangkan margin manual antar item (gunakan gap grid) */
.service-item + .service-item { margin: 0; }

/* Hover */
.service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0px 10px 22px rgba(0,0,0,0.16);
}

/* ===== GAMBAR ===== */
.service-item a { display: block; }

.service-item a img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;     /* seragamkan tinggi kartu */
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.service-item a img:hover { transform: scale(1.03); }

/* ===== TEKS ===== */
.title {
  font-size: 20px;
  font-weight: 600;
  margin-top: 14px;
  color: #222;
}

.description {
  font-size: 15px;
  color: #555;
  margin-top: 8px;
  line-height: 1.55;
  margin-bottom: 0;         /* rapikan ruang bawah */
}

/* ===== BREAKPOINTS ===== */
@media (max-width: 1200px) {
  .service-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  .service-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .title { font-size: 19px; }
  .description { font-size: 15px; }
}

@media (max-width: 768px) {
  .service-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0 12px;
  }
  .service-item { 
    padding: 18px;
    height: 85%;
  }
  .title { font-size: 18px; }
  .description { font-size: 14.5px; }
}

@media (max-width: 480px) {
  .service-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .service-item { padding: 16px; }
  .service-item a img { aspect-ratio: 4 / 3; } /* proporsional di mobile */
  .title { font-size: 16px; }
  .description { font-size: 14px; }
}




.flex-container-testimoni {
  display: flex;
  flex-wrap: wrap; /* Agar responsif */
  justify-content: center;
  gap: 20px; /* Jarak antar item */
  font-size: 30px;
  text-align: center;
  margin: 25px;
  background-color: transparent;

  opacity: 0;
  transform: translateY(-30px); /* Mulai dari atas */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.flex-container-testimoni.show{
  opacity: 1;
  transform: translateY(0);
}

/* Style Video */
.flex-container-testimoni video {
  width: 100%;
  max-width: 250px; /* Batas maksimum agar tetap proporsional */
  height: auto;
  border: 2px solid #9961CF; /* Border terlihat */
  border-radius: 10px;
  margin: 10px;
  transition: transform 0.3s ease-in-out;
  object-fit: cover;
}

/* Efek Hover */
.flex-container-testimoni video:hover {
  transform: scale(1.05);
}

/* RESPONSIF untuk Tablet & Mobile */
@media screen and (max-width: 768px) {
  .flex-container-testimoni {
    position: relative;
    overflow: hidden;
    flex-direction: row; /* tetap horizontal */
    align-items: center;
    height: auto;
  }

  .flex-container-testimoni video {
    display: none;
    max-width: 100%;
    width: 100%;
    margin: 0;
  }

  .flex-container-testimoni video.active {
    display: block;
  }
}


.box-content-bawah {
  margin: 0 40px 0 40px;
  border-bottom: 1px solid #333;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  text-align: center;
   /* Ganti dengan path gambar */
  background-size: cover;  /* Menyesuaikan gambar agar menutupi elemen */
  background-position: center;  /* Memposisikan gambar di tengah */
  background-repeat: no-repeat;  /* Mencegah pengulangan gambar */
  padding-top: 25px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
@media screen and (max-width: 768px) {
  .box-content-bawah{
    margin: 0 15px 0 15px;
  }
}
.slideshow-dokumentasi {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: auto;
  margin-bottom: 40px;
  overflow: hidden;
}

.slide-dokumentasi {
  display: none;
  text-align: center;
}

.slide-dokumentasi img {
  width: 45%;
  margin: 10px 10px;
  border-radius: 10px;
  border: 2px solid white;
  vertical-align: middle;
  transition: transform 0.3s;
}

.slide-dokumentasi img:hover {
  transform: scale(1.05);
}

.fade-dokumentasi {
  animation-name: fadeDokumentasi;
  animation-duration: 1s;
}

@keyframes fadeDokumentasi {
  from { opacity: 0.4 }
  to { opacity: 1 }
}
@media screen and (max-width: 480px) {
  .slide-dokumentasi img {
    width: 90%;
  }
}


/*Footer*/
.box-content-footer{
  margin: 0 40px 0 40px;
  border-bottom: 1px solid #333;
  
  background-color: transparent;
  padding-top: 25px;
}

.row {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

/* Kolom Logo */
.column {
  width: 45%;
  padding: 10px;
  background-color: transparent;
  color: black;
  text-align: left;
}
.column img{
  width: 125px;
  height: 125px;
}

/* Kolom Informasi */
.column-2 {
  width: 45%;
  padding: 10px;
  background-color: transparent;
  color: black;
  text-align: center;
}

/* Judul "Informasi Kami" */
.title-info {
  width: 100%;
  margin-bottom: 10px;
}

/* Container untuk dua kolom dalam column-2 */
.columns-container {
  display: flex;
  justify-content: space-between; /* Mengatur agar kedua kolom sejajar */
  gap: 10px;
}

/* Kolom di dalam column-2 */
.column-2 .column-a {
  width: 30%;
  text-align: left;
  padding: 10px;
}
.column-2 .column-b {
  width: 70%;
  text-align: left;
  padding: 10px;
}

.column-2 img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
  margin: 10px;
}
.column-2 a{
  text-decoration: none;
}

/* Efek Hover */
.column-2 img:hover {
  transform: scale(1.1);
}
/* ===== RESPONSIF UNTUK TABLET ===== */
@media screen and (max-width: 768px) {
  .row {
    flex-direction: column;
    align-items: center;
  }
  
  .column,
  .column-2 {
    width: 100%;
    text-align: center;
    align-items: center;
  }
  
  .columns-container {
    flex-direction: column;
    align-items: center;
  }
  
  .column-a{
    display:none;
  }
  .column-b p{
    display: none;
  }
}

/* ===== RESPONSIF UNTUK MOBILE ===== */
@media screen and (max-width: 480px) {
  .column img {
    width: 100px;
  }

  .column-b img {
    width: 30px;
    height: 30px;
  }

  .column-b p {
    font-size: 14px;
  }
}
/* ===== Umrah Musim Dingin ===== */
/* ===== Umrah Musim Dingin ===== */
/* ===== Umrah Musim Dingin ===== */
/* ===== Umrah Musim Dingin ===== */
/* ===== PLC Training (versi putih & responsif) ===== */
.box-content-umrah {
  margin: 40px 40px 0 40px;
  background: #fff;                 /* Putih bersih */
  background-image: none;           /* Pastikan tanpa bg image */
  color: #111;                      /* Teks gelap agar kontras */
  text-align: left;
  padding: 28px 20px;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
  .box-content-umrah {
    margin: 15px;
    padding: 22px 16px;
  }
}

/* ===== Heading & subheading ===== */
.umrah-title {
  color: #111;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 800;
  margin: 0 0 6px 0;
  text-align: center;
  letter-spacing: .2px;
}
.umrah-subtitle {
  color: #5b6170;
  font-size: 1rem;
  margin: 0 0 16px 0;
  text-align: center;
}

/* ===== Layout kolom ===== */
.umrah-columns {
  display: grid;
  grid-template-columns: 1.5fr .9fr; /* konten | kontak */
  gap: 22px;
  margin-top: 24px;
}

@media (max-width: 992px) {
  .umrah-columns { grid-template-columns: 1fr; }
}

/* ===== Card konten & kontak ===== */
.umrah-content-box,
.umrah-contact-box {
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 14px;
  padding: 18px;
}

.umrah-contact-box { align-self: start; }

/* ===== Blok atas & bawah konten ===== */
.umrah-top-box {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
}
.umrah-top-text { flex: 1; }
.umrah-price { margin: 0; font-weight: 700; font-size: 1.15rem; color: #1b1734; }

.umrah-bottom-box {
  background: #fff;
  border: 1px solid #f0f1f5;
  border-radius: 14px;
  padding: 18px;
}

/* ===== Heading kecil dalam konten ===== */
.umrah-bottom-box h3 {
  margin: 18px 0 8px;
  font-weight: 700;
  color: #151826;
  font-size: 1.05rem;
}
.umrah-bottom-box h3::after {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  margin-top: 6px;
  background: linear-gradient(to right, #3A1359, #25D366);
  border-radius: 2px;
}

/* ===== List & checklist ===== */
.umrah-list {
  line-height: 1.75;
  margin: 0 0 16px 18px;
  padding: 0;
  color: #111;
}
.umrah-list li { margin: 6px 0; }

.umrah-list.checklist {
  list-style: none;
  margin-left: 0;
}
.umrah-list.checklist li {
  position: relative;
  padding-left: 28px;
}
.umrah-list.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 20px; height: 20px; line-height: 20px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #e5d5ff;
  background: #f8f5ff;
  color: #7a3cff;
  font-size: 12px; font-weight: 700;
}

/* ===== Brand chips (opsional masih dipakai) ===== */
.brand-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.brand-chips span {
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  background:#fff;
  font-size: .9rem;
  color: #111;
}

/* ===== Tabel harga ===== */
.price-table {
  display: grid;
  grid-template-columns: 1fr auto; /* label | nominal */
  gap: 10px 14px;
  align-items: baseline;
  margin: 10px 0 14px;
}
.price-table .label { color: #3a3f4a; }
.price-table .label .note {
  display: block; font-size: .9rem; color: #667085; margin-top: 2px;
}
.price-table .value { font-weight: 700; color: #111; text-align: right; }
.price-table .unit { font-weight: 500; color: #6b7180; margin-left: 4px; }

@media (max-width: 768px) {
  .price-table { grid-template-columns: 1fr; }
  .price-table .value { text-align: left; }
}

/* ===== Divider halus ===== */
.umrah-bottom-box hr,
.box-content-umrah hr {
  margin: 16px 0;
  border: none;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* ===== Kontak & tombol WA ===== */
.umrah-contact-box h3 { margin-top: 0; color: #151826; }

.wa-button {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration: none;
  background: #25D366;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 18px rgba(37,211,102,0.22);
  transition: filter .2s ease;
}
.wa-button:hover { filter: brightness(0.98); }

.umrah-contact-box .contact-list {
  margin: 14px 0 0 18px;
  color: #555;
}

/* ===== Link hover umum di area kolom ===== */
.umrah-columns a { text-decoration: none; }
.umrah-columns a:hover { color: #3A1359; }

/* ===== Mobile tweaks untuk box atas ===== */
@media (max-width: 768px) {
  .umrah-top-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .umrah-top-text { width: 100%; }
}

/*---------------------------------------------------------------------------------------*/
/* ================= Theme ================= */
#program{
  --accent: #a706b6;         /* warna utama (bisa disamakan dengan tema situs) */
  --text: #ffffff;           /* warna teks utama */
  --card-bg: rgba(255,255,255,.08);
  --card-border: rgba(255,255,255,.18);
}

/* ================ Section BG ================ */
#program{
  position: relative;
  background-image: url(images/banner-bvs.png);
  background-size: cover;
  background-position: center;
  min-height: 640px;
  display: grid;
  align-items: center;
  color: var(--text);
  overflow: hidden;
}
/* overlay gelap + gradien ungu tipis agar teks lebih kontras */
#program .hero-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.25) 100%),
    radial-gradient(70% 60% at 0% 50%, rgba(167,6,182,.25), transparent 60%);
  pointer-events: none;
}

/* ================ Content Container ================ */
#program .hero-container{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

/* Eyebrow kecil di atas judul */
#program .hero-eyebrow{
  display: inline-block;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e8d7ec;
  background: rgba(167,6,182,.18);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(167,6,182,.35);
  margin-bottom: 12px;
}

/* Judul dan Deskripsi */
#program .hero-title{
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.15;
  margin: 0 0 10px 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
#program .hero-desc{
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  margin: 0 0 18px 0;
  color: #f7f2f8;
}

/* Chips highlight */
#program .hero-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0; margin: 0 0 22px 0;
  list-style: none;
}
#program .hero-chips li{
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .9rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
}

/* CTA buttons */
#program .hero-cta{
  display: flex; gap: 14px; flex-wrap: wrap;
}
#program .btn{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
}
#program .btn-primary{
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px rgba(167,6,182,.35);
}
#program .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(167,6,182,.45); }

#program .btn-ghost{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
}
#program .btn-ghost:hover{ background: rgba(255,255,255,.18); transform: translateY(-2px); }

/* ================ Responsive ================ */
@media (max-width: 900px){
  #program{ min-height: 520px; }
  #program .hero-container{ padding: 24px; }
}
@media (max-width: 600px){
  #program{ min-height: 420px; }
  #program .hero-container{ padding: 18px; border-radius: 14px; }
  #program .hero-cta{ gap: 10px; }
  #program .btn{ padding: 10px 14px; border-radius: 10px; }
}

#more-info {
    background-color: white;
    min-height: 700px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* jarak antar container */
}
#more-info h1 {
    display: inline-block; /* kuncinya */
    
    margin: 0; /* opsional, biar rapi */
    padding-bottom: 5px; /* jarak antara teks dan garis */
}

.info-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* biar responsif di HP */
    gap: 20px;
}

.info-left, .info-right {
    flex: 1;
    min-width: 250px;
}

.info-left h3 {
    margin-bottom: 5px;
    font-size: 24px;
    color: #a706b6;
}

.info-left h4 {
    margin-bottom: 10px;
    font-size: 20px;
    color: #333;
}

.info-left p, .info-right p {
    margin: 5px 0;
    line-height: 1.5;
}

.info-left a {
    color: #a706b6;
    text-decoration: none;
}

.info-left a:hover {
    text-decoration: underline;
}

.info-right h4 {
    font-size: 20px;
    margin-bottom: 10px;
    color: black;
}

.map-container {
    border-radius: 8px;
    overflow: hidden;
}
/* --- Responsive tweaks --- */

/* Tablet landscape & down */
@media (max-width: 992px) {
  #more-info {
    padding: 16px;
    gap: 16px;
  }
  .info-container {
    gap: 16px;
  }
  .map-container iframe {
    height: 360px;
  }
}

/* Tablet portrait & HP besar */
@media (max-width: 768px) {
  .info-container {
    flex-direction: column;     /* kolom kiri-kanan jadi atas-bawah */
    align-items: stretch;
  }
  .info-left, .info-right {
    min-width: 100%;
    flex: 1 1 auto;
  }

  /* Sedikit kecilkan font agar rapi di layar kecil */
  #more-info .info-left h3 { font-size: 22px; }
  #more-info .info-left h4,
  #more-info .info-right h4 { font-size: 18px; }
  #more-info .info-left p,
  #more-info .info-right p { font-size: 16px; }

  .map-container iframe {
    height: 320px;
  }
}

/* HP kecil */
@media (max-width: 480px) {
  #more-info {
    padding: 14px;
    gap: 14px;
  }
  .info-container { padding: 16px; }

  #more-info .info-left h3 { font-size: 20px; }
  #more-info .info-left h4,
  #more-info .info-right h4 { font-size: 16px; }
  #more-info .info-left p,
  #more-info .info-right p { font-size: 14px; line-height: 1.6; }

  .map-container iframe {
    height: 260px;
  }
}

/* Pastikan iframe peta full width dan responsif */
.map-container iframe {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
}
/* Facility Section */
#facility.box-content {
  
  padding: 25px 20px;
  background: #fff;
  border-radius: 0px;
  text-align: center;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 24px;
  
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(to right, #3A1359, #25D366);
  margin: 8px auto 0;
  border-radius: 2px;
}

/* ===== Theme accent (sesuaikan saja) ===== */
#facility{
  --accent: #6c63ff;
  --accent-weak: #6c63ff20;     /* 12.5% */
}


/* Layout: flex agar baris ganjil tetap center */
.facility-grid{
  display:flex;
  flex-wrap:wrap;
  gap:28px 56px;            /* row | column */
  justify-content:center;
  align-items:stretch;
  max-width:1000px;
  margin:0 auto;
  padding:4px;
}

/* Card */
.facility-item{
  width:200px;
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:18px 14px;
  text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.facility-item:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  border-color:#e2e2e2;
}
/* 5 kolom di desktop */
@media (min-width: 1100px){
  .facility-grid{
    display: grid;                   /* override flex */
    grid-template-columns: repeat(5, 1fr);
    gap: 28px 32px;                  /* row | column */
    max-width: 1120px;               /* pas buat 5 kolom */
    margin: 0 auto;
  }
  .facility-item{
    width: auto;                     /* lepas fixed 200px saat grid */
  }
}

/* Icon bulat */
.icon-wrap{
  width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center;
  margin:4px auto 12px;
  background:
    radial-gradient(40% 40% at 50% 40%, var(--accent-weak), transparent),
    var(--accent-weak);
  outline:2px solid transparent;
  transition:outline-color .2s ease, transform .2s ease;
}
.icon-wrap i{
  font-size:30px; line-height:1;
  color:var(--accent);
}
.facility-item:hover .icon-wrap{
  outline-color:var(--accent);
  transform:scale(1.04);
}

/* Teks */
.facility-item h3{
  margin:0;
  font-size:1.08rem;
  color:#333;
  font-weight:600;
  letter-spacing:.2px;
}

/* Responsif */
@media (max-width:768px){
  #facility.box-content{ margin:20px; padding:20px 15px; }
  .facility-grid{ gap:20px 24px; }
  .facility-item{ width:160px; padding:16px 12px; }
  .icon-wrap{ width:64px;height:64px; }
  .icon-wrap i{ font-size:26px; }
}
/* =========================
   Testimoni (Grid & Cards)
   ========================= */
.section-testimoni {
  --accent: #9961CF;
  max-width: 1100px;
  margin: 40px auto;

  padding: 0 16px;
  padding-bottom: 40px;
}

.section-testimoni .testi-head {
  text-align: center;
  margin-bottom: 18px;
}

.section-testimoni h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
}

.section-testimoni .sub {
  margin: 8px 0 14px;
  color: #666;
}

/* Buttons (shared) */
.btn-primary,
.btn-ghost,
.btn-disabled {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  border-color: transparent;
}

.btn-primary:hover {
  filter: brightness(0.96);
}

.btn-ghost {
  background: #fff;
  border: 1px solid #e7e7e7;
  color: #333;
}

.btn-ghost:hover {
  background: #f7f7f7;
}

.btn-disabled {
  background: #eee;
  color: #999;
  cursor: not-allowed;
}

/* ===== Full-bleed section (nempel ke dinding) ===== */
/* --- Pusatkan konten section --- */
.section-testimoni {
  margin-inline: auto;           /* kembali center */
  max-width: 1440px;             /* boleh ganti 1200/1280/1536 sesuai layout */
  padding-inline: 16px;          /* napas kiri-kanan */
}

/* --- Grid: kolom adaptif, kartu bisa melebar --- */
.section-testimoni .testi-grid {
  display: grid;
  /* auto-fit + minmax bikin kartu melebar dan jumlah kolom fleksibel */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

/* --- Kalau di layar sangat lebar ingin tetap 5 kolom maksimum --- */
@media (min-width: 1400px) {
  .section-testimoni .testi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* --- Card & isi tetap seperti sebelumnya --- */
.section-testimoni .testi-card {
  background: #fff;
  border: 1px solid #e6e6ec;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section-testimoni .testi-photo { 
  margin: 0; line-height: 0; background: #f7f7fb; border-bottom: 1px solid #f0f0f4;
}
.section-testimoni .testi-photo img {
  width: 100%;
  aspect-ratio: 16 / 10;  /* lebih fleksibel dari height fix */
  object-fit: cover;
  display: block;
}

.section-testimoni .testi-content {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}



.section-testimoni .testi-quote {
  color: #111827;
  font-size: 15px;
  line-height: 1.6;
  flex: 1;
}

.section-testimoni .testi-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #6b7280;
  font-size: 13px;
  margin-top: 4px;
}

.section-testimoni .testi-meta .author {
  font-weight: 700;
  color: #333;
}

/* Pagination */
.section-testimoni .pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}

.section-testimoni .pagination .page {
  padding: 8px 12px;
  border: 1px solid #e6e6ec;
  border-radius: 10px;
  text-decoration: none;
  color: #111;
}

.section-testimoni .pagination .page.active {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

/* =========================
   Modal (versi sederhana)
   ========================= */
/* sembunyikan modal bila ada atribut hidden */
.modal[hidden] {
  display: none !important;
}

/* backdrop + centering */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  z-index: 9999;
  padding: 16px;
}

/* dialog */
.modal-dialog {
  width: min(560px, 92vw);
  background: #fff;
  border-radius: 14px;
  padding: 18px 16px;
  border: 1px solid #eee;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  position: relative;

    /* KUNCI: batasi tinggi & aktifkan scroll */
  max-height: calc(100dvh - 32px);   /* aman untuk mobile (address bar) */
  overflow-y: auto;
  overscroll-behavior: contain;      /* cegah bubbling ke body */
  padding: 0; 
}

/* close button */
.modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* =========================
   Form Testimoni (modal)
   ========================= */
.testi-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.testi-form label {
  font-size: 14px;
  color: #374151;
}

.testi-form input[type="text"],
.testi-form input[type="email"],
.testi-form input[type="number"],
.testi-form input[type="file"],
.testi-form textarea {
  width: 95%;
  border: 1px solid #e6e6ec;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
}

.testi-form textarea {
  resize: vertical;
}

.testi-form .help {
  color: #6b7280;
  font-size: 12px;
}

.testi-form .note {
  color: #6b7280;
  font-size: 13px;
  margin: 8px 0 14px;
}

.testi-form .form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

/* Honeypot: sembunyikan total */
.hp-field {
  position: absolute !important;
  left: -99999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================
   Responsiveness
   ========================= */
@media (max-width: 520px) {
  .modal-dialog {
    width: calc(100vw - 24px);
  }
}
/* Samakan perilaku [hidden] */
.testi-modal[hidden],
.testi-modal-backdrop[hidden] { display: none !important; }

/* Backdrop terpisah */
.testi-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 9998; /* di bawah modal */
  opacity: 0;
  transition: opacity .25s ease;
}
.testi-modal-backdrop.is-open { opacity: 1; }

/* Kontainer modal */
.testi-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;           /* pastikan di atas konten lain */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.testi-modal.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* Dialog & tombol close versi testi- */
.testi-modal__dialog {
  width: min(560px, 92vw);
  background: #fff;
  border-radius: 14px;
  padding: 18px 16px;
  border: 1px solid #eee;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  position: relative;
}
.testi-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* Responsif */
@media (max-width: 520px) {
  .testi-modal__dialog { width: calc(100vw - 24px); }
}
/* ===== BASE SECTION ===== */
.promo-section{
  background: url('images/baner-bvs-2.png') center/cover no-repeat;
  position: relative;
  min-height: 700px;
  padding: 48px 16px;
  color: #fff;
  isolation: isolate;
}
.promo-section::before{
  content:"";
  position: absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55));
  z-index:-1;
}
.promo-container{
  max-width: 1100px;
  margin: 0 auto;
}
.promo-title{
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  margin: 0 0 12px;
  text-align: left;
}

/* ===== HERO BOX ===== */
.promo-hero{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.promo-badge{
  display: inline-block;
  background: #ff6b6b;
  color: #fff;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.promo-heading{
  font-size: clamp(22px, 3vw, 32px);
  margin: 4px 0 6px;
  font-weight: 800;
}
.promo-sub{
  margin: 0 0 16px;
  color: #eaeaea;
}

/* ===== PRICING ===== */
.promo-pricing{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 16px;
  line-height: 1;
}
.price-old{
  color: #ddd;
  text-decoration: line-through;
  opacity: .85;
  font-size: clamp(14px, 2.2vw, 16px);
}
.price-now{
  background: #00c853;
  color:#081a0d;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: clamp(18px, 3vw, 24px);
}
.price-off{
  background: #ffd54f;
  color:#5d4100;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: clamp(13px, 2.2vw, 14px);
}

/* ===== CTA ===== */
.promo-cta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.btn-promo{
  background: #00e676;
  color:#063d1e;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 12px;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 8px 20px rgba(0, 230, 118, .25);
}
.btn-promo:hover{ transform: translateY(-2px); background:#00d96e; }
.promo-kode{
  background: rgba(255,255,255,.1);
  border: 1px dashed rgba(255,255,255,.2);
  padding: 8px 12px;
  border-radius: 10px;
}

/* ===== COUNTDOWN ===== */
.promo-countdown{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,.28);
  padding: 10px 12px;
  border-radius: 12px;
  margin: 6px 0 12px;
}
.cd-label{ opacity:.9; }
.cd-item{
  display:inline-flex; flex-direction:column; align-items:center;
  background: rgba(255,255,255,.08);
  padding: 6px 10px; border-radius: 10px;
}
.cd-item b{ font-size: 18px; font-weight: 800; line-height:1; }
.cd-item small{ font-size: 11px; opacity:.85; }

/* ===== LIST POINTS ===== */
.promo-points{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 10px 14px; padding: 0; margin: 8px 0 0; list-style: none;
}
.promo-points li{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 12px;
}

/* ===== GRID BONUS CARDS ===== */
.promo-grid{
  display:grid; gap:14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.promo-card{
  position: relative;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 16px;
  min-height: 110px;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}
.promo-card h3{ margin: 6px 0 6px; font-size: 18px; color:#fff; }
.promo-card p{ margin: 0; color:#f1f1f1; opacity:.95; }
.ribbon{
  position:absolute; top:12px; right:12px;
  background:#ffec99; color:#5a4600; font-weight:800;
  padding:4px 8px; border-radius:8px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px){
  .promo-hero{ padding: 18px; }
  .promo-countdown{ gap:8px; }
  .cd-item b{ font-size: 16px; }
}

/* ===== Brand logos row ===== */
.plc-brands {
  display: grid;
  grid-template-columns: repeat(6, minmax(80px, 1fr));
  gap: 14px;
  align-items: center;
  justify-items: center;
  padding: 10px 0 6px;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  background: #fff;
  margin: 8px 0 14px;
}
h3 + .plc-brands { margin-top: 10px; }
.plc-brand {
  margin: 0;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;          /* default: caption di bawah */
  align-items: center;
  justify-content: center;
  height: 84px;                    /* tinggi sedikit lebih besar untuk ruang caption */
}

.plc-brand img {
  max-height: 44px;                /* sisakan ruang untuk tulisan */
  max-width: 120px;
  width: auto;
  height: auto;
  filter: grayscale(35%);
  opacity: .9;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.plc-brand figcaption {
  margin-top: 6px;                 /* jarak bawah logo */
  font-size: .85rem;
  line-height: 1.15;
  color: #61667a;
  text-align: center;
  white-space: nowrap;
}
.plc-brand img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-1px);
}
/* Mode caption di atas: cukup tambahkan class .caption-top pada .plc-brands */
.plc-brands.caption-top .plc-brand { flex-direction: column-reverse; }
.plc-brands.caption-top .plc-brand figcaption { margin-top: 0; margin-bottom: 6px; }
/* Responsif */
/* Responsif: grid tetap adaptif */
@media (max-width: 992px) {
  .plc-brands { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
  .plc-brand { height: 90px; }
  .plc-brand img { max-height: 48px; }
}
@media (max-width: 520px) {
  .plc-brands { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
  .plc-brand { height: 96px; }
  .plc-brand img { max-height: 52px; }
}
/* ===== Info Note with Icons ===== */
.info-note {
  background: #f7f7fb;
  border: 1px solid #ececf3;
  border-radius: 14px;
  padding: 14px;
}

/* grid list */
.info-note.with-icons .info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

/* responsive columns */
@media (min-width: 640px) {
  .info-note.with-icons .info-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .info-note.with-icons .info-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* each item */
.info-note.with-icons .info-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #eeeef6;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(17, 18, 38, 0.04);
}

/* circle icon */
.info-note.with-icons i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: 0 0 36px;

  /* warna default (bisa disesuaikan dengan tema ungu kamu) */
  background: rgba(153, 97, 207, 0.12);   /* ungu muda transparan */
  color: #7b43bf;                         /* ungu utama */
}

/* teks */
.info-note.with-icons .info-list span {
  font-size: 14px;
  color: #333;
}
/* Coming soon badge */
.coming-badge{
  display:inline-block;
  padding:4px 10px;
  margin-bottom:8px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.4px;
  background:#FFE9A6;
  color:#6b4f00;
  border:1px solid #ffd978;
}
.coming-soon .umrah-price{ opacity:.7 }
/* ===== GALLERY (selaras dengan facility/testimoni) ===== */
.section-gallery .sub{ margin-top:6px; color:#666; }

.gallery-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width:640px){ .gallery-grid{ grid-template-columns:repeat(3,1fr);} }
@media (min-width:1024px){ .gallery-grid{ grid-template-columns:repeat(4,1fr);} }

.g-item{ margin:0; border-radius:12px; overflow:hidden; background:#f5f6fb; }
.g-item img{
  width:100%; height:200px; object-fit:cover; display:block;
  transition:transform .25s ease;
  cursor:zoom-in;
}
.g-item:hover img{ transform:scale(1.03); }

/* Lightbox */
.glightbox[hidden]{ display:none; }
.glightbox{
  position:fixed; inset:0; z-index:2000; padding:24px;
  background:rgba(10,12,28,.8); display:grid; place-items:center;
}
.glightbox img{
  max-width:min(1100px,95vw); max-height:80vh;
  width:auto; height:auto; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.glightbox figcaption{ color:#fff; margin-top:10px; font-size:14px; opacity:.9; text-align:center; }
.gclose{
  position:absolute; top:16px; right:16px; width:44px; height:44px;
  border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background:transparent; color:#fff; font-size:26px; cursor:pointer;
}
.gclose:hover{ background:rgba(255,255,255,.1); }
/* Spacing kiri-kanan untuk section Gallery */
#gallery .section-gallery{
  padding-left: 14px;
  padding-right: 14px;
}

@media (min-width: 640px){
  #gallery .section-gallery{ padding-left: 18px; padding-right: 18px; }
}
@media (min-width: 1024px){
  #gallery .section-gallery{ padding-left: 24px; padding-right: 24px; }
}

/* =========================
   ABOUT — Single Column
   ========================= */
.about-section{
  max-width: 1100px;
  width: min(1100px, 92vw);
  margin: clamp(18px, 3vw, 28px) auto;
  padding-inline: 12px;
  padding-bottom: 20px;
}

.about-header{
  text-align: center;
  margin-bottom: clamp(12px, 2.2vw, 18px);
}

.about-title{
  margin: 0;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: .2px;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  background: black;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;           /* gradient text */
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.about-subtitle{
  margin: 8px 0 0;
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
  color: #5a4a77;               /* senada brand */
}

.about-accent{
  width: 92px; height: 4px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #a706b6, #6b21a8);
  opacity: .95;
}

.about-card{
  background:#fff;
  border:1px solid #e6e6ec;
  border-radius:16px;
  padding:clamp(16px, 2.2vw, 22px);
  box-shadow:0 10px 28px rgba(17,12,34,.06);
  margin-bottom:20px;
 
}
.about-card p{
  margin: 0 0 12px;
  color: #2f3040;
  line-height: 1.78;
  text-wrap: pretty;
}
.about-card p:last-child{ margin-bottom: 0; }

.about-lead{
  font-size: clamp(1rem, 1.6vw, 1.08rem);
  color: #26263a;
}

.about-card p strong{ color:#1f1533; font-weight:700; }
.about-card p em{ color:#4a3e66; }

/* Focus ring aksesibel */
.about-card a:focus-visible{
  outline: 3px solid rgba(167,6,182,.25);
  outline-offset: 2px;
  border-radius: 6px;
}
/* =====================================================================
   ABOUT — Single Column (Fix Offside Kiri/Kanan)
   Tidak mengubah .box-content
   Brand: #a706b6 / #6b21a8
   ===================================================================== */

/* ===== Container Section (center, tanpa padding samping) ===== */
.about-section{
  max-width: 1100px;
  width: 100%;
  margin: clamp(18px, 3vw, 28px) auto;
  padding-left: 0;            /* penting: jangan dobel padding */
  padding-right: 0;
  box-sizing: border-box;
}

/* ===== Header (judul + subjudul + aksen) ===== */
.about-header{
  text-align: center;
  margin-bottom: clamp(12px, 2.2vw, 18px);
  padding-left: 12px;         /* padding simetris hanya di header */
  padding-right: 12px;
}

.about-title{
  margin: 0;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: .2px;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  background: linear-gradient(90deg, #a706b6, #6b21a8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;         /* gradient text */
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.about-subtitle{
  margin: 8px 0 0;
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
  color: #5a4a77;
}

.about-accent{
  width: 92px; height: 4px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #a706b6, #6b21a8);
  opacity: .95;
}

/* ===== Card (full lebar container, padding internal) ===== */
.about-card{
  background: #fff;
  border: 1px solid #e6e6ec;
  border-radius: 16px;
  padding: clamp(16px, 2.2vw, 22px);
  box-shadow: 0 10px 28px rgba(17,12,34,.06);
  margin-bottom: 20px;

  /* Fix offside: margin simetris + width kompensasi */
  margin-left: 12px;
  margin-right: 12px;
  width: calc(100% - 24px);
  box-sizing: border-box;
}

.about-card p{
  margin: 0 0 12px;
  color: #2f3040;
  line-height: 1.78;
  text-wrap: pretty;
  overflow-wrap: anywhere;     /* jaga kata panjang/link biar nggak melebar */
  word-break: break-word;
}
.about-card p:last-child{ margin-bottom: 0; }

.about-lead{
  font-size: clamp(1rem, 1.6vw, 1.08rem);
  color: #26263a;
}

.about-card p strong{ color:#1f1533; font-weight:700; }
.about-card p em{ color:#4a3e66; }

/* ===== Aksesibilitas ===== */
.about-card a:focus-visible{
  outline: 3px solid rgba(167,6,182,.25);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== Responsive tweaks ===== */
@media (min-width: 1400px){
  .about-section{ max-width: 1200px; }
  .about-card{ padding: clamp(18px, 1.6vw, 26px); }
}

@media (max-width: 768px){
  .about-header{ padding-left: 12px; padding-right: 12px; }
  .about-card{
    margin-left: 10px; margin-right: 10px;
    width: calc(100% - 20px);
    padding: 14px 16px;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(17,12,34,.05);
  }
  .about-title{ font-size: clamp(1.5rem, 4.2vw, 2rem); line-height: 1.14; }
  .about-subtitle{ font-size: clamp(.9rem, 1.8vw, 1rem); }
  .about-accent{ width: 76px; height: 3px; margin-top: 10px; }
  .about-lead{ font-size: clamp(.98rem, 1.7vw, 1.04rem); }
  .about-card p{ line-height: 1.7; margin-bottom: 10px; }
}

@media (max-width: 480px){
  .about-card{
    margin-left: 8px; margin-right: 8px;
    width: calc(100% - 16px);
    padding: 14px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(17,12,34,.05);
  }
  .about-title{ font-size: 1.6rem; }
  .about-subtitle{ font-size: .95rem; }
  .about-accent{ width: 64px; height: 3px; }
  .about-card p{ font-size: .97rem; line-height: 1.68; }
}

/* ===== (Opsional) Debug batas elemen – uncomment saat perlu
.about-section { outline: 1px dashed #f59e0b; }
.about-header  { outline: 1px dashed #3b82f6; }
.about-card    { outline: 1px dashed #22c55e; }
*/
/* =========================================================
   ABOUT — Skills Icons Section
   ========================================================= */
.about-skills{
  max-width: 1100px;
  width: 100%;
  margin: clamp(16px, 3vw, 28px) auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  padding-bottom: 40px;
}

.skills-head{
  text-align: center;
  margin-bottom: 12px;
  padding: 0 12px;
}
.skills-title{
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: .2px;
  color: #221a33;
}
.skills-sub{
  margin: 6px 0 0;
  color: #6a6678;
  font-size: .96rem;
}

/* Grid ikon */
.skills-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0 12px;
}

/* Card ikon-only */
.skill-card{
  appearance: none;
  border: 1px solid #e6e6ec;
  background: #fff;
  border-radius: 16px;
  padding: 24px 14px;
  display: grid;
  place-items: center;
  gap: 8px;
  cursor: default;            /* bukan tombol aksi */
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Ikon besar, warna brand */
.skill-card i{
  font-size: clamp(28px, 4vw, 40px);
  color: #6b21a8;            /* aksen ungu */
}

/* Label kecil (boleh disembunyikan kalau mau full ikon-only) */
.skill-card .skill-label{
  font-size: .92rem;
  color: #3a3552;
  font-weight: 600;
}

/* Hover/Focus */
.skill-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(107,33,168,.15);
  border-color: rgba(107,33,168,.25);
}
.skill-card:focus-visible{
  outline: 3px solid rgba(167,6,182,.25);
  outline-offset: 3px;
}

/* Responsif */
@media (max-width: 960px){
  .skills-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px){
  .skills-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px){
  .skills-grid{ grid-template-columns: 1fr; }
}

/* Opsi: jika benar-benar ingin ikon-only (tanpa teks), uncomment:
.skill-card .skill-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; clip-path: inset(50%); }
*/
/* =========================================================
   CONTACT — BEVOS (tidak mengubah .box-content)
   ========================================================= */
.contact-section{
  max-width: 1100px;
  width: 100%;
  margin: clamp(18px, 3vw, 28px) auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  padding-bottom: 40px;
}

.contact-head{
  text-align: center;
  margin-bottom: 12px;
  padding: 0 12px;
}
.contact-title{
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: .2px;
  color: #221a33;
  background: linear-gradient(90deg, #a706b6, #6b21a8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.contact-accent{
  width: 92px; height: 4px; margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #a706b6, #6b21a8);
  opacity: .95;
}

/* Kartu utama */
.contact-card{
  background: #fff;
  border: 1px solid #e6e6ec;
  border-radius: 16px;
  padding: clamp(16px, 2.2vw, 22px);
  box-shadow: 0 10px 28px rgba(17,12,34,.06);
  margin: 0 12px 16px;
  width: calc(100% - 24px);
  box-sizing: border-box;
}
.contact-name{
  margin: 0 0 8px;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 800;
  color: #2a203f;
  letter-spacing: .2px;
}

/* List info */
.contact-list{
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
  display: grid;
  gap: 8px;
}
.contact-list li{
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
  color: #323246;
}
.contact-list i{ color: #6b21a8; margin-top: 2px; }
.contact-list a{
  color: #6b21a8;
  text-decoration: none;
  border-bottom: 1px dashed rgba(107,33,168,.35);
}
.contact-list a:hover{
  border-bottom-style: solid;
  opacity: .9;
}

/* Aksi */
.contact-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.contact-actions .btn-primary,
.contact-actions .btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}
.contact-actions .btn-primary{
  background: #a706b6; color: #fff;
  box-shadow: 0 6px 16px rgba(167,6,182,.18);
}
.contact-actions .btn-primary:hover{ transform: translateY(-1px); }
.contact-actions .btn-ghost{
  border: 1px solid rgba(107,33,168,.25);
  color: #4a4070; background: #fff;
}
.contact-actions .btn-ghost:hover{ background: rgba(107,33,168,.06); }

/* Quick icons grid */
.contact-quick{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0 12px;
}
.quick-card{
  background: #fff;
  border: 1px solid #e6e6ec;
  border-radius: 16px;
  padding: 18px 12px;
  display: grid;
  place-items: center;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
}
.quick-card i{
  font-size: clamp(24px, 4vw, 34px);
  color: #6b21a8;
}
.quick-card span{
  font-size: .92rem;
  color: #3a3552;
  font-weight: 600;
}
.quick-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(107,33,168,.15);
  border-color: rgba(107,33,168,.25);
}

/* Responsif */
@media (max-width: 960px){
  .contact-quick{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px){
  .contact-quick{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px){
  .contact-quick{ grid-template-columns: 1fr; }
}

/* =========================================================
   Aksesibilitas global (opsional)
   ========================================================= */
.contact-actions .btn-primary:focus-visible,
.contact-actions .btn-ghost:focus-visible,
.contact-list a:focus-visible{
  outline: 3px solid rgba(167,6,182,.25);
  outline-offset: 2px;
  border-radius: 8px;
}

/* =========================================================
   PROGRAM & SERTIFIKASI — BEVOS (FULL-BLEED)
   ========================================================= */
.program-cert{
  /* Full-bleed: benar-benar mentok kiri-kanan layar */
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* Jaga jarak vertikal */
  margin-top: clamp(18px, 3vw, 28px);
  margin-bottom: clamp(18px, 3vw, 28px);

  /* Hilangkan padding samping */
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  padding-bottom: 40px;
}

.pc-head{
  text-align: center;
  margin-bottom: 12px;

  /* Tanpa padding samping agar mentok dinding */
  padding-left: 0;
  padding-right: 0;
}
.pc-title{
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: .2px;
  background: linear-gradient(90deg, #a706b6, #6b21a8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.pc-sub{
  margin: 6px 0 0;
  color: #6a6678;
  font-size: .96rem;
}
.pc-accent{
  width: 92px; height: 4px; margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #a706b6, #6b21a8);
  opacity: .95;
}

/* Grid dua kolom */
.pc-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;

  /* Tanpa padding samping agar full-bleed */
  padding-left: 0;
  padding-right: 0;
}

/* Kolom kiri: daftar */
.pc-left{
  background: #fff;
  border: 1px solid #e6e6ec;
  border-radius: 16px;
  padding: clamp(16px, 2vw, 20px);
  box-shadow: 0 8px 22px rgba(17,12,34,.05);
}

.pc-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.pc-list li{
  /* ubah jadi satu kolom vertikal */
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  justify-items: start;   /* center horizontal */
  text-align: left;      /* teks di tengah */
  gap: 8px;                /* jarak ikon-judul-deskripsi */
  padding: 14px 10px;
}
.pc-list li > i{
  order: 0;                /* ikon tampil duluan (atas) */
  font-size: 32px;         /* boleh dibesarkan sedikit */
  margin: 0;               /* hilangkan margin top sebelumnya */
  line-height: 1;
}

.pc-list li > div{
  order: 1;                /* konten setelah ikon */
}

.pc-list h3{
  margin: 2px 0 4px;
  font-size: 1.06rem;
}

.pc-list p{
  margin: 0;
  line-height: 1.62;
}
.pc-list li:hover{
  background: rgba(107,33,168,.04);
  box-shadow: inset 0 0 0 1px rgba(107,33,168,.15);
}
.pc-list i{
  font-size: 26px;
  color: #6b21a8;
  line-height: 1;
  margin-top: 2px;
}
.pc-list h3{
  margin: 0 0 2px;
  font-size: 1.02rem;
  color: #26263a;
}
.pc-list p{
  margin: 0;
  color: #57576a;
  line-height: 1.62;
}

/* CTA */
.pc-cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pc-cta .btn-primary,
.pc-cta .btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}
.pc-cta .btn-primary{
  background: #a706b6; color: #fff;
  box-shadow: 0 6px 16px rgba(167,6,182,.18);
}
.pc-cta .btn-primary:hover{ transform: translateY(-1px); }
.pc-cta .btn-ghost{
  border: 1px solid rgba(107,33,168,.25);
  color: #4a4070; background: #fff;
}
.pc-cta .btn-ghost:hover{ background: rgba(107,33,168,.06); }

.pc-footnote{
  margin: 10px 2px 0;
  color: #5b5770;
  font-size: .96rem;
}
.pc-footnote a{
  color: #6b21a8;
  text-decoration: none;
  border-bottom: 1px dashed rgba(107,33,168,.35);
}
.pc-footnote a:hover{ border-bottom-style: solid; }

/* Kolom kanan: logo/ilustrasi */
.pc-right{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Kartu logo persegi */
.pc-logo{
  background: #fff;
  border: 1px solid #e6e6ec;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);

  /* Pastikan rasio persegi seragam */
  aspect-ratio: 1 / 1;
  min-height: 0;
}
.pc-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* muat di dalam kotak tanpa distorsi */
}

/* Responsif */
@media (max-width: 960px){
  .pc-grid{ grid-template-columns: 1fr; }
  .pc-right{ order: 2; }
  .pc-left{ order: 1; }
}
@media (max-width: 520px){
  .pc-right{ grid-template-columns: 1fr; }
  .pc-head{ padding: 0 8px; }
  .pc-grid{ gap: 10px; }
}

/* Aksesibilitas (khusus section ini) */
.pc-cta .btn-primary:focus-visible,
.pc-cta .btn-ghost:focus-visible,
.pc-footnote a:focus-visible{
  outline: 3px solid rgba(167,6,182,.25);
  outline-offset: 8px;
  border-radius: 8px;
}
/* ===== Spasi khusus kolom kiri ===== */

/* Desktop & tablet lebar: jarak 40px dari tepi kiri */
@media (min-width: 961px){
  .pc-left{
    margin-left: 40px;   /* jarak dari dinding kiri */
    margin-right: 0;     /* biarkan rapat ke kolom kanan */
  }
}

/* Mobile / single column: jarak kiri–kanan 20px biar tidak nempel */
@media (max-width: 960px){
  .pc-left{
    margin-inline: 20px; /* kiri & kanan 20px */
  }
}

/* ====== Pendaftaran (daftar.php) ====== */

.daftar-section .form-wrap h2 { margin: 0 0 8px; }
.daftar-section .form-wrap .sub { color: #666; margin: 0 0 16px; }

/* Grid rapi: 2 kolom di desktop, 1 kolom di mobile */
.pendaftaran-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.pendaftaran-form .form-row.full { grid-column: 1 / -1; }

@media (max-width: 768px) {
  .pendaftaran-form .form-grid { grid-template-columns: 1fr; }
}

/* Field styles */
.pendaftaran-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pendaftaran-form label span { color: #d33; }

.pendaftaran-form input[type="text"],
.pendaftaran-form input[type="tel"],
.pendaftaran-form select,
.pendaftaran-form textarea,
.pendaftaran-form input[type="file"] {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

/* Focus ring */
.pendaftaran-form input:focus,
.pendaftaran-form select:focus,
.pendaftaran-form textarea:focus {
  outline: none;
  border-color: #6c4ed2;
  box-shadow: 0 0 0 3px rgba(108, 78, 210, .12);
}

/* Textarea */
.pendaftaran-form textarea { resize: vertical; }

/* Hint kecil di bawah input */
.pendaftaran-form .hint {
  font-size: .85rem;
  color: #70707a;
}

/* Actions */
.pendaftaran-form .form-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.pendaftaran-form .btn-primary {
  background: #6c4ed2;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.pendaftaran-form .btn-primary:hover { opacity: .95; }

.pendaftaran-form .btn-ghost {
  background: #f4f4f8;
  border: 1px solid #e6e6ec;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
}

/* Honeypot tetap tersembunyi */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* Padding ekstra khusus section daftar */
.daftar-section {
  padding: clamp(16px, 2.5vw, 28px);
}

@media (min-width: 992px) {
  .daftar-section {
    padding: clamp(20px, 3vw, 36px);
  }
}
/* ===== Notice (Success/Error) – Responsive ===== */
:root{
  --nv-bg:#ffffff; --nv-stroke:#eee; --nv-text:#111; --nv-sub:#6b7280;
  --ok:#10b981; --ok-ink:#064e3b; --err:#ef4444; --err-ink:#7f1d1d;
  --ring:#6c4ed2;
}

.notice-wrap{
  max-width:760px;
  margin:clamp(16px,3vw,28px) auto;
  padding:0 clamp(10px,2.5vw,12px);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

.notice{
  background:var(--nv-bg);
  border:1px solid var(--nv-stroke);
  border-radius:16px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Head */
.notice__head{
  display:flex; align-items:center; gap:10px;
  padding:clamp(12px,2.3vw,16px) clamp(14px,2.4vw,18px);
  border-bottom:1px solid var(--nv-stroke);
}
.notice__icon{font-size:clamp(18px,2.6vw,22px); line-height:1}
.notice__title{
  margin:0; font-weight:700; color:var(--nv-text);
  font-size:clamp(16px,2.4vw,18px);
}

/* Body */
.notice__body{
  padding:clamp(12px,2.3vw,16px) clamp(14px,2.4vw,18px);
  color:var(--nv-text);
  font-size:clamp(14px,2.2vw,16px);
}
.notice__body p{margin:0 0 10px}
.notice__sub{color:var(--nv-sub); font-size:clamp(12px,2vw,14px)}

/* Actions */
.notice__actions{
  display:flex; gap:10px;
  padding:0 clamp(14px,2.4vw,18px) clamp(12px,2.3vw,16px);
  flex-wrap:wrap; /* biar rapi saat sempit */
}
.btn{
  cursor:pointer; border-radius:10px; padding:10px 14px;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:clamp(14px,2.2vw,15px);
  line-height:1.1; white-space:nowrap;
}
.btn:focus{outline:none; box-shadow:0 0 0 3px rgba(108,78,210,.2)}
.btn-primary{background:var(--ring); color:#fff; border:1px solid transparent}
.btn-outline{background:#f9fafb; color:#111; border:1px solid #e5e7eb}

/* Variants */
.notice--success .notice__head{background:linear-gradient(0deg, rgba(16,185,129,.08), rgba(16,185,129,.08))}
.notice--error   .notice__head{background:linear-gradient(0deg, rgba(239,68,68,.08), rgba(239,68,68,.08))}
.notice--success .notice__title{color:var(--ok-ink)}
.notice--error   .notice__title{color:var(--err-ink)}

/* ===== Mobile tweaks ===== */
@media (max-width: 600px){
  .notice__head{gap:8px}
  .notice__actions{gap:8px}
  .btn{width:100%; justify-content:center} /* tombol full width di HP */
}

@media (max-width: 380px){
  .notice-wrap{padding:0 8px}
  .notice{border-radius:14px}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .btn:focus{box-shadow:none}
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark){
  :root{
    --nv-bg:#0b0c10; --nv-stroke:#1f2937; --nv-text:#e5e7eb; --nv-sub:#9ca3af;
  }
  .btn-outline{background:#111827; color:#e5e7eb; border-color:#374151}
}