.elementor-52 .elementor-element.elementor-element-1547ac48{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-52 .elementor-element.elementor-element-1547ac48:not(.elementor-motion-effects-element-type-background), .elementor-52 .elementor-element.elementor-element-1547ac48 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-52 .elementor-element.elementor-element-523a0168{text-align:start;width:var( --container-widget-width, 30% );max-width:30%;--container-widget-width:30%;--container-widget-flex-grow:0;}.elementor-52 .elementor-element.elementor-element-523a0168 img{width:39%;}.elementor-52 .elementor-element.elementor-element-4b4a948{width:auto;max-width:auto;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-nav-link {gap:15px;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-navmenu .rkit-menu-container , .rkit-menu-item > .rkit-nav-link{justify-content:end;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-menu-item > .rkit-nav-link{padding-inline:0px;color:var( --e-global-color-accent );}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-menu-item > .rkit-nav-link{padding-block:15px;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-menu-container{gap:40px;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-menu-item:hover > .rkit-nav-link{color:var( --e-global-color-accent );}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-menu-item.rkit-menu-active > .rkit-nav-link{color:var( --e-global-color-secondary );}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-submenu-item > .rkit-nav-link{justify-content:start;padding-block:15px;color:var( --e-global-color-accent );}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-submenu-item > .rkit-nav-link{padding-inline:35px;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-submenu-icon{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );font-size:16px;width:16px;height:16px;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-submenu-item{background-color:var( --e-global-color-secondary );}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-submenu-item:hover > .rkit-nav-link{color:var( --e-global-color-accent );}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-submenu-item:hover{background-color:var( --e-global-color-primary );}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-submenu-item.rkit-submenu-active > .rkit-nav-link{color:var( --e-global-color-secondary );}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-submenu-active{background-color:var( --e-global-color-accent );}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-hamburger-tablet{justify-content:end;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-hamburger-mobile{justify-content:end;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-btn-hamburger{padding:10px 10px 10px 10px;font-size:24px;border-style:none;}.elementor-52 .elementor-element.elementor-element-1498aacf{width:var( --container-widget-width, 70% );max-width:70%;--container-widget-width:70%;--container-widget-flex-grow:0;}@media(max-width:1024px){.elementor-52 .elementor-element.elementor-element-523a0168{text-align:start;width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;}.elementor-52 .elementor-element.elementor-element-523a0168 img{width:50%;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-responsive-menu{--menu-distance:0px;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-navmenu{background-color:#eeeeee;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-navmenu .rkit-menu-container , .rkit-menu-item > .rkit-nav-link{justify-content:center;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-menu-item > .rkit-nav-link{padding-block:20px;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-menu-container{gap:0px;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-submenu-item > .rkit-nav-link{color:var( --e-global-color-accent );}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-submenu-item:hover > .rkit-nav-link{color:var( --e-global-color-accent );}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-submenu-item:hover{background-color:var( --e-global-color-secondary );}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-submenu-item.rkit-submenu-active > .rkit-nav-link{color:var( --e-global-color-accent );}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-hamburger-tablet{justify-content:center;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-hamburger-mobile{justify-content:center;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-btn-hamburger{border-radius:30px 30px 30px 30px;font-size:35px;background-color:var( --e-global-color-secondary );color:var( --e-global-color-accent );}.elementor-52 .elementor-element.elementor-element-1498aacf{--container-widget-width:20%;--container-widget-flex-grow:0;width:var( --container-widget-width, 20% );max-width:20%;}}@media(max-width:767px){.elementor-52 .elementor-element.elementor-element-523a0168 img{width:80%;}.elementor-52 .elementor-element.elementor-element-523a0168{--container-widget-width:75%;--container-widget-flex-grow:0;width:var( --container-widget-width, 75% );max-width:75%;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-responsive-menu{--menu-distance:0px;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-navmenu .rkit-menu-container , .rkit-menu-item > .rkit-nav-link{justify-content:center;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-menu-item > .rkit-nav-link{padding-block:20px;}.elementor-52 .elementor-element.elementor-element-1498aacf .rkit-btn-hamburger{font-size:30px;}.elementor-52 .elementor-element.elementor-element-1498aacf{--container-widget-width:15%;--container-widget-flex-grow:0;width:var( --container-widget-width, 15% );max-width:15%;}}/* Start custom CSS for container, class: .elementor-element-1547ac48 *//* ========================================================= FORTUNARACK HEADER — FINAL COMPLETE CSS DESKTOP + DROPDOWN + NESTED SUBMENU + MOBILE ========================================================= */ /* ========================================================= 01. GLOBAL RESET ========================================================= */ .ekit-template-content-header, .ekit-template-content-header *, .elementor-element-1547ac48, .elementor-element-1547ac48 *, .elementor-element-1498aacf, .elementor-element-1498aacf * { box-sizing: border-box; } /* Semua parent header harus membiarkan dropdown keluar */ .elementor-location-header, .elementor-location-header > *, .ekit-template-content-header, .ekit-template-content-header > *, .ekit-template-content-header .elementor, .ekit-template-content-header .elementor-52, .ekit-template-content-header .elementor-section, .ekit-template-content-header .elementor-container, .ekit-template-content-header .e-con, .ekit-template-content-header .e-con-inner, .elementor-element-1547ac48, .elementor-element-1547ac48 > .e-con-inner, .elementor-element-1498aacf, .elementor-element-1498aacf > .elementor-widget-container, .elementor-element-1498aacf .rkit-navmenu-container, .elementor-element-1498aacf .rkit-navmenu { overflow: visible !important; } /* ========================================================= 02. STICKY HEADER WRAPPER ========================================================= */ .ekit-template-content-header { position: sticky !important; top: 14px !important; z-index: 999999 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 24px !important; background: transparent !important; background-image: none !important; pointer-events: auto !important; } /* Saat login WordPress */ body.admin-bar .ekit-template-content-header { top: 46px !important; } .ekit-template-content-header > .elementor, .ekit-template-content-header .elementor-52 { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; } /* ========================================================= 03. MAIN HEADER CONTAINER ========================================================= */ .elementor-element-1547ac48 { --fr-blue: #4B85ED; --fr-blue-dark: #326FD8; --fr-blue-soft: #EDF4FF; --fr-navy: #30245F; --fr-text: #657086; --fr-text-soft: #8994A8; --fr-white: #FFFFFF; --fr-border: #D2DEEF; --fr-surface: #F5F8FC; position: relative !important; z-index: 999999 !important; display: block !important; width: 100% !important; max-width: 1600px !important; margin: 10px auto 0 !important; padding: 0 !important; background: linear-gradient( 145deg, #FFFFFF 0%, #F8FAFD 48%, #EAF1FA 100% ) !important; border: 1px solid var(--fr-border) !important; border-radius: 26px !important; box-shadow: 0 18px 42px rgba(20, 65, 153, 0.19), 0 5px 14px rgba(48, 36, 95, 0.07), inset 2px 2px 3px rgba(255, 255, 255, 0.96), inset -2px -2px 4px rgba(184, 203, 232, 0.45) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: visible !important; transform: none !important; translate: none !important; scale: none !important; } /* Hilangkan ornament bawaan container */ .elementor-element-1547ac48::before, .elementor-element-1547ac48::after { content: none !important; display: none !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* ========================================================= 04. HEADER INNER ========================================================= */ .elementor-element-1547ac48 > .e-con-inner { position: relative !important; z-index: 5 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: none !important; min-height: 88px !important; margin: 0 !important; padding: 10px 24px !important; gap: 30px !important; background: transparent !important; background-image: none !important; overflow: visible !important; } /* ========================================================= 05. LOGO ========================================================= */ .elementor-element-523a0168 { position: relative !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .elementor-element-523a0168 > .elementor-widget-container { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .elementor-element-523a0168 a { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .elementor-element-523a0168 img { display: block !important; width: 70px !important; min-width: 70px !important; max-width: 70px !important; height: 70px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; filter: drop-shadow(0 4px 7px rgba(48, 36, 95, 0.14)); transform: none !important; } /* ========================================================= 06. NAVIGATION WIDGET ========================================================= */ .elementor-element-1498aacf { position: relative !important; z-index: 20 !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; overflow: visible !important; } .elementor-element-1498aacf > .elementor-widget-container { position: relative !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; overflow: visible !important; } .elementor-element-1498aacf .rkit-navmenu-container { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; overflow: visible !important; } .elementor-element-1498aacf .rkit-navmenu { position: relative !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; overflow: visible !important; } /* ========================================================= 07. TOP-LEVEL MENU ========================================================= */ .elementor-element-1498aacf .rkit-menu-container { position: relative !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; gap: clamp(3px, 0.9vw, 15px) !important; background: transparent !important; background-image: none !important; border: 0 !important; list-style: none !important; overflow: visible !important; } /* Top-level menu item */ .elementor-element-1498aacf .rkit-menu-container > li { position: relative !important; display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; list-style: none !important; overflow: visible !important; } /* Reset ornament menu item */ .elementor-element-1498aacf .rkit-menu-container > li::before, .elementor-element-1498aacf .rkit-menu-container > li::after { content: none !important; display: none !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* ========================================================= 08. TOP-LEVEL LINKS ========================================================= */ .elementor-element-1498aacf .rkit-menu-container > li > a { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; margin: 0 !important; padding: 12px clamp(11px, 1.1vw, 19px) !important; gap: 8px !important; color: var(--fr-navy) !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 1px solid transparent !important; border-radius: 15px !important; box-shadow: none !important; font-family: "Velique", sans-serif !important; font-size: clamp(14px, 1vw, 17px) !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -0.015em !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important; } /* Reset link decoration */ .elementor-element-1498aacf .rkit-menu-container > li > a::before { content: none !important; display: none !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* Hover */ .elementor-element-1498aacf .rkit-menu-container > li > a:hover { color: var(--fr-blue) !important; background: linear-gradient( 145deg, #F2F6FC 0%, #E5EDF8 100% ) !important; border-color: #D1DDEE !important; box-shadow: inset 3px 3px 7px rgba(109, 140, 192, 0.14), inset -3px -3px 7px rgba(255, 255, 255, 0.88) !important; } /* Active menu */ .elementor-element-1498aacf .rkit-menu-container > li.current-menu-item > a, .elementor-element-1498aacf .rkit-menu-container > li.current-menu-parent > a, .elementor-element-1498aacf .rkit-menu-container > li.current-menu-ancestor > a, .elementor-element-1498aacf .rkit-menu-container > li.current_page_item > a, .elementor-element-1498aacf .rkit-menu-container > li.current_page_parent > a, .elementor-element-1498aacf .rkit-menu-container > li.current_page_ancestor > a, .elementor-element-1498aacf .rkit-menu-container > li > a.active { color: var(--fr-blue) !important; background: linear-gradient( 145deg, #EEF4FD 0%, #E0EAF7 100% ) !important; border-color: #CBD9ED !important; box-shadow: inset 3px 3px 7px rgba(105, 136, 188, 0.15), inset -3px -3px 7px rgba(255, 255, 255, 0.90) !important; } /* Active underline */ .elementor-element-1498aacf .rkit-menu-container > li.current-menu-item > a::after, .elementor-element-1498aacf .rkit-menu-container > li.current-menu-parent > a::after, .elementor-element-1498aacf .rkit-menu-container > li.current-menu-ancestor > a::after, .elementor-element-1498aacf .rkit-menu-container > li.current_page_item > a::after, .elementor-element-1498aacf .rkit-menu-container > li.current_page_parent > a::after { content: "" !important; position: absolute !important; right: 17px !important; bottom: 5px !important; left: 17px !important; display: block !important; height: 2px !important; background: var(--fr-blue) !important; border-radius: 999px !important; } /* ========================================================= 09. MENU ARROWS ========================================================= */ .elementor-element-1498aacf .rkit-menu-container > li > a i, .elementor-element-1498aacf .rkit-menu-container > li > a svg { flex: 0 0 auto !important; color: currentColor !important; font-size: 15px !important; transition: transform 0.25s ease !important; } @media (hover: hover) and (pointer: fine) { .elementor-element-1498aacf .rkit-menu-container > li:hover > a i, .elementor-element-1498aacf .rkit-menu-container > li:hover > a svg { transform: rotate(180deg) !important; } } /* ========================================================= 10. RESET SUBMENU BACKGROUND ========================================================= */ .elementor-element-1498aacf .rkit-menu-container ul, .elementor-element-1498aacf .rkit-menu-container .sub-menu, .elementor-element-1498aacf .rkit-menu-container .rkit-submenu, .elementor-element-1498aacf .rkit-menu-container .dropdown-menu { list-style: none !important; } .elementor-element-1498aacf .rkit-menu-container ul li, .elementor-element-1498aacf .rkit-menu-container ul li:hover, .elementor-element-1498aacf .rkit-menu-container ul li:focus, .elementor-element-1498aacf .rkit-menu-container ul li:focus-within, .elementor-element-1498aacf .rkit-menu-container ul li.current-menu-item, .elementor-element-1498aacf .rkit-menu-container ul li.current-menu-parent, .elementor-element-1498aacf .rkit-menu-container ul li.current-menu-ancestor, .elementor-element-1498aacf .rkit-menu-container ul li.current_page_item, .elementor-element-1498aacf .rkit-menu-container ul li.current_page_parent { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; list-style: none !important; overflow: visible !important; } .elementor-element-1498aacf .rkit-menu-container ul li::before, .elementor-element-1498aacf .rkit-menu-container ul li::after { content: none !important; display: none !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } .elementor-element-1498aacf .rkit-menu-container ul li + li { margin-top: 4px !important; } /* ========================================================= 11. DESKTOP FIRST-LEVEL DROPDOWN ========================================================= */ @media (min-width: 1025px) { .elementor-element-1498aacf .rkit-menu-container > li > ul, .elementor-element-1498aacf .rkit-menu-container > li > .sub-menu, .elementor-element-1498aacf .rkit-menu-container > li > .rkit-submenu, .elementor-element-1498aacf .rkit-menu-container > li > .dropdown-menu { position: absolute !important; z-index: 9999999 !important; top: calc(100% + 13px) !important; left: 0 !important; right: auto !important; display: block !important; width: 300px !important; min-width: 300px !important; max-width: calc(100vw - 28px) !important; margin: 0 !important; padding: 10px !important; background: linear-gradient( 145deg, #FFFFFF 0%, #F8FAFD 50%, #EAF1FA 100% ) !important; border: 1px solid #CFDBED !important; border-radius: 19px !important; box-shadow: 0 22px 48px rgba(27, 68, 145, 0.20), 0 6px 16px rgba(48, 36, 95, 0.07), inset 1px 1px 2px rgba(255, 255, 255, 0.94), inset -1px -1px 2px rgba(181, 201, 231, 0.42) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(8px) !important; transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease !important; overflow: visible !important; } /* Jembatan hover */ .elementor-element-1498aacf .rkit-menu-container > li > ul::before, .elementor-element-1498aacf .rkit-menu-container > li > .sub-menu::before, .elementor-element-1498aacf .rkit-menu-container > li > .rkit-submenu::before, .elementor-element-1498aacf .rkit-menu-container > li > .dropdown-menu::before { content: "" !important; position: absolute !important; top: -14px !important; right: 0 !important; left: 0 !important; display: block !important; height: 14px !important; background: transparent !important; pointer-events: auto !important; } /* Open first dropdown */ .elementor-element-1498aacf .rkit-menu-container > li:hover > ul, .elementor-element-1498aacf .rkit-menu-container > li:focus-within > ul, .elementor-element-1498aacf .rkit-menu-container > li:hover > .sub-menu, .elementor-element-1498aacf .rkit-menu-container > li:focus-within > .sub-menu, .elementor-element-1498aacf .rkit-menu-container > li:hover > .rkit-submenu, .elementor-element-1498aacf .rkit-menu-container > li:focus-within > .rkit-submenu, .elementor-element-1498aacf .rkit-menu-container > li:hover > .dropdown-menu, .elementor-element-1498aacf .rkit-menu-container > li:focus-within > .dropdown-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } /* Menu dekat kanan buka ke kiri */ .elementor-element-1498aacf .rkit-menu-container > li:nth-last-child(-n + 2) > ul, .elementor-element-1498aacf .rkit-menu-container > li:nth-last-child(-n + 2) > .sub-menu, .elementor-element-1498aacf .rkit-menu-container > li:nth-last-child(-n + 2) > .rkit-submenu, .elementor-element-1498aacf .rkit-menu-container > li:nth-last-child(-n + 2) > .dropdown-menu { right: 0 !important; left: auto !important; } } /* ========================================================= 12. DESKTOP NESTED SUBMENU FIX UTAMA: LEBIH KECIL DAN OVERLAP ========================================================= */ @media (min-width: 1181px) { .elementor-element-1498aacf .rkit-menu-container ul li > ul, .elementor-element-1498aacf .rkit-menu-container ul li > .sub-menu, .elementor-element-1498aacf .rkit-menu-container ul li > .rkit-submenu, .elementor-element-1498aacf .rkit-menu-container ul li > .dropdown-menu { position: absolute !important; z-index: 10000000 !important; top: -10px !important; /* * Bukan lagi calc(100% + 12px). * Panel dibuat overlap agar tidak melewati layar. */ left: calc(100% - 18px) !important; right: auto !important; display: block !important; width: 250px !important; min-width: 250px !important; max-width: min(250px, calc(100vw - 28px)) !important; max-height: min(430px, calc(100vh - 40px)) !important; margin: 0 !important; padding: 10px !important; background: linear-gradient( 145deg, #FFFFFF 0%, #F8FAFD 52%, #EAF1FA 100% ) !important; border: 1px solid #CFDBED !important; border-radius: 17px !important; box-shadow: 0 20px 44px rgba(27, 68, 145, 0.20), 0 5px 14px rgba(48, 36, 95, 0.07), inset 1px 1px 2px rgba(255, 255, 255, 0.92), inset -1px -1px 2px rgba(181, 201, 231, 0.40) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateX(6px) !important; transition: opacity 0.20s ease, visibility 0.20s ease, transform 0.20s ease !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; } /* Hover bridge nested */ .elementor-element-1498aacf .rkit-menu-container ul li > ul::before, .elementor-element-1498aacf .rkit-menu-container ul li > .sub-menu::before, .elementor-element-1498aacf .rkit-menu-container ul li > .rkit-submenu::before, .elementor-element-1498aacf .rkit-menu-container ul li > .dropdown-menu::before { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: -19px !important; display: block !important; width: 19px !important; background: transparent !important; pointer-events: auto !important; } /* Open nested submenu */ .elementor-element-1498aacf .rkit-menu-container ul li:hover > ul, .elementor-element-1498aacf .rkit-menu-container ul li:focus-within > ul, .elementor-element-1498aacf .rkit-menu-container ul li:hover > .sub-menu, .elementor-element-1498aacf .rkit-menu-container ul li:focus-within > .sub-menu, .elementor-element-1498aacf .rkit-menu-container ul li:hover > .rkit-submenu, .elementor-element-1498aacf .rkit-menu-container ul li:focus-within > .rkit-submenu, .elementor-element-1498aacf .rkit-menu-container ul li:hover > .dropdown-menu, .elementor-element-1498aacf .rkit-menu-container ul li:focus-within > .dropdown-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(0) !important; } } /* ========================================================= 13. LAPTOP DESKTOP 1025–1180PX NESTED SUBMENU TURUN KE BAWAH ========================================================= */ @media (min-width: 1025px) and (max-width: 1180px) { .elementor-element-1498aacf .rkit-menu-container ul li > ul, .elementor-element-1498aacf .rkit-menu-container ul li > .sub-menu, .elementor-element-1498aacf .rkit-menu-container ul li > .rkit-submenu, .elementor-element-1498aacf .rkit-menu-container ul li > .dropdown-menu { position: absolute !important; z-index: 10000000 !important; top: calc(100% + 6px) !important; right: 0 !important; left: auto !important; display: block !important; width: 255px !important; min-width: 255px !important; max-width: calc(100vw - 28px) !important; max-height: min(390px, calc(100vh - 40px)) !important; margin: 0 !important; padding: 9px !important; background: linear-gradient( 145deg, #FFFFFF 0%, #F7F9FD 100% ) !important; border: 1px solid #CFDBED !important; border-radius: 15px !important; box-shadow: 0 18px 40px rgba(27, 68, 145, 0.19), 0 5px 14px rgba(48, 36, 95, 0.06) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(5px) !important; transition: opacity 0.20s ease, visibility 0.20s ease, transform 0.20s ease !important; overflow-x: hidden !important; overflow-y: auto !important; } .elementor-element-1498aacf .rkit-menu-container ul li > ul::before, .elementor-element-1498aacf .rkit-menu-container ul li > .sub-menu::before, .elementor-element-1498aacf .rkit-menu-container ul li > .rkit-submenu::before, .elementor-element-1498aacf .rkit-menu-container ul li > .dropdown-menu::before { content: "" !important; position: absolute !important; top: -7px !important; right: 0 !important; left: 0 !important; display: block !important; height: 7px !important; background: transparent !important; pointer-events: auto !important; } .elementor-element-1498aacf .rkit-menu-container ul li:hover > ul, .elementor-element-1498aacf .rkit-menu-container ul li:focus-within > ul, .elementor-element-1498aacf .rkit-menu-container ul li:hover > .sub-menu, .elementor-element-1498aacf .rkit-menu-container ul li:focus-within > .sub-menu, .elementor-element-1498aacf .rkit-menu-container ul li:hover > .rkit-submenu, .elementor-element-1498aacf .rkit-menu-container ul li:focus-within > .rkit-submenu, .elementor-element-1498aacf .rkit-menu-container ul li:hover > .dropdown-menu, .elementor-element-1498aacf .rkit-menu-container ul li:focus-within > .dropdown-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } } /* ========================================================= 14. SUBMENU LINKS ========================================================= */ .elementor-element-1498aacf .rkit-menu-container ul li > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-width: 0 !important; min-height: 46px !important; margin: 0 !important; padding: 11px 14px !important; gap: 12px !important; color: var(--fr-text) !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 1px solid transparent !important; border-radius: 11px !important; box-shadow: none !important; font-family: "Velique", sans-serif !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: -0.01em !important; text-align: left !important; text-decoration: none !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; transition: color 0.20s ease, background-color 0.20s ease, border-color 0.20s ease, box-shadow 0.20s ease !important; } /* Reset submenu link ornament */ .elementor-element-1498aacf .rkit-menu-container ul li > a::before, .elementor-element-1498aacf .rkit-menu-container ul li > a::after { content: none !important; display: none !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* Hover submenu */ .elementor-element-1498aacf .rkit-menu-container ul li > a:hover { color: var(--fr-blue) !important; background: linear-gradient( 145deg, #F2F6FC 0%, #E3ECF8 100% ) !important; border-color: #D4E0EF !important; box-shadow: inset 3px 3px 7px rgba(109, 138, 187, 0.12), inset -3px -3px 7px rgba(255, 255, 255, 0.88) !important; } /* Active submenu */ .elementor-element-1498aacf .rkit-menu-container ul li.current-menu-item > a, .elementor-element-1498aacf .rkit-menu-container ul li.current-menu-parent > a, .elementor-element-1498aacf .rkit-menu-container ul li.current-menu-ancestor > a, .elementor-element-1498aacf .rkit-menu-container ul li.current_page_item > a, .elementor-element-1498aacf .rkit-menu-container ul li.current_page_parent > a, .elementor-element-1498aacf .rkit-menu-container ul li.current_page_ancestor > a, .elementor-element-1498aacf .rkit-menu-container ul li > a.active { color: var(--fr-blue) !important; background: var(--fr-blue-soft) !important; background-image: none !important; border-color: rgba(75, 133, 237, 0.22) !important; box-shadow: 0 6px 16px rgba(75, 133, 237, 0.08) !important; } /* Arrow nested menu */ .elementor-element-1498aacf .rkit-menu-container ul li > a i, .elementor-element-1498aacf .rkit-menu-container ul li > a svg { flex: 0 0 auto !important; color: currentColor !important; font-size: 14px !important; } /* ========================================================= 15. HAMBURGER BUTTON ========================================================= */ .elementor-element-1498aacf .rkit-hamburger { position: relative !important; display: none; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .elementor-element-1498aacf .rkit-btn-hamburger { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; min-width: 48px !important; height: 48px !important; margin: 0 !important; padding: 0 !important; color: var(--fr-blue) !important; background: linear-gradient( 145deg, #FAFCFF 0%, #E3EBF7 100% ) !important; border: 1px solid #CFDBED !important; border-radius: 15px !important; box-shadow: 6px 7px 14px rgba(92, 124, 180, 0.18), inset 2px 2px 3px rgba(255, 255, 255, 0.92), inset -2px -2px 3px rgba(180, 201, 232, 0.50) !important; text-decoration: none !important; cursor: pointer !important; } .elementor-element-1498aacf .rkit-btn-hamburger i, .elementor-element-1498aacf .rkit-btn-hamburger svg { color: var(--fr-blue) !important; font-size: 22px !important; transform: none !important; } /* ========================================================= 16. DESKTOP ========================================================= */ @media (min-width: 1025px) { .elementor-element-1498aacf .rkit-hamburger { display: none !important; } .elementor-element-1498aacf .rkit-navmenu:not(.rkit-responsive-menu) { display: block !important; } } /* ========================================================= 17. TABLET AND MOBILE — MAX 1024PX ========================================================= */ @media (max-width: 1024px) { html, body { overflow-x: hidden !important; } .ekit-template-content-header { top: 10px !important; padding-right: 14px !important; padding-left: 14px !important; } body.admin-bar .ekit-template-content-header { top: 42px !important; } .elementor-element-1547ac48 { margin-top: 8px !important; border-radius: 21px !important; } .elementor-element-1547ac48 > .e-con-inner { min-height: 78px !important; padding: 9px 16px !important; gap: 16px !important; } .elementor-element-523a0168 img { width: 60px !important; min-width: 60px !important; max-width: 60px !important; height: 60px !important; } .elementor-element-1498aacf { display: flex !important; align-items: center !important; justify-content: flex-end !important; min-width: 0 !important; } .elementor-element-1498aacf > .elementor-widget-container { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; } .elementor-element-1498aacf .rkit-navmenu-container { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; } .elementor-element-1498aacf .rkit-hamburger { display: flex !important; align-items: center !important; justify-content: flex-end !important; margin-left: auto !important; } /* Mobile navigation panel */ .elementor-element-1498aacf .rkit-navmenu.rkit-responsive-menu { position: absolute !important; z-index: 9999999 !important; top: calc(100% + 14px) !important; right: 0 !important; left: auto !important; width: min(390px, calc(100vw - 28px)) !important; min-width: 0 !important; max-width: calc(100vw - 28px) !important; max-height: min( 720px, calc(100dvh - 120px) ) !important; margin: 0 !important; padding: 11px !important; background: linear-gradient( 145deg, #FFFFFF 0%, #F5F8FC 52%, #E6EEF8 100% ) !important; border: 1px solid #CFDBED !important; border-radius: 19px !important; box-shadow: 0 22px 48px rgba(25, 66, 143, 0.25), 0 5px 14px rgba(48, 36, 95, 0.07), inset 1px 1px 2px rgba(255, 255, 255, 0.92), inset -1px -1px 2px rgba(181, 201, 231, 0.45) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; } /* Mobile main list */ .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; gap: 5px !important; background: transparent !important; overflow: visible !important; } /* Mobile menu item */ .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container > li { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; overflow: visible !important; } /* Mobile menu link */ .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container > li > a { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-width: 0 !important; min-height: 48px !important; margin: 0 !important; padding: 12px 14px !important; font-size: 15px !important; line-height: 1.4 !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* Jangan rotate arrow ketika hover pada touch screen */ .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container > li:hover > a i, .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container > li:hover > a svg { transform: none !important; } /* Semua submenu mobile turun ke bawah */ .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container ul, .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container .sub-menu, .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container .rkit-submenu, .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container .dropdown-menu { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 5px 0 0 !important; padding: 6px !important; background: linear-gradient( 145deg, #EDF3FA 0%, #F8FAFD 100% ) !important; border: 1px solid #D2DEEF !important; border-radius: 13px !important; box-shadow: inset 3px 3px 7px rgba(108, 137, 186, 0.10), inset -3px -3px 7px rgba(255, 255, 255, 0.86) !important; transform: none !important; } /* Mobile submenu item */ .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container ul li { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; overflow: visible !important; } /* Mobile submenu link */ .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container ul li > a { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-width: 0 !important; min-height: 43px !important; margin: 0 !important; padding: 10px 12px !important; font-size: 14px !important; line-height: 1.45 !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere !important; transform: none !important; } .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container ul li > a:hover { transform: none !important; } /* Nested submenu mobile */ .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container ul ul { margin-top: 5px !important; margin-left: 0 !important; padding: 5px !important; background: linear-gradient( 145deg, #E6EEF8 0%, #F6F9FD 100% ) !important; border-radius: 11px !important; } } /* ========================================================= 18. MOBILE — MAX 767PX ========================================================= */ @media (max-width: 767px) { .ekit-template-content-header { top: 7px !important; padding-right: 10px !important; padding-left: 10px !important; } body.admin-bar .ekit-template-content-header { top: 53px !important; } .elementor-element-1547ac48 { width: 100% !important; margin-top: 6px !important; border-radius: 18px !important; box-shadow: 0 14px 32px rgba(20, 65, 153, 0.20), 0 4px 10px rgba(48, 36, 95, 0.06), inset 2px 2px 3px rgba(255, 255, 255, 0.95), inset -2px -2px 3px rgba(184, 203, 232, 0.43) !important; } .elementor-element-1547ac48 > .e-con-inner { min-height: 68px !important; padding: 8px 11px !important; gap: 10px !important; } .elementor-element-523a0168 img { width: 50px !important; min-width: 50px !important; max-width: 50px !important; height: 50px !important; } .elementor-element-1498aacf { flex: 1 1 auto !important; min-width: 0 !important; } .elementor-element-1498aacf .rkit-btn-hamburger { width: 43px !important; min-width: 43px !important; height: 43px !important; border-radius: 13px !important; } .elementor-element-1498aacf .rkit-btn-hamburger i, .elementor-element-1498aacf .rkit-btn-hamburger svg { font-size: 20px !important; } .elementor-element-1498aacf .rkit-navmenu.rkit-responsive-menu { top: calc(100% + 12px) !important; width: calc(100vw - 20px) !important; min-width: 0 !important; max-width: calc(100vw - 20px) !important; max-height: calc(100dvh - 100px) !important; padding: 9px !important; border-radius: 17px !important; } } /* ========================================================= 19. SMALL MOBILE — MAX 420PX ========================================================= */ @media (max-width: 420px) { .ekit-template-content-header { padding-right: 7px !important; padding-left: 7px !important; } .elementor-element-1547ac48 { border-radius: 16px !important; } .elementor-element-1547ac48 > .e-con-inner { min-height: 62px !important; padding: 7px 9px !important; gap: 8px !important; } .elementor-element-523a0168 img { width: 45px !important; min-width: 45px !important; max-width: 45px !important; height: 45px !important; } .elementor-element-1498aacf .rkit-btn-hamburger { width: 40px !important; min-width: 40px !important; height: 40px !important; border-radius: 12px !important; } .elementor-element-1498aacf .rkit-navmenu.rkit-responsive-menu { width: calc(100vw - 14px) !important; max-width: calc(100vw - 14px) !important; padding: 8px !important; border-radius: 15px !important; } .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container > li > a { min-height: 45px !important; padding: 11px 12px !important; font-size: 14px !important; } .elementor-element-1498aacf .rkit-responsive-menu .rkit-menu-container ul li > a { min-height: 40px !important; padding: 9px 10px !important; font-size: 13px !important; } } /* ========================================================= 20. VERY SMALL MOBILE — MAX 360PX ========================================================= */ @media (max-width: 360px) { .elementor-element-1547ac48 > .e-con-inner { padding-right: 8px !important; padding-left: 8px !important; } .elementor-element-523a0168 img { width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; } .elementor-element-1498aacf .rkit-btn-hamburger { width: 38px !important; min-width: 38px !important; height: 38px !important; } .elementor-element-1498aacf .rkit-navmenu.rkit-responsive-menu { padding: 7px !important; } } /* ========================================================= 21. MOBILE LANDSCAPE ========================================================= */ @media (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) { .elementor-element-1498aacf .rkit-navmenu.rkit-responsive-menu { max-height: calc(100dvh - 88px) !important; } } /* ========================================================= 22. ELEMENTOR EDITOR ========================================================= */ body.elementor-editor-active .ekit-template-content-header { position: relative !important; top: auto !important; padding: 0 15px !important; } body.elementor-editor-active .elementor-element-1547ac48 { margin: 15px auto !important; } /* ========================================================= 23. ACCESSIBILITY ========================================================= */ .elementor-element-1498aacf a:focus-visible, .elementor-element-1498aacf .rkit-btn-hamburger:focus-visible { outline: 3px solid rgba(75, 133, 237, 0.30) !important; outline-offset: 3px !important; } @media (max-width: 1024px) { .elementor-element-1498aacf .rkit-responsive-menu a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } } /* ========================================================= 24. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-element-1498aacf a, .elementor-element-1498aacf ul, .elementor-element-1498aacf li, .elementor-element-1498aacf svg, .elementor-element-1498aacf i, .elementor-element-1498aacf .rkit-navmenu, .elementor-element-1498aacf .rkit-btn-hamburger { transition: none !important; } }/* End custom CSS */