/* Auto-extracted dari Elementor HTML widget. Sumber kebenaran = file ini. */

/* ===== (style) ===== */
:root { --topbar-fg: #ffffff; --topbar-accent: #ffffff; }
/* Topbar TRANSPARAN by default; teks PUTIH semua (tanpa aksen oren/merah). */
#masthead { position: fixed !important; top: 0; left: 0; right: 0; z-index: 9999; width: 100%; background: transparent !important; transition: background .3s ease, box-shadow .3s ease, padding .3s ease; }
#masthead.is-scrolled { background: rgba(15,15,15,0.85) !important; backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); box-shadow: 0 2px 18px rgba(0,0,0,0.25); }
#masthead .elementor-section { background: transparent !important; }
/* Logo: drop-shadow tipis biar tetap kontras kalau hero terang */
#masthead img { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); transition: filter .25s ease; }
#masthead.is-scrolled img { filter: none; }
/* Nav links — semua warna PUTIH; hover/aktif tetap putih tapi 100% opacity (default sedikit dimmed) */
#masthead .elementor-nav-menu a,
#masthead .elementor-nav-menu a:link,
#masthead .elementor-nav-menu a:visited { color: var(--topbar-fg) !important; font-weight: 500; text-shadow: 0 1px 4px rgba(0,0,0,0.35); opacity: 0.88; transition: opacity .2s ease; }
#masthead.is-scrolled .elementor-nav-menu a { text-shadow: none; }
#masthead .elementor-nav-menu .current-menu-item > a,
#masthead .elementor-nav-menu .current_page_item > a,
#masthead .elementor-nav-menu a:hover { color: var(--topbar-fg) !important; opacity: 1 !important; }
/* Submenu (desktop dropdown) — aksen putih, tanpa merah */
#masthead .elementor-nav-menu .sub-menu,
#masthead .elementor-nav-menu ul.sub-menu { background: #000 !important; border-top: 2px solid rgba(255,255,255,0.85); min-width: 220px; padding: 6px 0 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
#masthead .elementor-nav-menu .sub-menu a { padding: 12px 20px !important; background: #000 !important; color: #ffffff !important; text-shadow: none !important; font-size: 14px !important; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.06); opacity: 1; }
#masthead .elementor-nav-menu .sub-menu li:last-child a { border-bottom: 0; }
#masthead .elementor-nav-menu .sub-menu a:hover { background: rgba(255,255,255,0.10) !important; color: #ffffff !important; opacity: 1; padding-left: 26px !important; }
/* Tombol RESERVE — outline putih (tanpa fill merah) */
#masthead .elementor-button { background: transparent !important; color: #ffffff !important; border: 1.5px solid rgba(255,255,255,0.7) !important; letter-spacing: 2px; transition: background .2s ease, border-color .2s ease; }
#masthead .elementor-button:hover { background: rgba(255,255,255,0.12) !important; border-color: #ffffff !important; color: #ffffff !important; }
/* Underline pointer Elementor — paksa putih. Pakai :before saja (Elementor underline) supaya
 * tidak konflik dengan caret/indikator dropdown yang kita tambahkan via span terpisah. */
#masthead .elementor-nav-menu .elementor-item:before,
#masthead .elementor-nav-menu li.menu-item > a:before { background-color: #ffffff !important; }
/* Caret panah untuk parent dropdown — pakai sibling <span> (bukan :after link) supaya
 * tidak konflik dengan underline pointer Elementor (yang biasanya pakai :after). */
#masthead .elementor-nav-menu .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 6px; }
#masthead .elementor-nav-menu .menu-item-has-children > a > .stellar-caret { display: inline-block; font-size: 9px; line-height: 1; opacity: 0.75; transition: transform .25s ease; }
#masthead .elementor-nav-menu .menu-item-has-children:hover > a > .stellar-caret { transform: rotate(180deg); }
body { padding-top: 0 !important; }
/* Logo & navbar sejajar di tengah vertikal. Widget HTML (CSS/JS) di kolom logo
 * tidak boleh menambah margin -> kalau tidak, logo terdorong ~20px ke bawah. */
#masthead .elementor-container, #masthead .elementor-row { align-items: center !important; }
#masthead .elementor-widget-html { margin: 0 !important; line-height: 0; }
#masthead .elementor-widget-image { margin: 0 !important; }

/* ============ MOBILE (<=1024px) ============ */
@media (max-width: 1024px) {
  #masthead { padding: 6px 0 !important; }
  #masthead img { max-height: 50px !important; width: auto !important; }
  /* Hamburger toggle */
  #masthead .elementor-menu-toggle { color: #ffffff !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.4) !important; border-radius: 4px !important; padding: 8px 12px !important; font-size: 22px !important; }
  #masthead.is-scrolled .elementor-menu-toggle { border-color: rgba(255,255,255,0.25) !important; background: rgba(255,255,255,0.05) !important; }
  /* Dropdown panel (mobile) */
  #masthead .elementor-nav-menu--dropdown { background: rgba(12,12,12,0.97) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; max-height: calc(100vh - 80px); overflow-y: auto; padding: 8px 0 !important; border-top: 2px solid rgba(255,255,255,0.85); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
  #masthead .elementor-nav-menu--dropdown a { color: #ffffff !important; background: transparent !important; padding: 14px 22px !important; text-shadow: none !important; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 15px !important; opacity: 0.9; }
  #masthead .elementor-nav-menu--dropdown li:last-child > a { border-bottom: 0; }
  #masthead .elementor-nav-menu--dropdown a:hover,
  #masthead .elementor-nav-menu--dropdown .current-menu-item > a { color: #ffffff !important; background: rgba(255,255,255,0.08) !important; opacity: 1; }
  /* Submenu (children) di mobile: indent + bg gelap sedikit */
  #masthead .elementor-nav-menu--dropdown .sub-menu a { padding-left: 44px !important; background: rgba(0,0,0,0.35) !important; font-size: 13px !important; }
  /* Sembunyikan tombol RESERVE besar di mobile (judulnya cukup di menu) */
  #masthead .stellar-reserve-col { display: none !important; }
}
@media (max-width: 600px) {
  #masthead img { max-height: 42px !important; }
}

/* ===== #stellar-nav-theme ===== */
@media (min-width:1025px){#masthead .elementor-container,#masthead .elementor-row{position:relative !important;min-height:72px !important;display:block !important;padding-left:clamp(32px,4vw,80px) !important;padding-right:clamp(32px,4vw,80px) !important;}#masthead .elementor-container > .elementor-column:first-child{position:absolute !important;left:clamp(32px,4vw,80px) !important;top:0 !important;bottom:0 !important;right:auto !important;height:100% !important;display:flex !important;align-items:center !important;justify-content:flex-start !important;transform:none !important;width:auto !important;max-width:none !important;flex:0 0 auto !important;z-index:2 !important;}#masthead .elementor-container > .elementor-column:not(:first-child),#masthead .elementor-container > .elementor-column:last-child{position:absolute !important;left:calc(50% + 15px) !important;top:0 !important;bottom:0 !important;right:auto !important;height:100% !important;transform:translateX(-50%) translateY(-6px) !important;display:flex !important;align-items:center !important;justify-content:center !important;width:auto !important;max-width:calc(100vw - clamp(32px,4vw,80px)*2 - 240px) !important;flex:0 0 auto !important;z-index:1 !important;text-align:center !important;}#masthead .elementor-container > .elementor-column:not(:first-child) .elementor-widget,#masthead .elementor-container > .elementor-column:not(:first-child) .elementor-widget-container,#masthead .elementor-container > .elementor-column:not(:first-child) .elementor-widget-navigation-menu,#masthead .elementor-container > .elementor-column:not(:first-child) .elementor-widget-navigation-menu .elementor-widget-container,#masthead .elementor-container > .elementor-column:not(:first-child) .elementor-widget-wrap,#masthead .elementor-container > .elementor-column:not(:first-child) .elementor-element-populated{width:auto !important;max-width:none !important;padding:0 !important;margin:0 !important;display:block !important;}#masthead .hfe-nav-menu-layout,#masthead .hfe-nav-menu__layout-horizontal{display:inline-flex !important;justify-content:center !important;text-align:center !important;flex-wrap:nowrap !important;}#masthead ul.hfe-nav-menu{display:inline-flex !important;justify-content:center !important;align-items:center !important;margin:0 !important;flex-wrap:nowrap !important;white-space:nowrap !important;}#masthead ul.hfe-nav-menu>li{flex-shrink:0 !important;white-space:nowrap !important;}#masthead .hfe-menu-item,#masthead ul.hfe-nav-menu li a,#masthead .elementor-item{white-space:nowrap !important;}}@media (max-width:1024px){#masthead .elementor-container,#masthead .elementor-row{position:relative !important;min-height:0 !important;display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center !important;justify-content:space-between !important;}#masthead .elementor-container > .elementor-column,#masthead .elementor-container > .elementor-column:first-child,#masthead .elementor-container > .elementor-column:not(:first-child),#masthead .elementor-container > .elementor-column:last-child{position:static !important;transform:none !important;top:auto !important;left:auto !important;right:auto !important;}#masthead .elementor-container > .elementor-column:first-child{flex:0 0 auto !important;width:auto !important;max-width:none !important;}#masthead .elementor-container > .elementor-column:last-child,#masthead .elementor-container > .elementor-column:not(:first-child){flex:1 1 auto !important;width:auto !important;max-width:none !important;text-align:right !important;}#masthead .hfe-nav-menu.hfe-nav-menu-layout{display:flex !important;justify-content:flex-end !important;align-items:center !important;background:transparent !important;width:100% !important;}#masthead .hfe-nav-menu__toggle{margin-left:auto !important;margin-right:0 !important;display:inline-flex !important;align-self:flex-end !important;}#masthead .elementor-widget-navigation-menu,#masthead .elementor-widget-navigation-menu .elementor-widget-container{text-align:right !important;display:flex !important;justify-content:flex-end !important;}#masthead nav.hfe-nav-menu__layout-horizontal,#masthead nav.hfe-dropdown,#masthead .elementor-nav-menu--dropdown{position:absolute !important;top:100% !important;left:0 !important;right:0 !important;width:100vw !important;max-width:100vw !important;margin:0 !important;z-index:9998 !important;background:#000 !important;}}#masthead .hfe-nav-menu .sub-menu,#masthead .hfe-nav-menu ul.sub-menu,#masthead .hfe-nav-menu-layout .sub-menu,#masthead .hfe-nav-menu-layout ul.sub-menu,#masthead nav .sub-menu,#masthead nav ul.sub-menu,#masthead .elementor-nav-menu .sub-menu,#masthead .elementor-nav-menu ul.sub-menu,#masthead .elementor-nav-menu--dropdown .sub-menu{background:#000 !important;background-color:#000 !important;border:0 !important;border-top:0 !important;border-bottom:0 !important;outline:0 !important;box-shadow:none !important;}#masthead .hfe-nav-menu .sub-menu a,#masthead .hfe-nav-menu .sub-menu li>a,#masthead .hfe-nav-menu-layout .sub-menu a,#masthead .elementor-nav-menu .sub-menu a,#masthead .elementor-nav-menu .sub-menu li>a,#masthead .elementor-nav-menu--dropdown .sub-menu a{background:#000 !important;background-color:#000 !important;color:#ffffff !important;border:0 !important;border-top:0 !important;border-bottom:0 !important;font-family:inherit !important;text-transform:none !important;letter-spacing:normal !important;font-size:inherit !important;font-weight:500 !important;}#masthead .hfe-nav-menu .sub-menu a:hover,#masthead .elementor-nav-menu .sub-menu a:hover{background:#1a1a1a !important;color:#ffffff !important;}#masthead .hfe-nav-menu li a,#masthead .hfe-nav-menu .hfe-menu-item,#masthead .hfe-nav-menu .hfe-sub-menu-item,#masthead ul.hfe-nav-menu li,#masthead ul.hfe-nav-menu li a,#masthead .hfe-nav-menu .sub-menu,#masthead .hfe-nav-menu .sub-menu a,#masthead nav.hfe-nav-menu__layout-horizontal a,#masthead .hfe-dropdown a,#masthead .elementor-nav-menu li a,#masthead .elementor-nav-menu .elementor-item,#masthead .elementor-nav-menu .sub-menu,#masthead .elementor-nav-menu .sub-menu a,#masthead .elementor-nav-menu--dropdown a{font-family:'Bebas Neue',sans-serif !important;letter-spacing:3px !important;text-transform:uppercase !important;font-weight:400 !important;font-size:17px !important;}@media (min-width:1025px){#masthead .hfe-nav-menu li a,#masthead .hfe-nav-menu .hfe-menu-item,#masthead ul.hfe-nav-menu li,#masthead ul.hfe-nav-menu li a,#masthead .elementor-nav-menu li a,#masthead .elementor-nav-menu .elementor-item{font-size:20px !important;letter-spacing:3px !important;}#masthead .hfe-nav-menu .sub-menu a,#masthead .elementor-nav-menu .sub-menu a{font-size:16px !important;letter-spacing:2px !important;}}@media (max-width:1024px){#masthead ul.hfe-nav-menu li a,#masthead .hfe-menu-item,#masthead .hfe-sub-menu-item,#masthead .elementor-nav-menu--dropdown a,#masthead .hfe-dropdown a{font-size:16px !important;letter-spacing:2px !important;}}#masthead .hfe-menu-toggle,#masthead .hfe-menu-toggle i,#masthead .hfe-menu-toggle:before,#masthead .hfe-menu-toggle:after,#masthead .sub-arrow,#masthead .sub-arrow i,#masthead .sub-arrow:before,#masthead .sub-arrow:after,#masthead .stellar-caret,#masthead .menu-item-has-children > a .fa,#masthead .menu-item-has-children > a i{color:#ffffff !important;fill:#ffffff !important;background:transparent !important;}#masthead .hfe-nav-menu .menu-item:not(.current-menu-item) > a:before,#masthead .hfe-nav-menu .menu-item:not(.current-menu-item) > a:after,#masthead .hfe-nav-menu .menu-item:not(.current-menu-item) > div > a:before,#masthead .hfe-nav-menu .menu-item:not(.current-menu-item) > div > a:after,#masthead .elementor-nav-menu .menu-item:not(.current-menu-item) > a:before,#masthead .elementor-nav-menu .menu-item:not(.current-menu-item) > a:after{transform:scaleX(0) !important;}#masthead .hfe-nav-menu .menu-item.current-menu-item > a:before,#masthead .hfe-nav-menu .menu-item.current-menu-item > a:after,#masthead .hfe-nav-menu .menu-item.current-menu-item > div > a:before,#masthead .hfe-nav-menu .menu-item.current-menu-item > div > a:after,#masthead .elementor-nav-menu .menu-item.current-menu-item > a:before{transform:scaleX(1) !important;}#masthead .elementor-container,#masthead .elementor-row{align-items:center !important;}#masthead .elementor-column,#masthead .elementor-column-wrap,#masthead .elementor-widget-wrap{display:flex !important;flex-direction:column;justify-content:center !important;}#masthead .elementor-widget,#masthead .elementor-widget-image,#masthead .elementor-widget-navigation-menu{display:flex !important;align-items:center !important;}body[class] #masthead .hfe-menu-item,body[class] #masthead .hfe-menu-item:link,body[class] #masthead .hfe-menu-item:visited,body[class] #masthead .hfe-menu-item:hover,body[class] #masthead .hfe-menu-item:focus,body[class] #masthead .hfe-menu-item:active,body[class] #masthead .hfe-sub-menu-item,body[class] #masthead .hfe-sub-menu-item:hover,body[class] #masthead .hfe-sub-menu-item:focus,body[class] #masthead .elementor-item,body[class] #masthead .elementor-item:link,body[class] #masthead .elementor-item:visited,body[class] #masthead .elementor-item:hover,body[class] #masthead .elementor-item:focus,body[class] #masthead .elementor-item.elementor-item-active,body[class] #masthead .hfe-nav-menu li a,body[class] #masthead .hfe-nav-menu li a:hover,body[class] #masthead .hfe-nav-menu li a:focus,body[class] #masthead .current-menu-item>a,body[class] #masthead .current-menu-item .hfe-menu-item,body[class] #masthead .current_page_item>a,body[class] #masthead .current_page_item .hfe-menu-item,body[class] #masthead .current-menu-ancestor>a,body[class] #masthead .current-menu-ancestor .hfe-menu-item{color:#ffffff !important;}#masthead{--e-global-color-accent:#C8232C !important;}body[class] #masthead .elementor-widget-navigation-menu .hfe-nav-menu-layout .menu-item.parent a.hfe-menu-item:before,body[class] #masthead .elementor-widget-navigation-menu .hfe-nav-menu-layout .menu-item.parent a.hfe-menu-item:after,body[class] #masthead .hfe-nav-menu-layout .hfe-menu-item:before,body[class] #masthead .hfe-nav-menu-layout .hfe-menu-item:after,body[class] #masthead .hfe-nav-menu-layout .menu-item a:before,body[class] #masthead .hfe-nav-menu-layout .menu-item a:after,body[class] #masthead .elementor-widget-nav-menu .elementor-item:before,body[class] #masthead .elementor-widget-nav-menu .elementor-item:after,body[class] #masthead .elementor-nav-menu .elementor-item:before,body[class] #masthead .elementor-nav-menu .elementor-item:after,body[class] #masthead .elementor-nav-menu .elementor-item-active:before,body[class] #masthead .elementor-nav-menu .elementor-item-active:after,body[class] #masthead .elementor-nav-menu .elementor-item:hover:before,body[class] #masthead .elementor-nav-menu .elementor-item:hover:after{background-color:#C8232C !important;background-image:none !important;border-color:#C8232C !important;}

/* ===== #stellar-mobile-menu-fix ===== */
:root{--stellar-side:clamp(20px,6vw,32px);}@media (max-width:1024px){#masthead .hfe-nav-menu-icon,#masthead .hfe-mobile-menu{display:none !important;}#masthead .elementor-menu-toggle svg{display:none !important;}#masthead .hfe-nav-menu__toggle,#masthead .elementor-menu-toggle{position:relative;display:inline-block !important;width:30px !important;height:24px !important;cursor:pointer;background:transparent !important;border:0 !important;padding:0 !important;}#masthead .hfe-nav-menu__toggle .stellar-bar,#masthead .elementor-menu-toggle .stellar-bar{position:absolute;left:0;right:0;height:3px;background:#ffffff !important;border-radius:2px;transition:transform .3s ease,opacity .3s ease,top .3s ease,bottom .3s ease;}#masthead .hfe-nav-menu__toggle .stellar-bar.t,#masthead .elementor-menu-toggle .stellar-bar.t{top:3px;}#masthead .hfe-nav-menu__toggle .stellar-bar.m,#masthead .elementor-menu-toggle .stellar-bar.m{top:50%;transform:translateY(-50%);}#masthead .hfe-nav-menu__toggle .stellar-bar.b,#masthead .elementor-menu-toggle .stellar-bar.b{bottom:3px;}#masthead .hfe-nav-menu__toggle[aria-expanded="true"] .stellar-bar,#masthead .hfe-nav-menu__toggle.hfe-active-menu .stellar-bar,#masthead .elementor-menu-toggle.elementor-active .stellar-bar{background:#ffffff !important;background-color:#ffffff !important;}#masthead .hfe-nav-menu__toggle[aria-expanded="true"] .stellar-bar.t,#masthead .hfe-nav-menu__toggle.hfe-active-menu .stellar-bar.t,#masthead .elementor-menu-toggle.elementor-active .stellar-bar.t{top:50% !important;transform:translateY(-50%) rotate(45deg) !important;background:#ffffff !important;}#masthead .hfe-nav-menu__toggle[aria-expanded="true"] .stellar-bar.m,#masthead .hfe-nav-menu__toggle.hfe-active-menu .stellar-bar.m,#masthead .elementor-menu-toggle.elementor-active .stellar-bar.m{opacity:0 !important;}#masthead .hfe-nav-menu__toggle[aria-expanded="true"] .stellar-bar.b,#masthead .hfe-nav-menu__toggle.hfe-active-menu .stellar-bar.b,#masthead .elementor-menu-toggle.elementor-active .stellar-bar.b{bottom:50% !important;transform:translateY(50%) rotate(-45deg) !important;background:#ffffff !important;}#masthead .hfe-nav-menu.hfe-nav-menu-layout,#masthead .hfe-nav-menu.hfe-layout-horizontal{background:transparent !important;background-color:transparent !important;}#masthead ul.hfe-nav-menu,#masthead ul.hfe-nav-menu li,#masthead ul.hfe-nav-menu li a,#masthead ul.hfe-nav-menu .hfe-menu-item,#masthead ul.hfe-nav-menu .hfe-sub-menu-item,#masthead ul.hfe-nav-menu .sub-menu,#masthead ul.hfe-nav-menu .sub-menu li,#masthead ul.hfe-nav-menu .sub-menu a,#masthead .hfe-dropdown a,#masthead .hfe-dropdown li>a,#masthead .elementor-nav-menu--dropdown a,#masthead .elementor-nav-menu--dropdown li>a,#masthead .elementor-nav-menu--dropdown .sub-menu a{background:transparent !important;background-color:transparent !important;color:#ffffff !important;text-shadow:none !important;opacity:1 !important;}#masthead ul.hfe-nav-menu,#masthead nav.hfe-nav-menu__layout-horizontal ul,#masthead .elementor-nav-menu--dropdown ul{padding-left:0 !important;margin-left:0 !important;list-style:none !important;}#masthead ul.hfe-nav-menu>li>a,#masthead ul.hfe-nav-menu>li>.hfe-has-submenu-container>a,#masthead .elementor-nav-menu--dropdown>li>a,#masthead .hfe-dropdown>ul>li>a{display:block !important;padding:16px var(--stellar-side) !important;padding-left:var(--stellar-side) !important;padding-right:var(--stellar-side) !important;}#masthead ul.hfe-nav-menu>li>.hfe-has-submenu-container{display:block !important;width:100% !important;padding:0 !important;}#masthead ul.hfe-nav-menu .sub-menu a,#masthead .elementor-nav-menu--dropdown .sub-menu a{display:block !important;padding:14px var(--stellar-side) !important;padding-left:var(--stellar-side) !important;padding-right:var(--stellar-side) !important;font-size:18px !important;letter-spacing:2px !important;text-align:right !important;opacity:0.92 !important;}#masthead ul.hfe-nav-menu .sub-menu,#masthead .elementor-nav-menu--dropdown .sub-menu{background:rgba(0,0,0,0.25) !important;background-color:rgba(0,0,0,0.25) !important;}#masthead ul.hfe-nav-menu>li,#masthead .elementor-nav-menu--dropdown li{border-bottom:1px solid rgba(255,255,255,0.18) !important;}#masthead ul.hfe-nav-menu>li:last-child,#masthead .elementor-nav-menu--dropdown li:last-child{border-bottom:0 !important;}#masthead ul.hfe-nav-menu .sub-menu li,#masthead .elementor-nav-menu--dropdown .sub-menu li,#masthead nav .sub-menu li,#masthead .hfe-dropdown .sub-menu li{border-bottom:0 !important;border-top:0 !important;}#masthead ul.hfe-nav-menu .sub-menu a,#masthead .elementor-nav-menu--dropdown .sub-menu a,#masthead nav .sub-menu a{margin-right:16px !important;}#masthead ul.hfe-nav-menu li a:hover,#masthead .hfe-dropdown a:hover,#masthead .elementor-nav-menu--dropdown a:hover,#masthead .elementor-nav-menu--dropdown .current-menu-item>a{background:rgba(255,255,255,0.10) !important;color:#ffffff !important;}#masthead .hfe-dropdown,#masthead nav.hfe-dropdown,#masthead nav.hfe-nav-menu__layout-horizontal,#masthead .elementor-nav-menu--dropdown,#masthead nav.elementor-nav-menu--dropdown,#masthead .elementor-nav-menu__container.elementor-nav-menu--dropdown{position:fixed !important;top:var(--stellar-topbar-h, 72px) !important;left:0 !important;right:0 !important;width:100vw !important;max-width:100vw !important;margin:0 !important;z-index:9998 !important;background:rgba(15,15,15,0.85) !important;background-color:rgba(15,15,15,0.85) !important;-webkit-backdrop-filter:blur(12px) saturate(180%) !important;backdrop-filter:blur(12px) saturate(180%) !important;max-height:calc(100vh - var(--stellar-topbar-h, 72px)) !important;overflow-y:auto !important;box-shadow:0 12px 30px rgba(0,0,0,0.5) !important;border-top:1px solid rgba(255,255,255,0.08) !important;}body.stellar-menu-open #masthead{background:rgba(15,15,15,0.85) !important;-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);box-shadow:0 2px 18px rgba(0,0,0,0.25);}#masthead .hfe-has-submenu-container>a{display:flex !important;align-items:center !important;justify-content:flex-start !important;width:100% !important;box-sizing:border-box !important;flex-wrap:nowrap !important;}#masthead .hfe-has-submenu-container>a>.hfe-menu-toggle,#masthead .hfe-has-submenu-container>a>.sub-arrow{display:inline-flex !important;align-items:center !important;justify-content:center !important;margin-left:auto !important;margin-right:0 !important;margin-top:0 !important;margin-bottom:0 !important;position:static !important;right:auto !important;top:auto !important;transform:none !important;width:28px !important;height:28px !important;flex:0 0 auto !important;line-height:1 !important;background:transparent !important;border:0 !important;padding:0 !important;}#masthead .hfe-has-submenu-container>a>.hfe-menu-toggle>i,#masthead .hfe-has-submenu-container>a>.sub-arrow>i{display:none !important;}#masthead .hfe-has-submenu-container>a>.hfe-menu-toggle:before,#masthead .hfe-has-submenu-container>a>.sub-arrow:before{display:none !important;content:none !important;}#masthead .hfe-has-submenu-container>a>.hfe-menu-toggle:after,#masthead .hfe-has-submenu-container>a>.sub-arrow:after{content:'\25BE' !important;display:block !important;font-size:26px !important;line-height:1 !important;color:#ffffff !important;font-weight:bold !important;margin:0 !important;opacity:1 !important;transition:transform .25s ease !important;transform:none !important;}#masthead .hfe-has-submenu-container[aria-expanded="true"]>a>.hfe-menu-toggle:after,#masthead li.menu-item-has-children.stellar-sub-open>.hfe-has-submenu-container>a>.hfe-menu-toggle:after{transform:rotate(180deg) !important;}}@media (min-width:1025px){#masthead .hfe-nav-menu .hfe-menu-toggle,#masthead .hfe-nav-menu .sub-arrow,#masthead nav.hfe-nav-menu__layout-horizontal .hfe-nav-menu .sub-arrow{display:inline-flex !important;align-items:center !important;justify-content:center !important;margin:0 0 0 8px !important;padding:0 !important;line-height:1 !important;vertical-align:middle !important;background:transparent !important;border:0 !important;width:auto !important;height:auto !important;}#masthead .hfe-nav-menu .hfe-menu-toggle:after,#masthead .hfe-nav-menu .sub-arrow:after{content:'\25BE' !important;display:block !important;font-size:18px !important;line-height:1 !important;margin:0 !important;color:#ffffff !important;font-weight:bold !important;opacity:1 !important;transition:transform .25s ease !important;}}

/* ===== #stellar-chevron-fix ===== */
html.stellar-nav-init #masthead nav.hfe-nav-menu__layout-horizontal .hfe-menu-item:before,html.stellar-nav-init #masthead nav.hfe-nav-menu__layout-horizontal .hfe-menu-item:after,html.stellar-nav-init #masthead nav.hfe-nav-menu__layout-horizontal .hfe-sub-menu-item:before,html.stellar-nav-init #masthead nav.hfe-nav-menu__layout-horizontal .hfe-sub-menu-item:after,html.stellar-nav-init #masthead nav.hfe-nav-menu__layout-horizontal a.hfe-menu-item:before,html.stellar-nav-init #masthead nav.hfe-nav-menu__layout-horizontal a.hfe-menu-item:after,html.stellar-nav-init #masthead nav.hfe-nav-menu__layout-horizontal a.hfe-sub-menu-item:before,html.stellar-nav-init #masthead nav.hfe-nav-menu__layout-horizontal a.hfe-sub-menu-item:after,html.stellar-nav-init #masthead nav.hfe-nav-menu__layout-horizontal li.current-menu-item>a:before,html.stellar-nav-init #masthead nav.hfe-nav-menu__layout-horizontal li.current-menu-item>a:after,html.stellar-nav-init #masthead nav.hfe-nav-menu__layout-horizontal li.current-menu-item>.hfe-has-submenu-container>a:before,html.stellar-nav-init #masthead nav.hfe-nav-menu__layout-horizontal li.current-menu-item>.hfe-has-submenu-container>a:after,html.stellar-nav-init body[class] #masthead .hfe-nav-menu-layout .hfe-menu-item:before,html.stellar-nav-init body[class] #masthead .hfe-nav-menu-layout .hfe-menu-item:after,html.stellar-nav-init body[class] #masthead .hfe-nav-menu-layout .menu-item a:before,html.stellar-nav-init body[class] #masthead .hfe-nav-menu-layout .menu-item a:after,html.stellar-nav-init body[class] #masthead .hfe-nav-menu .menu-item.current-menu-item>a:before,html.stellar-nav-init body[class] #masthead .hfe-nav-menu .menu-item.current-menu-item>a:after,html.stellar-nav-init body[class] #masthead .hfe-nav-menu .menu-item.current-menu-item>.hfe-has-submenu-container>a:before,html.stellar-nav-init body[class] #masthead .hfe-nav-menu .menu-item.current-menu-item>.hfe-has-submenu-container>a:after,html.stellar-nav-init body[class] #masthead .elementor-nav-menu .menu-item:before,html.stellar-nav-init body[class] #masthead .elementor-nav-menu .menu-item:after,html.stellar-nav-init body[class] #masthead .elementor-nav-menu .menu-item a:before,html.stellar-nav-init body[class] #masthead .elementor-nav-menu .menu-item a:after{display:none !important;content:none !important;background:transparent !important;background-color:transparent !important;background-image:none !important;border:0 !important;transform:scaleX(0) !important;opacity:0 !important;visibility:hidden !important;width:0 !important;height:0 !important;}#masthead .hfe-menu-toggle i.fa,#masthead .sub-arrow i.fa{display:none !important;}#masthead .menu-item-has-children > .hfe-has-submenu-container .hfe-menu-toggle:after,#masthead .menu-item-has-children > .hfe-has-submenu-container .sub-arrow:after,#masthead .menu-item-has-children > a .hfe-menu-toggle:after,#masthead .menu-item-has-children > a .sub-arrow:after,#masthead .hfe-menu-item + .hfe-menu-toggle:after{content:'\25BE' !important;display:inline-block;margin-left:2px;font-size:22px;line-height:1;color:#ffffff !important;opacity:1;transition:transform .25s ease,opacity .2s ease;vertical-align:middle;font-weight:bold;}#masthead .hfe-has-submenu-container[aria-expanded="true"] .hfe-menu-toggle:after,#masthead .menu-item-has-children.stellar-sub-open > .hfe-has-submenu-container .hfe-menu-toggle:after,#masthead .menu-item-has-children.is-open > .hfe-has-submenu-container .hfe-menu-toggle:after{transform:rotate(180deg) !important;opacity:1 !important;}@media (hover:hover) and (pointer:fine){#masthead .menu-item-has-children:hover > .hfe-has-submenu-container .hfe-menu-toggle:after{transform:rotate(180deg) !important;opacity:1 !important;}}#masthead .hfe-menu-toggle,#masthead .sub-arrow{color:#ffffff !important;}

/* ===== #stellar-hub-navbar-right ===== */
@media (min-width:1025px) and (max-width:1500px){#masthead .elementor-container > .elementor-column:not(:first-child),#masthead .elementor-container > .elementor-column:last-child{left:auto !important;right:clamp(32px,4vw,80px) !important;transform:translateY(-6px) !important;justify-content:flex-end !important;text-align:right !important;}#masthead .hfe-nav-menu-layout,#masthead .hfe-nav-menu__layout-horizontal{justify-content:flex-end !important;text-align:right !important;}#masthead ul.hfe-nav-menu{justify-content:flex-end !important;}}

/* ===================================================================
 * production-1.1 — Canva redesign (Stellar Hub)
 * Di-APPEND, bukan mengganti: blok di atas menyimpan banyak perbaikan
 * struktur HFE, hamburger, dan chevron yang masih dipakai. Yang di bawah
 * hanya menimpa tampilannya. Cascade order yang menang.
 * Spec: docs/superpowers/specs/2026-08-01-hub-canva-redesign-design.md
 * =================================================================== */

/* --- Tipografi nav: Bebas Neue -> Poppins --- */
body[class] #masthead .hfe-nav-menu li a,
body[class] #masthead .hfe-nav-menu .hfe-menu-item,
body[class] #masthead .hfe-nav-menu .hfe-sub-menu-item,
body[class] #masthead ul.hfe-nav-menu li,
body[class] #masthead ul.hfe-nav-menu li a,
body[class] #masthead .hfe-nav-menu .sub-menu a,
body[class] #masthead nav.hfe-nav-menu__layout-horizontal a,
body[class] #masthead .hfe-dropdown a,
body[class] #masthead .elementor-nav-menu li a,
body[class] #masthead .elementor-nav-menu .elementor-item,
body[class] #masthead .elementor-nav-menu--dropdown a {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: clamp(15px, 1.9vw, 26px) !important;   /* 26px @1366 */
}
@media (min-width: 1025px) {
  body[class] #masthead .hfe-nav-menu li a,
  body[class] #masthead .hfe-nav-menu .hfe-menu-item,
  body[class] #masthead ul.hfe-nav-menu li,
  body[class] #masthead ul.hfe-nav-menu li a,
  body[class] #masthead .elementor-nav-menu li a,
  body[class] #masthead .elementor-nav-menu .elementor-item {
    font-size: clamp(15px, 1.9vw, 26px) !important;
    letter-spacing: 0.5px !important;
  }
}
@media (max-width: 1024px) {
  body[class] #masthead ul.hfe-nav-menu li a,
  body[class] #masthead .hfe-menu-item,
  body[class] #masthead .elementor-nav-menu--dropdown a,
  body[class] #masthead .hfe-dropdown a {
    font-size: 17px !important;
    letter-spacing: 0.5px !important;
  }
}

/* --- Aksen merah 1.0 dibuang total: 1.1 tidak punya warna aksen --- */
#masthead { --e-global-color-accent: #ffffff !important; }
body[class] #masthead .elementor-widget-navigation-menu .hfe-nav-menu-layout .menu-item.parent a.hfe-menu-item:before,
body[class] #masthead .elementor-widget-navigation-menu .hfe-nav-menu-layout .menu-item.parent a.hfe-menu-item:after,
body[class] #masthead .hfe-nav-menu-layout .hfe-menu-item:before,
body[class] #masthead .hfe-nav-menu-layout .hfe-menu-item:after,
body[class] #masthead .hfe-nav-menu-layout .menu-item a:before,
body[class] #masthead .hfe-nav-menu-layout .menu-item a:after,
body[class] #masthead .elementor-nav-menu .elementor-item:before,
body[class] #masthead .elementor-nav-menu .elementor-item:after {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
}

