.elementor-kit-14{--e-global-color-primary:#005B41;--e-global-color-secondary:#C7A35B;--e-global-color-text:#7A7A7A;--e-global-color-accent:#FFFFFF;--e-global-color-kadence1:#2B6CB0;--e-global-color-kadence2:#215387;--e-global-color-kadence3:#1A202C;--e-global-color-kadence4:#2D3748;--e-global-color-kadence5:#4A5568;--e-global-color-kadence6:#718096;--e-global-color-kadence7:#EDF2F7;--e-global-color-kadence8:#F7FAFC;--e-global-color-kadence9:#ffffff;--e-global-color-5990784:#C7A35B;--e-global-color-1ad5554:#005B41;--e-global-color-919d5d6:#C7A35B;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-09bcf52-font-family:"Poppins";--e-global-typography-09bcf52-font-weight:400;color:#444444;}.elementor-kit-14 e-page-transition{background-color:#FFBC7D;}.elementor-kit-14 h1{color:#1A1A1A;}.elementor-kit-14 h2{color:#777777;}.elementor-kit-14 h3{color:#C7A35B;}.elementor-kit-14 h4{color:#005B41;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-14{--e-global-typography-primary-font-size:22px;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:-0.2px;--e-global-typography-secondary-font-size:18px;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-size:14px;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-size:16px;--e-global-typography-accent-letter-spacing:0.3px;--e-global-typography-09bcf52-font-size:12px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:720px;}.e-con{--container-max-width:720px;}}/* Start custom CSS *//* Desktop horizontal scrollbar for program rail */
@media (min-width: 1024px) {
  .program-rail {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px; /* ruang buat scrollbar */
  }

  .program-rail::-webkit-scrollbar {
    height: 8px;
  }

  .program-rail::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 8px;
  }

  .program-rail::-webkit-scrollbar-thumb {
    background: #c9a24d; /* gold wakaf */
    border-radius: 8px;
  }

  .program-rail::-webkit-scrollbar-thumb:hover {
    background: #b08c3c;
  }
}

@media (min-width: 1024px) {
  .program-rail {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );
  }
}



/* ===== Hybrid Mode: Desktop center smartphone layout ===== */

/* 1. Batasi lebar konten utama di desktop */
@media (min-width: 768px) {
    body,
    .site,
    #page,
    .elementor-page {
        max-width: 480px !important;   /* Layout HP dalam desktop */
        margin: 0 auto !important;     /* Center */
        background: #4444 !important;
        position: relative;
        box-shadow: 0 0 30px rgba(0,0,0,0.10); /* biar lebih mirip aplikasi */
        border-radius: 12px;           /* opsional, boleh dihapus */
    }

    /* 2. Background desktop full lebar */
    html {
        background: #4444 !important;
    }
}

/* 3. Mobile tetap normal */
@media (max-width: 767px) {
    html, body {
        max-width: 100% !important;
        margin: 0 !important;
        background: #fff !important;
    }
}




/* horizontal rail */
.program-rail {
  display: flex;
  flex-wrap: nowrap;            /* penting: no wrap */
  gap: 5px;
  overflow-x: auto;             /* enable horizontal scroll */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  scroll-snap-type: x mandatory; /* optional: snap */
  padding: 10px 5px;
}

/* card sizing inside rail */
.program-rail .program-card {
  flex: 0 0 50%;                /* mobile: card lebar 75% dari container */
  scroll-snap-align: start;     /* optional: snap target */
  box-sizing: border-box;
}

/* hide scrollbar (opsional) */
.program-rail::-webkit-scrollbar { height: 8px; }
.program-rail::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 6px; }


/* Card Pop Hover Effect */
.card-pop {
  transition: 
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card-pop:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 
    0 20px 40px rgba(0,0,0,0.15);
}

/* === QUICK BOTTOM BAR === */
.quick-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 9999;
  background: #ffffff;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
  border-radius: 16px 16px 0 0;
  padding: 8px 6px;
}

.quick-bottom-bar .active {
  color: #d4a44f;
  font-weight: 600;
}

.quick-bottom-bar a:active {
  transform: scale(0.95);
}


body {
  padding-bottom: 90px;
}/* End custom CSS */