@font-face {
  font-family: PublicSans;
  src: url("../fonts/PublicSans-Medium.ttf") format("truetype");
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
a,
div,
p,
li {
  /* font-family: "PublicSans", sans-serif !important; */
  font-family:
    "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.text-uppercase {
  text-transform: uppercase;
}

.language-switcher .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #dddddd;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 5px;
}

.language-switcher:hover .dropdown {
  display: block;
}

/* ---- "Layanan" mega-dropdown (Speaker / Program / Sertifikasi) ----
   Same show/hide mechanic as .language-switcher .dropdown (plain
   display:none/block toggle, anchored at top:100%) instead of the base
   .dropdown opacity/top-shift animation — kept consistent with the
   dropdown that's already on the page, just with the new mega-item design. */
.nav-menu .mainmenu ul li .dropdown.dropdown-mega {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: none;
  width: 300px;
  padding: 8px;
  border-radius: 10px;
}

.nav-menu .mainmenu ul li.menu-item-has-mega:hover .dropdown.dropdown-mega {
  display: block;
}

.dropdown-mega li {
  display: block;
  margin: 0;
}

.nav-menu .mainmenu ul li .dropdown-mega li a.mega-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.16s ease;
}

.nav-menu .mainmenu ul li .dropdown-mega li a.mega-item:hover {
  background: #f5f4f2;
}

.mega-item-icon {
  flex-shrink: 0;
  width: 20px;
  margin-top: 3px;
  text-align: center;
  color: #cc0000 !important;
  font-size: 18px;
  line-height: 1;
}

.mega-item-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mega-item-title {
  font-size: 15px;
  font-weight: 700;
  color: #171822;
}

.mega-item-desc {
  font-size: 13px;
  font-weight: 400;
  color: #6b7178;
}

.menu-item-has-mega > a i.fa-angle-down {
  font-size: 12px;
  margin-left: 4px;
}

.language-switcher .dropdown li a {
  padding: 10px 20px;
  display: block;
  color: #171822 !important;
}

.header-section .nav-menu .mainmenu ul li .dropdown li a {
  color: #171822 !important;
}

.language-switcher .dropdown li a:hover {
  background-color: #dddddd;
  color: #f44949 !important;
}

.language-switcher .dropdown li:first-child a:hover {
  border-radius: 5px 5px 0px 0px;
}

.language-switcher .dropdown li:last-child a:hover {
  border-radius: 0px 0px 5px 5px;
}

@keyframes shake {
  0%,
  77% {
    transform: translateX(0);
  }

  /* Stay still for 7 seconds (77% of 9s) */
  79% {
    transform: translateX(-5px);
  }

  81% {
    transform: translateX(5px);
  }

  83% {
    transform: translateX(-5px);
  }

  85% {
    transform: translateX(5px);
  }

  87% {
    transform: translateX(-5px);
  }

  89%,
  100% {
    transform: translateX(0);
  }

  /* Back to still position */
}

/* Layout utilities - avoid inline styles */
#alert-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1051;
}

.header-section .logo img#logo-header {
  width: 210px;
  height: auto;
  display: block;
}

/* Desktop: center logo + nav vertically inside the header.
   The header is a fixed 90px tall. Make .header-section itself the flex centering
   context so .container is vertically centered within those 90px, and keep the
   children at their natural height (no rigid 90px boxes that could overflow the
   header). The base layout floated the logo left / nav right with a -10px margin
   hack — neutralised here so both sit on the same center line. */
@media (min-width: 992px) {
  .header-section {
    display: flex;
    align-items: center;
  }

  /* Empty on desktop (slicknav only fills it on mobile) — keep it out of the
       header flex row so .container stays full width and centered. */
  .header-section #mobile-menu-wrap {
    display: none;
  }

  .header-section .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .header-section .logo {
    float: none;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }

  .header-section .logo a {
    display: flex;
    align-items: center;
    line-height: 0;
  }

  .header-section .logo img#logo-header {
    width: 210px;
    max-width: 210px;
  }

  /* Drop the float + negative margin so the nav centers with the logo. */
  .header-section .nav-menu {
    float: none;
    margin-top: 0;
    display: flex;
    align-items: center;
  }

  /* The nav <ul> carries Bootstrap reboot's default margin-bottom:1rem, which
       made the menu text sit ~8px above the header's center. Reset it so the
       nav box hugs the text and centers vertically with the logo. */
  .header-section .nav-menu .mainmenu ul {
    margin: 0;
    padding: 0;
  }
}