/* --- Bar solid hitam (1.0 pakai glass blur) --- */
#masthead,
#masthead.is-scrolled {
  background: #000 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  min-height: var(--hub-nav-h, 95px);
}
#masthead .elementor-container,
#masthead .elementor-row { min-height: var(--hub-nav-h, 95px) !important; }
#masthead img { filter: none !important; }

/* --- Item aktif: glow putih mengikuti scroll-spy (stellar-hub.js) --- */
body[class] #masthead a.hub-nav-active,
body[class] #masthead a.hub-nav-active .hfe-menu-item,
body[class] #masthead .hub-nav-active > a {
  color: #fff !important;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.85), 0 0 6px rgba(255, 255, 255, 0.6) !important;
  opacity: 1 !important;
}

/* --- Nav tersembunyi selama hero, muncul setelah hero terlewat ---
 * Hanya di front page: halaman Hub lain tetap punya header dari awal. */
body.home #masthead {
  transform: translateY(-100%);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
body.home.hub-nav-shown #masthead { transform: translateY(0); }

/* Menu mobile terbuka wajib menang atas hide-on-hero, kalau tidak panelnya
 * ikut tergeser ke luar layar. */
body.home.stellar-menu-open #masthead { transform: translateY(0) !important; }

@media (prefers-reduced-motion: reduce) {
  body.home #masthead { transition: none; }
}

