/* ==========================================================================
   1. Gutenberg & Global Elements
   ========================================================================== */
hr.wp-block-separator {
  margin: 40px 0 50px 0;
  border: none;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   2. Title Area
   ========================================================================== */
.title-area {
  background: linear-gradient(to right, #034dad, #2b6ed1);
  color: #fff;
}

.title-area-inner {
  margin: 80px 0;
  overflow: hidden;
}

.title-body {
  float: left;
  width: 50%;
  height: auto;
}

.title-body h1 {
  margin: 0 0 30px 0;
  padding: 0;
  color: #fff;
  font-size: 32px; 
  font-weight: 100;
  line-height: 1;
  text-transform: uppercase;
}

.title-body h3 {
  margin-bottom: -5px;
  padding: 0;
  color: #f8a608;
  font-size: 43px; 
  font-weight: 300;
  line-height: 1;
}

.title-body h3 span {
  color: #fff;
  font-weight: 700;
}

.title-excerpt {
  overflow: hidden;
  padding: 0;
}

.title-excerpt p {
  float: left;
  margin: 0;
  width: 90%;
  font-style: italic;
  line-height: 1.4;
}

.title-excerpt .fa-check-circle {
  float: left;
  margin: 3px 15px 3px 0;
  color: #fff;
  text-align: center;
  font-size: 30px;
}

.title-image {
  float: right;
  width: 40%;
  height: auto;
}

.title-image img {
  border: 1px solid #fff;
  border-radius: 10px;
  width: 99.5%;
  height: auto;
}

/* ==========================================================================
   3. Content Area
   ========================================================================== */
.content-area {
  overflow: hidden;
}

.content-body {
  margin: 20px 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 #ddd;
  padding: 40px;
}

.content-body h2 {
  color: #333;
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  text-transform: uppercase;
}

.content-body p {
  margin: 5px 0 15px 0;
  padding: 0;
}

.content-body a {
	font-weight: 500;
}

.content-body-related {
  overflow: hidden;
  width: 100%;
}

.content-body-related-left {
  float: left;
  width: 32%;
}

.content-body-related-right {
  float: right;
  width: 64%;
}

.content-body-related-right h2 {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.4;
  text-transform: capitalize;
}

.content-body-related-right img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   4. CSS Carousel via Modern CSS Scroll Snap (Fixed Navigation)
   ========================================================================== */
.program-featured {
  clear: both;
  margin: 20px 0;
  padding: 3px;
  position: relative;
}

.slider-program-snap {
  display: flex;
  gap: 15px; 
  overflow-x: auto !important; 
  overflow-y: hidden;
  scroll-snap-type: x mandatory; 
  scroll-behavior: smooth;
  scrollbar-width: none; 
  -webkit-overflow-scrolling: touch;
  padding-top: 10px;    
  padding-bottom: 10px; 
}

.slider-program-snap::-webkit-scrollbar {
  display: none; 
}

.slider-program-snap .program-featured-shellbox {
  flex: 0 0 calc(25% - 12px); 
  margin: 0; 
  scroll-snap-align: start; 
  border-radius: 5px;
  background: transparent; 
  overflow: visible !important; 
  box-shadow: none !important; 
}

/* Style Kartu Bawaan */
.featured-box { 
  position: relative; 
  overflow: hidden; 
  background: #fff;        
  border-radius: 5px;     
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15); 
  margin: 5px;            
}

.featured-box a:hover { text-decoration: none; }
.featured-box-thumb { position: relative; width: 100%; height: auto; }
.featured-box-thumb img { display: block; border-radius: 5px 5px 0 0; width: 100%; }
.featured-box-text { padding: 10px 15px; min-height: 130px; overflow: hidden; }
.featured-box-text-sup { padding: 0 0 10px 0; overflow: hidden; }
.featured-box-text-sup p { color: #000; font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0; padding: 0; }
.featured-box-text-sub { border-top: 1px solid #ddd; padding: 10px 0 0 0; color: #666; overflow: hidden; }
.featured-box-text-sub p { color: #000; font-size: 12px; font-weight: 300; line-height: 1.6; margin: 0; padding: 0; }

/* Custom Rounded Chevron Buttons */
.snap-nav-btn {
  position: absolute;
  top: 45%; /* Disesuaikan sedikit naik agar sejajar tepat di tengah thumbnail gambar, bukan di teks bawah */
  transform: translateY(-50%);
  z-index: 99; 
  background: transparent !important;
  border: none !important;
  width: 44px;
  height: 44px;
  cursor: pointer;
  outline: none;
  padding: 0;
  transition: pointer-events 0.2s;
}

.snap-prev { left: -25px; }
.snap-next { right: -40px; }

.snap-nav-btn:before {
  content: '';
  display: block;
  width: 24px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.5;
  transition: opacity 0.15s ease-in-out;
  filter: drop-shadow(0px 0px 2px #ffffff) drop-shadow(0px 0px 4px #ffffff); 
}

.snap-prev:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2L7 12l10 10'/%3E%3C/svg%3E");
}

.snap-next:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2l10 10-10 10'/%3E%3C/svg%3E");
}

.snap-nav-btn:not(.disabled):hover:before { opacity: 1 !important; }
.snap-nav-btn:not(.disabled):active:before { opacity: 0.7 !important; }
.snap-nav-btn.disabled { pointer-events: none; }
.snap-nav-btn.disabled:before { opacity: 0.1 !important; }

/* ==========================================================================
   5. Media Queries (Responsive Layout & Grid System)
   ========================================================================== */

/* Max-width 1280px */
@media screen and (max-width: 1280px) {
  .title-area-inner { margin: 80px 5%; }
}

/* Max-width 1024px (3 Kolom) */
@media screen and (max-width: 1024px) {
  .slider-program-snap .program-featured-shellbox {
    flex: 0 0 calc(33.333% - 10px); 
  }
  /* PENYESUAIAN: Perlebar padding pembungkus menjadi 50px agar chevron bergeser mutlak keluar dari area kartu */
  .program-featured { 
    margin: 10px 0; 
    padding: 3px 50px; 
  }
  /* Geser posisi tombol ke ujung luar area padding baru */
  .snap-prev { left: 5px; }
  .snap-next { right: 5px; }
  .snap-nav-btn:before { opacity: 0.6; } 

  .title-body h1 { margin: 0 0 20px 0; font-size: 24px; }
  .title-body h3 { font-size: 37px; }
  .title-excerpt p { width: 85%; font-size: 15px; }
}

/* Max-width 781px (2 Kolom) */
@media screen and (max-width: 781px) {
  .slider-program-snap {
    padding-left: 0px; 
    padding-right: 0px;
    gap: 12px; 
  }
  .slider-program-snap .program-featured-shellbox {
    flex: 0 0 calc(50% - 6px); 
  }
  /* PENYESUAIAN: Berikan padding 45px kanan-kiri agar area geser mengecil sedikit, memberi ruang bebas untuk tombol */
  .program-featured { 
    margin: 10px 0; 
    padding: 3px 45px; 
  }
  /* Lempar posisi tombol ke area luar agar tidak bertumpuk */
  .snap-prev { left: 0px; }
  .snap-next { right: 0px; }

  hr.wp-block-separator { margin: 20px 0 30px 0; }
  .title-area-inner { margin: 40px 5%; }
  .title-body { float: none; width: 100%; padding: 0 0 20px 0; }
  .title-body h1 { font-size: 21px; }
  .title-body h3 { font-size: 32px; }
  .title-image { display: none; }
  .breadcrumbs-bar { padding: 15px; }
  .content-body { margin: 20px 0; border-radius: 0; box-shadow: none; padding: 15px; }
  .content-body-related-left { margin: 0 0 20px 0; width: 100%; }
  .content-body-related-right { width: 100%; }
}

/* Max-width 480px (1 Kolom Penuh) */
@media screen and (max-width: 480px) { 
	.content-body h2 {
		font-size: 18px;
	}
  /* PENYESUAIAN: Perlebar ruang tepi luar di HP menjadi 40px */
  .program-featured { 
    padding: 3px 40px; 
    margin: 10px 0;
  }
  .slider-program-snap {
    gap: 0px; 
  }
  .slider-program-snap .program-featured-shellbox {
    flex: 0 0 100% !important; 
    width: 100% !important;
    max-width: 100% !important;
  }
  .slider-program-snap .program-featured-shellbox .featured-box {
    margin-right: 0; 
  }
  /* Dorong tombol menjauh ke batas terluar layar agar tidak memotong isi kartu tunggal */
  .snap-prev { left: 0px; }
  .snap-next { right: 0px; }
  .featured-box-text { min-height: auto; }
}