/* Tablet: satu baris rapi (logo + nav) */
@media (max-width: 991px) {
  .header-section {
    height: auto;
    min-height: 64px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .header-section .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    min-height: 64px;
  }

  .header-section .logo {
    float: none;
    padding-top: 12px;
    padding-bottom: 10px;
    flex-shrink: 0;
  }

  .header-section .logo img#logo-header {
    width: 120px;
    max-width: 120px;
    height: auto;
  }

  .header-section .nav-menu {
    float: none;
    margin-top: 0;
  }
}

/* Mobile: sembunyikan menu desktop, tampilkan hamburger (slicknav) */
@media (max-width: 820px) {
  .header-section .nav-menu {
    display: none !important;
  }

  .header-section {
    overflow: visible;
  }

  .header-section .container {
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
  }

  .header-section .logo {
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* inline-block <a> meninggalkan celah baseline di bawah gambar sehingga logo
       terlihat naik dari tengah — jadikan flex agar box memeluk gambar & center. */
  .header-section .logo a {
    display: flex;
    align-items: center;
    line-height: 0;
  }

  .header-section .logo img#logo-header {
    width: 165px;
    max-width: 165px;
    height: auto;
  }

  #mobile-menu-wrap {
    margin-left: auto;
    flex-shrink: 0;
    order: 2;
    position: relative;
    display: flex;
    align-items: center;
  }

  .slicknav_menu {
    padding: 0;
    background: transparent !important;
    position: relative;
  }

  /* Dropdown menu absolute agar header tidak ikut meninggi */
  .slicknav_nav {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 6px !important;
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    z-index: 9999;
  }

  .slicknav_btn {
    margin: 0 !important;
    padding: 10px !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-section.sticky .slicknav_btn,
  .header-section.header-normal .slicknav_btn {
    background: #222 !important;
  }

  .slicknav_btn .slicknav_icon-bar {
    background-color: #fff;
    box-shadow: none !important;
  }

  /* Di mobile: sembunyikan teks "MENU" saja, ikon 3 garis tetap tampil */
  .slicknav_menu .slicknav_menutxt {
    display: none !important;
  }

  .slicknav_menu .slicknav_icon,
  .slicknav_menu .slicknav_icon-bar {
    display: block !important;
  }

  /* Ikon hamburger rata tengah, margin/padding seragam kiri-kanan-atas-bawah */
  .slicknav_btn .slicknav_icon {
    float: none;
    margin: 0 !important;
  }

  /* Tombol Masuk/Login di menu mobile: full width, margin sejajar dengan nama menu */
  .slicknav_nav a.top-btn-login,
  .slicknav_nav a.primary-btn.top-btn-login {
    display: block !important;
    margin: 10px 20px !important;
    width: calc(100% - 40px) !important;
    max-width: none !important;
    box-sizing: border-box;
    text-align: center;
    background: #cc0000 !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
  }

  /* "Layanan" mega-dropdown cloned into slicknav: slicknav sudah menambahkan
     panah togglenya sendiri, jadi panah fa-angle-down kita jadi dobel — sembunyikan.
     Warna teks mega-item juga perlu disesuaikan karena slicknav_nav punya
     background gelap (#222 dari style.css), bukan putih seperti dropdown desktop. */
  .slicknav_nav .menu-item-has-mega > a i.fa-angle-down {
    display: none;
  }

  .slicknav_nav .dropdown-mega {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 0;
  }

  .slicknav_nav .dropdown-mega li a.mega-item {
    padding: 10px 20px;
  }

  .slicknav_nav .mega-item-title {
    color: #fff;
  }

  .slicknav_nav .mega-item-desc {
    color: #b7b9bd;
  }

  .slicknav_nav .dropdown-mega li a.mega-item:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* Mobile kecil: logo tetap cukup besar, centering konsisten */
@media (max-width: 576px) {
  .header-section .logo img#logo-header {
    width: 150px;
    max-width: 150px;
  }

  .header-section .container {
    min-height: 60px;
  }
}

.footer-section .ft-logo .footer-logo img {
  width: 250px;
}

.nav-menu .primary-btn.top-btn.top-btn-login {
  margin-right: 25px;
  background: white !important;
  background-image: none !important;
  color: #000 !important;
  border: 1px solid #bfbfbf !important;
}

/* Satu style button untuk semua screen: primary-btn & site-btn */
.primary-btn:not(.top-btn-login),
.site-btn,
a.primary-btn:not(.top-btn-login),
.btn.primary-btn {
  display: inline-block;
  background: #cc0000 !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px;
  padding: 14px 28px;
  font-size: 1.22rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(204, 0, 0, 0.35);
}