/* --- Menu rata kanan ke margin konten (desain: item terakhir berakhir di
 * x=1283 dari 1366, sejajar margin kiri logo). Blok 1.0 memusatkan menu di
 * layar >1500px, jadi di monitor lebar ada celah besar di kanan. --- */
@media (min-width: 1025px) {
  #masthead .elementor-container > .elementor-column:not(:first-child),
  #masthead .elementor-container > .elementor-column:last-child {
    left: auto !important;
    right: clamp(24px, 5.7vw, 80px) !important;
    /* Kolom ini flex-direction:column. `justify-content` di sini mengatur
     * sumbu VERTIKAL, bukan horizontal — dulu disetel flex-end dengan maksud
     * merapatkan menu ke kanan, hasilnya menu terdorong ke BAWAH dan tidak
     * sejajar logo. Perataan kanan yang benar lewat align-items. */
    align-items: flex-end !important;
    justify-content: center !important;
    text-align: right !important;
    max-width: calc(100vw - 2 * clamp(24px, 5.7vw, 80px) - 260px) !important;
  }
  #masthead .hfe-nav-menu-layout,
  #masthead .hfe-nav-menu__layout-horizontal,
  #masthead ul.hfe-nav-menu {
    justify-content: flex-end !important;
    text-align: right !important;
  }
  /* Jarak antar item: desain ±48px. */
  #masthead ul.hfe-nav-menu > li + li { margin-left: clamp(16px, 3.3vw, 48px) !important; }
}

