.elementor-641 .elementor-element.elementor-element-1d86d56{--display:flex;}.elementor-641 .elementor-element.elementor-element-271ebaf{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-641 .elementor-element.elementor-element-91a8e98{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-641 .elementor-element.elementor-element-b2caf6f{--display:flex;}.elementor-641 .elementor-element.elementor-element-ae1e6b0{--display:flex;}/* Start custom CSS for html, class: .elementor-element-271ebaf *//* FORCE FULL WIDTH UNTUK KELUAR DARI CONTAINER */
.fullwidth-force {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

/* Carousel styling kamu */
.custom-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-track {
    display: flex;
    width: 100%;
    transition: transform 0.6s ease;
}

.carousel-slide {
    min-width: 100vw; /* PENTING agar slide mengikuti layar */
}

.carousel-slide img {
    width: 100vw;
    height: 60vh; /* atau 70vh jika ingin lebih tinggi */
    object-fit: cover;
    display: block;
}


/* ============================================
   FIX TANPA GAP — MOBILE ONLY
   ============================================ */
@media (max-width: 768px) {

    /* 1. Header tetap sticky */
    .mh-wrap {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99999 !important;
    }

    /* 2. Hapus semua padding & margin atas di Elementor (biang putih) */
    body,
    html,
    #page,
    .site,
    .site-content,
    .elementor,
    .elementor-section,
    .elementor-top-section,
    .elementor-widget-wrap,
    .elementor-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 3. Carousel turun sesuai tinggi header (70px = rata-rata header kamu) */
    .custom-carousel,
    .fullwidth-force,
    .elementor-section:first-of-type,
    .elementor-top-section:first-of-type {
        margin-top: 68px !important; /* UBAH JIKA HEADER LEBIH TINGGI */
    }

    /* 4. Hapus gap bawah carousel */
    .custom-carousel,
    .carousel-track,
    .carousel-slide,
    .carousel-slide img {
        margin-bottom: -4px !important;
        padding-bottom: 0 !important;
    }

    /* 5. Pastikan tidak ada overflow cropping */
    .custom-carousel,
    .fullwidth-force,
    .carousel-track {
        overflow: visible !important;
    }

    /* 6. Buang padding bawaan Elementor container */
    .elementor-column,
    .elementor-widget,
    .elementor-widget-container {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ============================================================
   FIX DESKTOP & TABLET (mobile tidak disentuh)
   Berlaku untuk layar > 768px
   ============================================================ */
@media (min-width: 769px) {

    /* 1. Menghapus padding & margin bawah yang bikin ada ruang putih */
    .custom-carousel,
    .carousel-track,
    .carousel-slide,
    .carousel-slide img,
    .fullwidth-force {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 2. Pastikan tinggi slide otomatis mengikuti gambar tanpa gap */
    .carousel-slide {
        min-height: auto !important;
        height: auto !important;
    }

    /* 3. Pastikan gambar mengisi slide sepenuhnya */
    .carousel-slide img {
        width: 100vw !important;
        height: auto !important;
        display: block;
        object-fit: cover;
    }

    /* 4. Pastikan container fullwidth benar-benar keluar dari wrapper */
    .fullwidth-force {
        width: 100vw !important;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        overflow: hidden !important;
    }

    /* 5. Hilangkan white-space / gap pada parent Elementor */
    .elementor-section,
    .elementor-top-section,
    .elementor-container,
    .elementor-widget-wrap {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 6. Fix untuk container Elementor yang masih memberi padding bawah */
    .elementor-column,
    .elementor-widget,
    .elementor-widget-container {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ==== PANAH HANYA MUNCUL DI DESKTOP ==== */

/* Default: arrow disembunyikan */
.carousel-arrow {
    display: none !important;
}

/* Tampilkan panah di desktop (>= 769px) */
@media (min-width: 769px) {
    .carousel-arrow {
        display: block !important;
    }
}

/* Sembunyikan panah di mobile (< 769px) */
@media (max-width: 768px) {
    .carousel-arrow {
        display: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a61b45c *//* ---------- Wrapper umum (hilangkan gap di bawah tombol) ---------- */
.annc-wrapper{
  background: #000;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; /* inner + buttons */
  padding: 0;             /* penting: hilangkan padding bawah */
  margin: 0;
  font-family: Arial, sans-serif;
}

/* ---------- inner: speaker + marquee ---------- */
.annc-inner{
  display: flex;
  align-items: center;   /* vertical center */
  gap: 8px;              /* jarak aman icon <-> marquee */
  padding: 6px 10px;     /* kontrol tinggi area announcement */
  height: 34px;          /* pastikan lebih kecil dari tombol */
  box-sizing: border-box;
  overflow: hidden;
}

/* speaker icon: fixed size, tidak menutupi teks */
.speaker-icon{
  flex: 0 0 24px; /* lebar tetap */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

/* marquee container: ambil sisa lebar, sembunyikan overflow */
.marquee{
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0; /* penting agar teks tidak melebihi flex */
}

/* marquee-track: dua salinan teks untuk efek continuous */
.marquee-track{
  display: inline-flex;
  align-items: center;
  gap: 60px; /* jarak antar ulangan teks (atur jika perlu) */
  white-space: nowrap;
  /* animasi akan menggeser keseluruhan track ke kiri setengah lebar track */
  animation: marquee-scroll 30s linear infinite;
  will-change: transform;
}

/* teks styling */
.marquee-track .m-text{
  display: inline-block;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  color: #fff;
}

/* keyframes: dari 0 => -50% (karena ada 2 salinan identik) */
@keyframes marquee-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- BUTTONS (mobile only) tanpa gap dan tanpa black strip ---------- */
.annc-buttons{
  display: none; /* default hidden, tampil di mobile */
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

/* tombol full 50% tanpa gap: gunakan flex-basis dan no margin */
.annc-buttons a{
  width: 50%;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 12px 0;
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  border-radius: 0;
  line-height: 1;
}

/* Masuk - kiri */
.btn-masuk{
  background: linear-gradient(to bottom, #bfbfbf, #6e6e6e);
  color: #fff;
  float: left;
}

/* Daftar - kanan (gold gradient) */
.btn-daftar{
  background: linear-gradient(to bottom, #F7EF8A, #D2AC47);
  color: #fff;
  float: right;
}

/* Hover vertical gradients */
.btn-masuk:hover{
  background: linear-gradient(to bottom, #dadada, #5a5a5a);
}
.btn-daftar:hover{
  background: linear-gradient(to bottom, #fff9c4, #b98a2b);
}

/* ---------- RESPONSIVE BEHAVIOR ---------- */

/* Desktop & tablet: hide buttons (only announcement visible) */
@media (min-width: 769px){
  .annc-buttons{ display: none; }
  .annc-inner{ height: 34px; }
}

/* Mobile: show buttons, place directly under announcement without gap */
@media (max-width: 768px){
  .annc-buttons{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
  }

  /* remove any default gap between the two halves:
     we place them side-by-side and allow them to touch */
  .btn-masuk, .btn-daftar{
    width: 50%;
  }

  /* Jika Anda ingin tombol menempel tanpa border line,
     pastikan body/parent tidak menambahkan border or box-shadow */
}

/* OPTIONAL: lebih lambat/cepatan berbeda di mobile (jika mau) */
/* @media (max-width: 420px){
  .marquee-track{ animation-duration: 40s; }
} */
/* ==== Masuk: tetap glow emas ==== */
.btn-masuk {
    color: #fff !important;
    text-shadow:
        0 0 4px #F7EF8A,
        0 0 7px #F7EF8A,
        0 0 10px #D2AC47;
}

/* ==== Daftar: glow abu metalik tipis ==== */
.btn-daftar {
    color: #fff !important;
    text-shadow:
        0 0 2px #cfd3d4,
        0 0 4px #b5b8ba,
        0 0 6px #8e8f90;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2e8b01e */.chok555-section {
  width: 100%;
  padding: 80px 20px;
  background: #1a1a1a;
  display: flex;
  justify-content: center;
}

.chok555-container {
  max-width: 1200px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

.chok555-text {
  flex: 1 1 45%;
  color: #fff;
}

.chok555-text h1 {
  font-size: 60px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #f2b544;
}

.chok555-text h2 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 20px;
}

.chok555-text p {
  font-size: 18px;
  line-height: 1.6;
  color: #ddd;
}

.chok555-image {
  flex: 1 1 45%;
  text-align: center;
}

.chok555-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

/* Responsive */
@media (max-width: 768px) {
  .chok555-text h1 {
    font-size: 42px;
  }
}

.chok555-text {
  padding-top: -20px;
}/* End custom CSS */