.primary-btn:not(.top-btn-login):hover,
.site-btn:hover,
a.primary-btn:not(.top-btn-login):hover,
.btn.primary-btn:hover {
  background: #a30000 !important;
  background-image: none !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(204, 0, 0, 0.4);
}

.primary-btn:active,
.site-btn:active {
  transform: translateY(0);
}

.contact-section .cs-map iframe {
  border: 0;
}

/* WhatsApp float - no green (neutral style) */
.whatsapp-float {
  position: fixed;
  width: 250px;
  bottom: 0;
  right: 30px;
  color: #fff;
  text-align: center;
  font-size: 30px;
  z-index: 1000;
  animation: shake 12s ease-in-out infinite;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.whatsapp-float:hover {
  /* background: #1f2937; */
  /* box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2); */
  transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.whatsapp-float img {
  width: 100%;
  height: 100%;
}

/* 
.whatsapp-float {
    position: fixed;
    width: 250px;
    bottom: 0;
    right: 30px;
    color: #FFF;
    text-align: center;
    font-size: 30px;
    z-index: 1000;
    animation: shake 12s ease-in-out infinite;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
} */
/* 
.whatsapp-float.show {
    opacity: 1;
    visibility: visible;
} */

.whatsapp-text {
  color: #000;
  font-size: 12pt;
  font-weight: bold;
  position: absolute;
  top: 30%;
  left: 29%;
  width: 110px;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.floating-btn {
  position: fixed;
  bottom: 0px;
  left: 30px;
  background-color: #f76363;
  color: #fff;
  padding: 10px 2em;
  border-radius: 5px 5px 0px 0px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
}

/* Icon styling */
.floating-btn i {
  font-size: 18px;
  margin-right: 5px;
  /* Space between icon and text */
}

.price-item {
  border: 1px solid #dfdfdf;
  border-radius: 10px;
}

.round-image {
  border-radius: 30px;
}

.options-section.set-bg {
  background-color: #ffffff;
}

.opt-box {
  border-top: 1px solid #d3d7d8;
  border-right: 3px solid #d3d7d8;
  border-bottom: 3px solid #d3d7d8;
  border-left: 1px solid #d3d7d8;
  border-radius: 10px;
  padding: 2em;
}

/*---------- SPEAKER PAGE CSS ------------------*/
.filter-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto 3em auto;
}

.filter-item {
  margin-right: 20px;
}

.filter-item label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.filter-item select {
  width: 170px;
}

.filter-item input {
  width: 300px;
  height: 40px;
}

@media only screen and (max-width: 1199px) {
  .filter-container {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    max-width: 100%;
  }

  .filter-item {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .filter-item select,
  .filter-item input {
    width: 100%;
  }

  .filter-buttons {
    justify-content: space-between;
    margin-top: 10px;
  }

  .filter-buttons .btn {
    flex: 1;
    margin-left: 0px !important;
    margin-right: 10px;
    text-align: center;
  }

  .filter-buttons .btn:last-child {
    margin-right: 0;
  }
}

.filter-buttons {
  display: flex;
  align-items: center;
}

.filter-buttons .btn {
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
  font-size: 10pt;
}

.filter-buttons .btn i {
  margin-right: 5px;
}

.filter-buttons .reset-btn {
  background-color: #f76363;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid #9d9d9d !important;
  border-radius: 7px !important;
  padding-left: 10px !important;
  text-align: left !important;
}

.select2-container .select2-selection--single {
  height: 40px !important;
  padding-top: 5px !important;
}

.select2-container .select2-search--inline .select2-search__field {
  margin-bottom: 5px !important;
  height: 20px !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 35px !important;
  width: 35px !important;
  top: 3px !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__clear {
  display: none;
}

input:not([type="file"]) {
  box-sizing: border-box;
  border: 1px solid #9d9d9d;
  border-radius: 5px;
  padding: 8px 15px !important;
}

.filter-container .btn-cari,
.filter-container .btn-reset {
  background-color: #f44336;
  color: #fff;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.si-pic .profession {
  background-color: #fff;
  color: #ff6b6b;
  padding: 0.75em 1.5em;
  border-radius: 2px;
  font-size: 11pt;
  width: 220px;
  text-align: center;
  position: absolute;
  font-weight: bold;
  bottom: 1em;
  margin-left: 1em;
}

.desc-speaker {
  height: 15vh;
  display: block;
  overflow: hidden;
}

.desc-speaker p {
  font-size: 11pt;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

@media (max-width: 768px) {
  .desc-speaker {
    height: 12vh;
    display: block;
    overflow: hidden;
  }

  .desc-speaker p {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

@media (max-width: 480px) {
  .desc-speaker {
    height: 12vh;
    display: block;
    overflow: hidden;
  }

  .desc-speaker p {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

.btn-actions {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  margin-top: 2em;
  width: 90%;
}

.btn-actions .btn {
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  width: 49%;
}

.btn-solid {
  background-color: #f76363;
  color: white;
}

.btn-solid:hover {
  color: white;
}

.btn-line {
  background-color: white;
  border: 1px solid #f76363;
  color: #f76363;
}

.btn-line:hover,
.btn-line:focus {
  color: #f76363;
}

.btn-underline {
  background-color: #fff;
  border: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 2px;
  color: #fc5758;
  border-bottom: 1px solid #fc5758;
}

.btn-underline:hover,
.btn-underline:focus {
  color: #f76363;
}

.loader-data {
  display: none;
  border: 4px solid #f3f3f3;
  /* Light gray */
  border-top: 4px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*---------- END OF SPEAKER PAGE CSS -----------*/

/*---------- SPEAKER PROFILE PAGE CSS ------------------*/
.package-item {
  width: 90%;
}

.package-item p {
  padding-bottom: 0.5em;
  margin-bottom: 0;
}

.package-link {
  position: relative;
  text-decoration: none;
  color: inherit;
  display: flex;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.package-link:hover::before {
  content: "Lihat paket";
  position: absolute;
  right: 1.8em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11pt;
  color: #f76363;
  /* Warna tulisan */
}

.package-link:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23f76363' d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 0.65em;
}

.package-description {
  width: 80%;
  max-height: 9vh;
  text-align: justify;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.separator {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Optional: Adjust gap between text and dot separator */
}

.dot-separator {
  font-size: 4px;
  vertical-align: middle;
  margin: 0 1em;
}

.profile-package-program {
  margin-bottom: 10em;
}

.btn-other-package {
  margin-top: 2em;
  background-color: #faf7f8;
  color: #f76363;
  padding: 0.65em 2.5em;
}

.btn-other-package:hover,
.btn-other-package:active {
  color: #f76363;
}

.btn-other-package i {
  vertical-align: middle;
}

/*---------- END OF SPEAKER PROFILE PAGE CSS -----------*/

table.ui-datepicker-calendar thead tr th span {
  text-transform: capitalize;
}

table.ui-datepicker-calendar tbody tr td a {
  text-align: center;
}

.btn-close {
  border: none;
  background: none;
}

.modal-header {
  padding: 2em 2em 1.5em 2em;
}

.modal-footer {
  padding: 1.5em 2em 1.5em 2em;
}

.modal-body {
  padding: 1em 2em;
}

.modal-body label {
  font-size: 11pt;
}

.modal-body p {
  font-size: 12pt;
  margin-bottom: 0.2em;
}

.option-session {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  height: 3em;
}

.option-session > div {
  padding-right: 0.5em;
  font-size: 11pt;
}

.priority-container {
  display: none;
}

.select2-container--default.select2-container--disabled
  .select2-selection--single {
  background-color: #fafafa !important;
}

.datepicker,
.daterangepicker {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23c4c4c4' d='M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l352 0 0 256c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 1.4em;
  height: 2.8em;
}

.timepicker {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%23aaaaaa' d='M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 1.4em;
  height: 2.8em;
}

i.fa.fa-map-marker {
  font-size: 13pt;
  padding-left: 1.5px;
}

.display-zero {
  display: none;
}

.btn-copy {
  background-color: #efefef;
  border: 1px solid #d1d1d1;
  padding: 2px 6px;
  font-size: 10pt;
}

.preview-container-poster {
  position: relative;
  /*width: 300px; /* Atur ukuran sesuai kebutuhan */
  /*height: 400px; /* Atur ukuran sesuai kebutuhan */
  background-color: #f0f0f0;
  /* Warna abu-abu */
  /*border: 1px dashed #ccc; /* Opsional: Tambahkan border untuk tampilan */
  display: flex;
  justify-content: center;
  align-items: center;
}

#previewImagePoster {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  /* Agar sesuai ukuran kotak */
  height: 100%;
  /* Agar sesuai ukuran kotak */
  object-fit: contain;
  /* Untuk mengisi kotak dengan proporsi gambar */
  display: none;
}

.placeholder-text {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #888;
  padding: 0 1em;
  text-align: center;
}

#overlay {
  position: fixed;
  top: 0;
  z-index: 1052;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.cv-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cv-spinner p {
  font-size: 12pt;
  color: #fff;
  margin-top: 0.5em;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #f76363 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dots {
  0% {
    content: "";
  }

  33% {
    content: ".";
  }

  66% {
    content: "..";
  }

  100% {
    content: "...";
  }
}

.cv-spinner p::after {
  content: "";
  animation: dots 3s steps(3, end) infinite;
}

.hidden {
  display: none;
}

/* Section Wrapper */
.search-section {
  background-color: #ffffff;
  padding: 40px 0;
  /* lebih sempit kiri-kanannya */
  display: flex;
  justify-content: center;
}

/* Container Box */
.search-section-container {
  background: linear-gradient(120deg, #ee8425, #f9488b);
  border-radius: 30px;
  padding: 35px 30px;
  width: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

/* Heading Text */
.search-section-container h3 {
  flex: 1;
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
}

/* Search Box */
.search-box {
  flex: 2;
  display: flex;
  align-items: center;
  /* gap: 15px; */
  width: 100%;
}

.search-box input {
  flex: 1;
  padding: 14px 20px;
  border-radius: 50px;
  border: none;
  outline: none;
  font-size: 1.2rem;
  min-width: 0;
  transition: all 0.3s ease;
}

.search-box input:focus {
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.95);
}

.search-box button {
  padding: 14px 30px;
  background: white;
  border: none;
  border-radius: 50px;
  font-size: 1.22rem;
  font-weight: bold;
  color: #f9488b;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.search-box button:hover {
  background: #fff;
  color: #ee8425;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.home-search {
  padding: 100px;
  height: 60px;
}

.home-search input {
  font-size: 18px;
  /* Perbesar teks input */
}

/* Untuk memperbesar placeholder */
.home-search input::placeholder {
  font-size: 18px;
  /* Perbesar teks placeholder */
}

.primary-btn.search-font {
  font-size: 18px;
  /* Sesuaikan dengan ukuran yang diinginkan */
}

input#keyword::placeholder {
  text-align: center;
}

button.primary-btn-new {
  background: #aa0100;
  color: white;
}

/* Tablet */
@media (max-width: 820px) {
  .search-section-container {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
    margin-top: -25%;
    margin-left: 5%;
    margin-right: 5%;
  }

  .search-section-container h3 {
    font-size: 1.6rem;
  }

  .search-box {
    flex-direction: column;
    align-items: center;
    /* center isi form */
    width: auto;
    /* jangan full width */
  }

  .search-box input,
  .search-box button {
  }

  .whatsapp-float {
    width: 200px;
    /* Adjust width for smaller screens */
    right: 20px;
    /* Adjust positioning for smaller screens */
  }

  .whatsapp-text {
    font-size: 10pt;
    /* Smaller text size for mobile */
    top: 30%;
    left: 29%;
  }

  .floating-btn {
    padding: 10px;
    font-size: 14px;
  }

  button.primary-btn-new {
    background: #aa0100;
    color: white;
    width: 100%;
    margin-top: 10px;
  }

  input#keyword::placeholder {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .search-section-container {
    padding: 20px;
    margin-top: -25%;
    margin-left: 5%;
    margin-right: 5%;
  }

  .search-section-container h3 {
    font-size: 1.4rem;
    text-align: center;
  }

  .search-box {
    flex-direction: column;
    align-items: center;
    width: auto;
    /* Pastikan tidak penuh */
  }

  .search-box input,
  .search-box button {
    width: auto;
    /* Kunci: jangan 100%, biar bisa di-center */
    max-width: 280px;
    /* Supaya proporsional */
  }

  .whatsapp-float {
    width: 200px;
    /* Smaller width for very small screens */
    right: 20px;
  }

  .whatsapp-text {
    font-size: 9pt;
    /* Further reduce text size for very small screens */
    top: 31%;
    left: 29%;
  }

  .floating-btn {
    padding: 10px;
    font-size: 14px;
  }

  button.primary-btn-new {
    background: #aa0100;
    color: white;
    width: 100%;
    margin-top: 10px;
    height: 60px;
    /* tinggi sama dengan input */
  }

  input#keyword {
    text-align: center;
    /* height: 60px;              tinggi sama dengan input */
  }
}