/* --- Logo sejajar dengan menu (2026-08-03) ---
 *
 * Terukur sebelum perbaikan: pusat vertikal logo 50,1px, pusat menu 80,7px —
 * meleset 30,6px. Di Home.svg keduanya selisih 1px, praktis sejajar.
 *
 * Penyebabnya: kolom Elementor itu `flex-direction: column`, jadi
 * `align-items: center` (baris 41) cuma memusatkan HORIZONTAL. Yang mengatur
 * sumbu vertikal pada flex-column adalah `justify-content`, dan itu tidak
 * pernah disetel — masing-masing widget-wrap jatuh di atas dengan tinggi
 * berbeda (68px vs 73px).
 *
 * Sekaligus membuang padding vertikal section: bar jadi 127px padahal
 * container-nya sudah 95px, sesuai desain. */
@media (min-width: 1025px) {
  #masthead .elementor-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #masthead .elementor-container {
    min-height: var(--hub-nav-h, 95px);
  }
  /* Selector-nya SENGAJA disamakan persis dengan blok #stellar-nav-theme
   * (baris 68) yang memakai `:first-child` / `:not(:first-child)`. Selector
   * yang lebih pendek kalah spesifisitas dari sana dan tidak akan pernah
   * berlaku — sudah dicoba dan terbukti diabaikan. Sama spesifisitas + dimuat
   * belakangan = menang. */
  #masthead .elementor-container > .elementor-column:first-child,
  #masthead .elementor-container > .elementor-column:not(:first-child),
  #masthead .elementor-container > .elementor-column:last-child {
    justify-content: center !important;
  }
  #masthead .elementor-column > .elementor-widget-wrap {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Nudge -2px dipakai saat kolom belum terpusat; sekarang justru menggeser. */
  #masthead .elementor-container > .elementor-column:not(:first-child),
  #masthead .elementor-container > .elementor-column:last-child {
    transform: none !important;
  }

  /* `.hfe-nav-menu` itu inline-flex, jadi ia duduk di GARIS-DASAR teks
   * induknya yang line-height-nya 24px. Akibatnya tersisa 17px kosong di atas
   * menu dan seluruh menu jatuh ~9px di bawah pusat logo. Induknya dijadikan
   * flex supaya posisinya ditentukan align-items, bukan baseline.
   *
   * Selector-nya harus MENYAMAI rantai panjang di baris 68
   * (`:not(:first-child) .elementor-widget-container`, spesifisitas 1,4,0)
   * yang memaksa display:block !important. Selector pendek kalah dan
   * diabaikan. */
  #masthead .elementor-container > .elementor-column:not(:first-child) .elementor-widget,
  #masthead .elementor-container > .elementor-column:not(:first-child) .elementor-widget-container,
  #masthead .elementor-container > .elementor-column:not(:first-child) .elementor-widget-navigation-menu,
  #masthead .elementor-container > .elementor-column:not(:first-child) .elementor-widget-navigation-menu .elementor-widget-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
}

/* --- ABOUT nempel logo di bawah 1400px (2026-08-04) ---
 *
 * Terukur SEBELUM perbaikan (jarak tepi-kanan logo -> tepi-kiri menu):
 *   1500px = 168px | 1440 = 113 | 1400 = 80 | 1366 = 55 | 1280 = 26
 *   1200px = -0,5  | 1100 = -34 | 1025 = -58   <- menu menindih logo
 *
 * Penyebabnya BUKAN font saja. Lebar menu itu 23,84em teks + 10x padding-a +
 * 4x jarak-antar-item, dan dua suku terakhir hampir tidak menyusut:
 * padding `<a>` dari Elementor tetap 15px di semua lebar, dan jarak antar item
 * `clamp(16px,3.3vw,48px)` masih 34px di 1025px. Sementara ruang yang tersedia
 * (100vw - 2x margin - 180px logo) menyusut LEBIH CEPAT daripada menu, karena
 * lebar logo tetap 180px sehingga porsinya makin besar di layar sempit.
 * Mengecilkan font saja tidak cukup mengejar selisih itu.
 *
 * Jadi ketiganya diinterpolasi linier di rentang 1025..1400px lewat --hub-nav-t
 * (0 di 1025px, 1 di 1400px). Nilai di ujung 1400px sengaja disamakan dengan
 * nilai lama (26px / 46px / 15px) supaya tidak ada lompatan saat melewati
 * breakpoint. Batas bawah 1025px karena di 1024px menu berubah jadi hamburger.
 *
 * Hasilnya menu selalu muat di dalam `max-width` kolomnya, jadi tidak lagi
 * meluber ke kiri menimpa logo. */
@media (min-width: 1025px) and (max-width: 1400px) {
  #masthead {
    /* CSS tidak bisa membagi panjang dengan panjang, jadi rasio ini TIDAK bisa
     * dibuat tanpa satuan. Ia disimpan sebagai PANJANG 0px..1px, lalu dikali
     * angka biasa di bawah (angka x panjang = panjang, itu valid). Menulis
     * clamp(0, ..., 1) mencampur angka dengan panjang dan seluruh deklarasi
     * dibuang browser. */
    --hub-nav-t: clamp(0px, (100vw - 1025px) / 375, 1px);
    --hub-nav-fs:  calc(21.5px + 4.5 * var(--hub-nav-t));
    --hub-nav-gap: calc(16px  + 30  * var(--hub-nav-t));
    --hub-nav-pad: calc(6px   + 9   * var(--hub-nav-t));
  }
  body[class] #masthead .hfe-nav-menu li a,
  body[class] #masthead .hfe-nav-menu .hfe-menu-item,
  body[class] #masthead ul.hfe-nav-menu li,
  body[class] #masthead ul.hfe-nav-menu li a,
  body[class] #masthead .elementor-nav-menu li a,
  body[class] #masthead .elementor-nav-menu .elementor-item {
    font-size: var(--hub-nav-fs) !important;
  }
  #masthead ul.hfe-nav-menu > li + li {
    margin-left: var(--hub-nav-gap) !important;
  }
  /* Elementor menyetel padding 15px lewat post-132.css tanpa !important,
   * jadi selector ini cukup untuk menang. */
  body[class] #masthead ul.hfe-nav-menu li a.hfe-menu-item {
    padding-left: var(--hub-nav-pad) !important;
    padding-right: var(--hub-nav-pad) !important;
  }
}