{"id":90,"date":"2026-08-19T10:52:17","date_gmt":"2026-08-19T10:52:17","guid":{"rendered":"https:\/\/altegra.asia\/?page_id=90"},"modified":"2026-08-19T19:41:15","modified_gmt":"2026-08-19T19:41:15","slug":"home","status":"publish","type":"page","link":"https:\/\/altegra.asia\/id\/","title":{"rendered":"Beranda"},"content":{"rendered":"<style data-wp-block-html=\"css\">\n\/* Scope khusus blok Nav & Hero tanpa merusak Font Awesome *\/\n.navbar-header,\n.hero-section,\n.modal-overlay {\n  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  box-sizing: border-box;\n}\n\n.navbar-header *,\n.hero-section *,\n.modal-overlay * {\n  box-sizing: border-box;\n}\n\n\/* Pertahankan font icon bawaan Font Awesome agar tidak hilang *\/\n.navbar-header .fa, \n.navbar-header .fa-solid, \n.navbar-header .fa-regular, \n.navbar-header .fa-brands,\n.hero-section .fa, \n.hero-section .fa-solid, \n.hero-section .fa-regular, \n.hero-section .fa-brands {\n  font-family: \"Font Awesome 6 Free\", \"Font Awesome 6 Brands\" !important;\n}\n\n\/* ================= NAVBAR FLOATING ================= *\/\n.navbar-header {\n  position: fixed;\n  top: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: calc(100% - 48px);\n  max-width: 1320px;\n  background: rgba(13, 21, 18, 0.75);\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 16px;\n  z-index: 1000;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.navbar-header.scrolled {\n  top: 10px;\n  background: rgba(9, 16, 13, 0.92);\n  border-color: rgba(85, 223, 119, 0.25);\n  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 15px rgba(85, 223, 119, 0.1);\n}\n\n.nav-container {\n  width: 100%;\n  padding: 0 24px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 72px;\n}\n\n.logo a {\n  text-decoration: none;\n  font-size: 24px;\n  font-weight: 800;\n  color: #ffffff;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  letter-spacing: -0.5px;\n}\n\n.logo-icon {\n  color: #55df77;\n  filter: drop-shadow(0 0 8px rgba(85, 223, 119, 0.4));\n}\n\n\/* Vertical Align Center Solid *\/\n.nav-menu {\n  height: 72px;\n  display: flex;\n  align-items: center;\n}\n\n.nav-menu > ul {\n  display: flex;\n  list-style: none !important;\n  gap: 8px;\n  align-items: center;\n  height: 100%;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.nav-item {\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.nav-link {\n  color: #d1d5db;\n  text-decoration: none;\n  font-size: 14.5px;\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 14px;\n  border-radius: 8px;\n  transition: all 0.2s ease;\n  cursor: pointer;\n  line-height: 1;\n}\n\n.nav-link:hover,\n.nav-item.open > .nav-link {\n  color: #55df77;\n  background: rgba(85, 223, 119, 0.08);\n}\n\n.nav-link i.fa-chevron-down {\n  font-size: 11px;\n  transition: transform 0.25s ease;\n}\n\n.nav-item:hover .nav-link i.fa-chevron-down,\n.nav-item.open .nav-link i.fa-chevron-down {\n  transform: rotate(180deg);\n}\n\n.nav-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.icon-btn {\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  color: #fff;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.3s ease;\n}\n\n.icon-btn:hover {\n  background-color: #55df77;\n  border-color: #55df77;\n  color: #0b1a13;\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(85, 223, 119, 0.3);\n}\n\n.mobile-toggle {\n  display: none;\n}\n\n\/* ================= MEGA MENU (HOVER GAP SAFE) ================= *\/\n.has-mega-menu {\n  position: static;\n}\n\n.mega-menu-wrapper {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  padding-top: 14px; \/* Gap aman tanpa putus hover *\/\n  margin-top: 0;\n  visibility: hidden;\n  opacity: 0;\n  transform: translateY(10px);\n  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;\n  pointer-events: none;\n  z-index: 999;\n}\n\n.has-mega-menu:hover .mega-menu-wrapper,\n.has-mega-menu.open .mega-menu-wrapper {\n  visibility: visible;\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n.mega-menu-container {\n  max-width: 100%;\n  margin: 0 auto;\n  display: flex;\n  border-radius: 16px;\n  overflow: hidden;\n  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255,255,255,0.2);\n  border: 1px solid rgba(255, 255, 255, 0.15);\n}\n\n.mega-left-panel {\n  background: linear-gradient(135deg, #4bd76f 0%, #2ea751 100%);\n  flex: 1;\n  padding: 32px 32px 24px 32px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: hidden;\n}\n\n.mega-top-content {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 28px;\n}\n\n.mega-section-title {\n  font-size: 15px;\n  font-weight: 700;\n  color: #072210;\n  margin-bottom: 16px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.mega-section-title i {\n  font-size: 16px;\n  color: #0c381b;\n}\n\n.mega-section-title a {\n  color: inherit;\n  text-decoration: none;\n  transition: color 0.2s ease;\n}\n\n.mega-section-title a:hover {\n  color: #ffffff;\n}\n\n.mega-items-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.mega-item {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  text-decoration: none;\n  padding: 10px 12px;\n  border-radius: 10px;\n  transition: all 0.2s ease;\n}\n\na.mega-item:hover {\n  background: rgba(255, 255, 255, 0.25);\n  transform: translateX(4px);\n}\n\n.mega-item.non-clickable {\n  cursor: default;\n  opacity: 0.85;\n}\n\n.mega-item-title {\n  font-weight: 700;\n  font-size: 14px;\n  color: #06230f;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mega-item-title i {\n  font-size: 12px;\n  opacity: 0.8;\n  transition: transform 0.2s ease;\n}\n\na.mega-item:hover .mega-item-title i {\n  transform: translateX(3px);\n}\n\n.mega-item-desc {\n  font-size: 12px;\n  color: #0f3d1b;\n  line-height: 1.4;\n  font-weight: 500;\n  padding-left: 16px;\n}\n\n\/* Logo Slider 108x50 *\/\n.mega-bottom-partners {\n  margin-top: 24px;\n  padding-top: 18px;\n  border-top: 1px solid rgba(0, 0, 0, 0.12);\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  overflow: hidden;\n}\n\n.partners-title {\n  font-weight: 800;\n  font-size: 13px;\n  color: #082912;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.partners-slider-wrapper {\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);\n  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);\n}\n\n.partners-track {\n  display: flex;\n  align-items: center;\n  width: max-content;\n  gap: 20px;\n  animation: loopLogoMarquee 25s linear infinite;\n}\n\n.partners-track:hover {\n  animation-play-state: paused;\n}\n\n@keyframes loopLogoMarquee {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(calc(-50% - 10px)); }\n}\n\n.partner-logo-item {\n  width: 108px;\n  height: 50px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  text-decoration: none;\n  background: rgba(255, 255, 255, 0.12);\n  border-radius: 8px;\n  padding: 4px 8px;\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  transition: all 0.25s ease;\n  box-sizing: border-box;\n}\n\n.partner-logo-item:hover {\n  background: rgba(255, 255, 255, 0.32);\n  border-color: rgba(255, 255, 255, 0.6);\n  transform: translateY(-2px);\n}\n\n.partner-logo-item img {\n  width: 100%;\n  height: 100%;\n  max-width: 108px;\n  max-height: 50px;\n  object-fit: contain;\n  filter: brightness(0) invert(1);\n  opacity: 0.85;\n  transition: all 0.25s ease;\n  display: block;\n}\n\n.partner-logo-item:hover img {\n  opacity: 1;\n  filter: brightness(0) invert(1) drop-shadow(0 2px 5px rgba(0,0,0,0.3));\n}\n\n.mega-right-panel {\n  background: #ffffff;\n  width: 300px;\n  padding: 32px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.contact-title {\n  font-size: 18px;\n  color: #111827;\n  font-weight: 800;\n  letter-spacing: -0.3px;\n}\n\n.contact-item {\n  display: flex;\n  gap: 14px;\n  align-items: flex-start;\n}\n\n.contact-icon {\n  background: #ebfbf0;\n  color: #2ea751;\n  width: 38px;\n  height: 38px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 15px;\n  flex-shrink: 0;\n}\n\n.contact-details {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.contact-details strong {\n  font-size: 13px;\n  color: #111827;\n}\n\n.contact-details span {\n  font-size: 12px;\n  color: #4b5563;\n  font-weight: 500;\n}\n\n.social-section {\n  margin-top: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.social-section strong {\n  font-size: 13px;\n  color: #111827;\n}\n\n.social-links {\n  display: flex;\n  gap: 10px;\n}\n\n.social-links a {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  border-radius: 50%;\n  border: 1px solid #e5e7eb;\n  color: #374151;\n  text-decoration: none;\n  font-size: 13px;\n  transition: all 0.2s ease;\n}\n\n.social-links a:hover {\n  background: #2ea751;\n  border-color: #2ea751;\n  color: #ffffff;\n  transform: translateY(-2px);\n}\n\n\/* ================= STANDARD DROPDOWN ================= *\/\n.dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  background: #ffffff;\n  border-radius: 12px;\n  min-width: 250px;\n  padding: 8px 0;\n  margin-top: 14px;\n  box-shadow: 0 15px 35px rgba(0,0,0,0.3);\n  visibility: hidden;\n  opacity: 0;\n  transform: translateY(10px);\n  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;\n  list-style: none !important;\n  z-index: 1000;\n  border: 1px solid rgba(0,0,0,0.08);\n  pointer-events: none;\n}\n\n.dropdown-menu::before {\n  content: \"\";\n  position: absolute;\n  top: -18px;\n  left: 0;\n  width: 100%;\n  height: 20px;\n  background: transparent;\n}\n\n.nav-item:hover > .dropdown-menu,\n.nav-item.open > .dropdown-menu {\n  visibility: visible;\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n.dropdown-menu li {\n  list-style: none !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.dropdown-menu li a {\n  display: block;\n  padding: 11px 20px;\n  font-size: 14px;\n  color: #1f2937;\n  text-decoration: none;\n  font-weight: 600;\n  transition: all 0.2s ease;\n}\n\n.dropdown-menu li a:hover {\n  background: #f0fdf4;\n  color: #2ea751;\n  padding-left: 24px;\n}\n\n\/* ================= HERO SECTION ================= *\/\n.hero-section {\n  position: relative;\n  min-height: 100vh;\n  width: 100%;\n  margin-top: 0 !important;\n  padding-top: 140px;\n  padding-bottom: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(180deg, rgba(7, 13, 10, 0.4) 0%, rgba(7, 13, 10, 0.95) 100%), \n              url('https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop') center\/cover no-repeat;\n  z-index: 1;\n}\n\n.hero-container {\n  max-width: 1100px;\n  margin: 0 auto;\n  padding: 0 24px;\n  text-align: center;\n  position: relative;\n  z-index: 2;\n}\n\n.hero-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: rgba(85, 223, 119, 0.12);\n  border: 1px solid rgba(85, 223, 119, 0.3);\n  padding: 8px 18px;\n  border-radius: 50px;\n  color: #55df77;\n  font-size: 13px;\n  font-weight: 700;\n  margin-bottom: 24px;\n  backdrop-filter: blur(8px);\n}\n\n.hero-title {\n  font-size: 58px;\n  font-weight: 800;\n  line-height: 1.15;\n  margin-bottom: 24px;\n  letter-spacing: -1.5px;\n  background: linear-gradient(90deg, #fff 0%, #41CB62 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.hero-description {\n  font-size: 16px;\n  color: #fff;\n  max-width: 760px;\n  margin: 0 auto 40px auto;\n  line-height: 1.6;\n  font-weight: 600;\n}\n\n.hero-buttons {\n  display: flex;\n  gap: 16px;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n.btn-primary {\n  background: #55df77;\n  color: #07150c;\n  padding: 16px 32px;\n  border-radius: 12px;\n  font-weight: 700;\n  text-decoration: none;\n  transition: all 0.3s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 15px;\n  box-shadow: 0 10px 25px rgba(85, 223, 119, 0.3);\n}\n\n.btn-primary:hover {\n  background: #41cb62;\n  transform: translateY(-2px);\n  box-shadow: 0 15px 30px rgba(85, 223, 119, 0.4);\n}\n\n.btn-secondary {\n  background: rgba(255, 255, 255, 0.08);\n  color: #ffffff;\n  padding: 16px 32px;\n  border-radius: 12px;\n  font-weight: 600;\n  text-decoration: none;\n  transition: all 0.3s ease;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  backdrop-filter: blur(10px);\n  font-size: 15px;\n}\n\n.btn-secondary:hover {\n  background: rgba(255, 255, 255, 0.15);\n  border-color: rgba(255, 255, 255, 0.3);\n  transform: translateY(-2px);\n}\n\n\/* Modal Overlay *\/\n.modal-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.75);\n  backdrop-filter: blur(8px);\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s ease;\n  padding: 20px;\n}\n\n.modal-overlay.active {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.modal-box {\n  background: #111a16;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 20px;\n  padding: 32px;\n  max-width: 500px;\n  width: 100%;\n  position: relative;\n  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);\n}\n\n.close-modal {\n  position: absolute;\n  top: 20px;\n  right: 20px;\n  background: none;\n  border: none;\n  color: #9ca3af;\n  font-size: 20px;\n  cursor: pointer;\n}\n\n\/* Responsive Tablet & Mobile *\/\n@media (max-width: 1024px) {\n  .navbar-header {\n    top: 12px;\n    width: calc(100% - 24px);\n    border-radius: 14px;\n  }\n\n  .nav-container {\n    height: 64px;\n    padding: 0 16px;\n  }\n\n  .mobile-toggle {\n    display: flex;\n  }\n\n  .nav-menu {\n    position: absolute;\n    top: calc(100% + 12px);\n    left: 0;\n    width: 100%;\n    height: auto;\n    max-height: none;\n    overflow: visible;\n    background: #0d1713;\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 16px;\n    padding: 16px;\n    display: none;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);\n  }\n\n  .nav-menu.active {\n    display: block;\n  }\n\n  .nav-menu > ul {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 6px;\n    height: auto;\n    width: 100%;\n  }\n\n  .nav-item {\n    height: auto;\n    display: block;\n    width: 100%;\n  }\n\n  .nav-link {\n    justify-content: space-between;\n    padding: 12px 16px;\n    border-radius: 10px;\n    background: rgba(255, 255, 255, 0.04);\n    font-size: 15px;\n    font-weight: 700;\n    color: #ffffff;\n  }\n\n  .nav-item.open > .nav-link {\n    background: rgba(85, 223, 119, 0.15);\n    color: #55df77;\n  }\n\n  .mega-menu-wrapper,\n  .dropdown-menu {\n    position: static;\n    visibility: visible;\n    opacity: 1;\n    transform: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 6px 0 10px 0;\n    display: none;\n    pointer-events: auto;\n    border: none;\n    background: transparent;\n    border-radius: 0;\n    width: 100%;\n  }\n\n  .nav-item.open > .mega-menu-wrapper,\n  .nav-item.open > .dropdown-menu {\n    display: block;\n  }\n\n  .mega-menu-container {\n    flex-direction: column;\n    border-radius: 12px;\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    background: rgba(0, 0, 0, 0.25);\n    overflow: hidden;\n  }\n\n  .mega-left-panel {\n    background: transparent;\n    padding: 14px 12px;\n  }\n\n  .mega-top-content {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .mega-section-title {\n    color: #55df77;\n    font-size: 13.5px;\n    font-weight: 800;\n    margin-bottom: 8px;\n    padding-bottom: 4px;\n    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);\n  }\n\n  .mega-section-title i {\n    color: #55df77;\n    font-size: 14px;\n  }\n\n  .mega-section-title span.non-clickable {\n    color: #9ca3af;\n    cursor: default;\n  }\n\n  .mega-items-list {\n    gap: 4px;\n    padding-left: 6px;\n  }\n\n  .mega-item {\n    padding: 8px 10px;\n    border-radius: 8px;\n  }\n\n  a.mega-item:hover,\n  a.mega-item:active {\n    background: rgba(85, 223, 119, 0.1);\n    transform: none;\n  }\n\n  .mega-item-title {\n    color: #e5e7eb;\n    font-size: 13.5px;\n    font-weight: 600;\n  }\n\n  .mega-item.non-clickable .mega-item-title {\n    color: #9ca3af;\n  }\n\n  .mega-item-title i {\n    color: #55df77;\n    font-size: 10px;\n  }\n\n  .mega-item.non-clickable .mega-item-title i {\n    color: #6b7280;\n  }\n\n  .mega-item-desc {\n    display: none;\n  }\n\n  .mega-bottom-partners,\n  .mega-right-panel {\n    display: none;\n  }\n\n  .dropdown-menu {\n    background: rgba(0, 0, 0, 0.25);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: 12px;\n    padding: 8px;\n  }\n\n  .dropdown-menu li a {\n    padding: 10px 14px;\n    color: #d1d5db;\n    font-size: 13.5px;\n    font-weight: 600;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .dropdown-menu li a::before {\n    content: \"\u2022\";\n    color: #55df77;\n    font-size: 16px;\n    line-height: 1;\n  }\n\n  .dropdown-menu li a:hover {\n    background: rgba(85, 223, 119, 0.1);\n    color: #55df77;\n    padding-left: 14px;\n  }\n\n  .hero-title {\n    font-size: 38px;\n  }\n\n  .hero-description {\n    font-size: 16px;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n<script>\n    document.addEventListener('DOMContentLoaded', () => {\n      const mobileToggle = document.getElementById('mobileToggle');\n      const navMenu = document.getElementById('navMenu');\n      const dropdownItems = document.querySelectorAll('.has-mega-menu, .dropdown');\n      const mainHeader = document.getElementById('mainHeader');\n\n      \/\/ Scroll Effect for Floating Header\n      window.addEventListener('scroll', () => {\n        if (window.scrollY > 40) {\n          mainHeader.classList.add('scrolled');\n        } else {\n          mainHeader.classList.remove('scrolled');\n        }\n      });\n\n      \/\/ Toggle drawer di mobile\/tablet\n      if (mobileToggle && navMenu) {\n        mobileToggle.addEventListener('click', (e) => {\n          e.stopPropagation();\n          navMenu.classList.toggle('active');\n        });\n      }\n\n      \/\/ Accordion dropdown pada mobile \/ tablet (<= 1024px)\n      dropdownItems.forEach(item => {\n        const trigger = item.querySelector('.nav-link');\n        if (trigger) {\n          trigger.addEventListener('click', (e) => {\n            if (window.innerWidth <= 1024) {\n              e.preventDefault();\n\n              dropdownItems.forEach(otherItem => {\n                if (otherItem !== item) otherItem.classList.remove('open');\n              });\n\n              item.classList.toggle('open');\n            }\n          });\n        }\n      });\n\n      \/\/ Tutup panel ketika klik di luar navbar\n      document.addEventListener('click', (e) => {\n        if (!e.target.closest('.navbar-header')) {\n          dropdownItems.forEach(item => item.classList.remove('open'));\n          if (navMenu) navMenu.classList.remove('active');\n        }\n      });\n\n      \/\/ Search Modal Handlers\n      const searchBtn = document.getElementById('searchBtn');\n      const searchModal = document.getElementById('searchModal');\n      const closeSearchModal = document.getElementById('closeSearchModal');\n\n      if (searchBtn && searchModal && closeSearchModal) {\n        searchBtn.addEventListener('click', () => {\n          searchModal.classList.add('active');\n        });\n\n        closeSearchModal.addEventListener('click', () => {\n          searchModal.classList.remove('active');\n        });\n\n        searchModal.addEventListener('click', (e) => {\n          if (e.target === searchModal) {\n            searchModal.classList.remove('active');\n          }\n        });\n      }\n    });\n<\/script>\n\n<header class=\"navbar-header\" id=\"mainHeader\">\n    <div class=\"nav-container\">\n      <div class=\"logo\">\n        <a href=\"#\">\n          <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-12.png\" alt=\"ALTEGRA\" width=\"108\" height=\"50\" style=\"object-fit: contain;\">\n        <\/a>\n      <\/div>\n\n      <nav class=\"nav-menu\" id=\"navMenu\">\n        <ul>\n          <li class=\"nav-item\">\n            <a href=\"#\" class=\"nav-link\">Beranda<\/a>\n          <\/li>\n\n          <!-- Ecosystem Solution Mega Menu -->\n          <li class=\"nav-item has-mega-menu\">\n            <span class=\"nav-link\">Solusi Ekosistem <i class=\"fa-solid fa-chevron-down\"><\/i><\/span>\n            <div class=\"mega-menu-wrapper\">\n              <div class=\"mega-menu-container\">\n\n                <!-- Left Panel (Green Content) -->\n                <div class=\"mega-left-panel\">\n                  <div class=\"mega-top-content\">\n\n                    <!-- Column 1 -->\n                    <div>\n                      <div class=\"mega-section-title\">\n                        <i class=\"fa-solid fa-file-signature\"><\/i>\n                        <a href=\"#\">Arsitektur Laporan Perusahaan<\/a>\n                      <\/div>\n                      <div class=\"mega-items-list\">\n                        <a href=\"#\" class=\"mega-item\">\n                          <span class=\"mega-item-title\"><i class=\"fa-solid fa-angle-right\"><\/i> Laporan Tahunan<\/span>\n                          <span class=\"mega-item-desc\">Pembuatan laporan tahunan berstandar tinggi dan fungsional.<\/span>\n                        <\/a>\n                        <a href=\"#\" class=\"mega-item\">\n                          <span class=\"mega-item-title\"><i class=\"fa-solid fa-angle-right\"><\/i> Sustainability Report<\/span>\n                          <span class=\"mega-item-desc\">Pengungkapan ESG dan narasi dampak berbasis regulasi.<\/span>\n                        <\/a>\n                        <a href=\"#\" class=\"mega-item\">\n                          <span class=\"mega-item-title\"><i class=\"fa-solid fa-angle-right\"><\/i> Executive Summaries<\/span>\n                          <span class=\"mega-item-desc\">Ringkasan strategis untuk navigasi C-Level.<\/span>\n                        <\/a>\n                      <\/div>\n                    <\/div>\n\n                    <!-- Column 2 -->\n                    <div>\n                      <div class=\"mega-section-title\">\n                        <i class=\"fa-solid fa-shield-halved\"><\/i>\n                        <a href=\"#\">Strategic Advisory &amp; Governance<\/a>\n                      <\/div>\n                      <div class=\"mega-items-list\">\n                        <a href=\"#\" class=\"mega-item\">\n                          <span class=\"mega-item-title\"><i class=\"fa-solid fa-angle-right\"><\/i> GCG Implementation &amp; Assessment<\/span>\n                          <span class=\"mega-item-desc\">Penilaian dan penyusunan instrumen tata kelola korporat.<\/span>\n                        <\/a>\n                        <a href=\"#\" class=\"mega-item\">\n                          <span class=\"mega-item-title\"><i class=\"fa-solid fa-angle-right\"><\/i> CSR &amp; Sustainability Blueprint<\/span>\n                          <span class=\"mega-item-desc\">Penyelarasan program sosial dengan strategi bisnis berkelanjutan.<\/span>\n                        <\/a>\n                      <\/div>\n                    <\/div>\n\n                    <!-- Column 3 -->\n                    <div>\n                      <div class=\"mega-section-title\">\n                        <i class=\"fa-solid fa-network-wired\"><\/i>\n                        <span class=\"non-clickable\">Tech &amp; Digital Integration<\/span>\n                      <\/div>\n                      <div class=\"mega-items-list\">\n                        <div class=\"mega-item non-clickable\">\n                          <span class=\"mega-item-title\"><i class=\"fa-solid fa-lock\"><\/i> ESG Compliance Dashboard<\/span>\n                          <span class=\"mega-item-desc\">Sistem informasi internal pelacakan kepatuhan.<\/span>\n                        <\/div>\n                        <div class=\"mega-item non-clickable\">\n                          <span class=\"mega-item-title\"><i class=\"fa-solid fa-lock\"><\/i> Stakeholder Transparency Portal<\/span>\n                          <span class=\"mega-item-desc\">Situs web pelaporan ESG real-time terintegrasi.<\/span>\n                        <\/div>\n                      <\/div>\n                    <\/div>\n\n                  <\/div>\n\n                  <!-- Bottom Partners Slider -->\n                  <div class=\"mega-bottom-partners\">\n                    <span class=\"partners-title\">Our Clients :<\/span>\n                    <div class=\"partners-slider-wrapper\">\n                      <div class=\"partners-track\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-01.png\" alt=\"Partner 1\" class=\"partner-logo-item\" title=\"Partner 1\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-02.png\" alt=\"Partner 2\" class=\"partner-logo-item\" title=\"Partner 2\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-03.png\" alt=\"Partner 3\" class=\"partner-logo-item\" title=\"Partner 3\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-04.png\" alt=\"Partner 4\" class=\"partner-logo-item\" title=\"Partner 4\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-05.png\" alt=\"Partner 5\" class=\"partner-logo-item\" title=\"Partner 5\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-06.png\" alt=\"Partner 6\" class=\"partner-logo-item\" title=\"Partner 6\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-07.png\" alt=\"Partner 7\" class=\"partner-logo-item\" title=\"Partner 7\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-08.png\" alt=\"Partner 8\" class=\"partner-logo-item\" title=\"Partner 8\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-09.png\" alt=\"Partner 9\" class=\"partner-logo-item\" title=\"Partner 9\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-10.png\" alt=\"Partner 10\" class=\"partner-logo-item\" title=\"Partner 10\">\n                        <!-- Duplicated set for seamless loop -->\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-01.png\" alt=\"Partner 1\" class=\"partner-logo-item\" title=\"Partner 1\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-02.png\" alt=\"Partner 2\" class=\"partner-logo-item\" title=\"Partner 2\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-03.png\" alt=\"Partner 3\" class=\"partner-logo-item\" title=\"Partner 3\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-04.png\" alt=\"Partner 4\" class=\"partner-logo-item\" title=\"Partner 4\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-05.png\" alt=\"Partner 5\" class=\"partner-logo-item\" title=\"Partner 5\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-06.png\" alt=\"Partner 6\" class=\"partner-logo-item\" title=\"Partner 6\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-07.png\" alt=\"Partner 7\" class=\"partner-logo-item\" title=\"Partner 7\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-08.png\" alt=\"Partner 8\" class=\"partner-logo-item\" title=\"Partner 8\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-09.png\" alt=\"Partner 9\" class=\"partner-logo-item\" title=\"Partner 9\">\n                        <img decoding=\"async\" src=\"https:\/\/altegra.asia\/wp-content\/uploads\/2026\/08\/logo-altgr-10.png\" alt=\"Partner 10\" class=\"partner-logo-item\" title=\"Partner 10\">\n                      <\/div>\n                    <\/div>\n                  <\/div>\n                <\/div>\n\n                <!-- Right Panel (Locate Us) -->\n                <div class=\"mega-right-panel\">\n                  <h4 class=\"contact-title\">Locate Us<\/h4>\n                  <div class=\"contact-item\">\n                    <div class=\"contact-icon\"><i class=\"fa-solid fa-phone\"><\/i><\/div>\n                    <div class=\"contact-details\">\n                      <strong>Talk To Us<\/strong>\n                      <span>+62-899-504-2000<\/span>\n                    <\/div>\n                  <\/div>\n                  <div class=\"contact-item\">\n                    <div class=\"contact-icon\"><i class=\"fa-regular fa-envelope\"><\/i><\/div>\n                    <div class=\"contact-details\">\n                      <strong>Email Us<\/strong>\n                      <span>info@altegra.asia<\/span>\n                      <span>marketing@altegra.asia<\/span>\n                    <\/div>\n                  <\/div>\n                  <div class=\"social-section\">\n                    <strong>Follow Us<\/strong>\n                    <div class=\"social-links\">\n                      <a href=\"#\"><i class=\"fa-brands fa-youtube\"><\/i><\/a>\n                      <a href=\"#\"><i class=\"fa-brands fa-x-twitter\"><\/i><\/a>\n                      <a href=\"#\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\n                      <a href=\"#\"><i class=\"fa-brands fa-threads\"><\/i><\/a>\n                    <\/div>\n                  <\/div>\n                <\/div>\n\n              <\/div>\n            <\/div>\n          <\/li>\n\n          <!-- Expert Network Dropdown -->\n          <li class=\"nav-item dropdown\">\n            <span class=\"nav-link\">Expert Network <i class=\"fa-solid fa-chevron-down\"><\/i><\/span>\n            <ul class=\"dropdown-menu\">\n              <li><a href=\"#\">Strategic Advisory Board<\/a><\/li>\n              <li><a href=\"#\">Core Team<\/a><\/li>\n              <li><a href=\"#\">Credential<\/a><\/li>\n            <\/ul>\n          <\/li>\n          <li class=\"nav-item\">\n            <a href=\"#\" class=\"nav-link\">Complimentary<\/a>\n          <\/li>\n          <li class=\"nav-item\">\n            <a href=\"#\" class=\"nav-link\">Insight<\/a>\n          <\/li>\n\n          <!-- About Dropdown -->\n          <li class=\"nav-item dropdown\">\n            <span class=\"nav-link\">About <i class=\"fa-solid fa-chevron-down\"><\/i><\/span>\n            <ul class=\"dropdown-menu\">\n              <li><a href=\"#\">Company Overview<\/a><\/li>\n              <li><a href=\"#\">Roadmap<\/a><\/li>\n              <li><a href=\"#\">Certifications<\/a><\/li>\n              <li><a href=\"#\">Career<\/a><\/li>\n              <li><a href=\"#\">Whistleblowing<\/a><\/li>\n            <\/ul>\n          <\/li>\n\n          <li class=\"nav-item\">\n            <a href=\"#\" class=\"nav-link\">Contact Us<\/a>\n          <\/li>\n        <\/ul>\n      <\/nav>\n\n      <div class=\"nav-actions\">\n        <button class=\"icon-btn\" id=\"searchBtn\" aria-label=\"Search\"><i class=\"fa-solid fa-magnifying-glass\"><\/i><\/button>\n        <button class=\"icon-btn mobile-toggle\" id=\"mobileToggle\" aria-label=\"Menu Toggle\"><i class=\"fa-solid fa-bars-staggered\"><\/i><\/button>\n      <\/div>\n    <\/div>\n  <\/header>\n\n  <!-- Hero Section -->\n  <section class=\"hero-section\">\n    <div class=\"hero-container\">\n      <div class=\"hero-badge\">\n        <i class=\"fa-solid fa-sparkles\"><\/i> ALTEGRA - Corporate Reporting &amp; ESG Solutions\n      <\/div>\n      <h1 class=\"hero-title\">Architecting Sustainable &amp; Transparent Futures<\/h1>\n      <p class=\"hero-description\">\n        Integrated solutions for Annual Report preparation, ESG Compliance, Corporate Governance, and Digital Transformation of Global-Standard Financial Reporting.\n      <\/p>\n      <div class=\"hero-buttons\">\n<a href=\"#\" class=\"btn-altegra-arrow\">\n  <span>Explore Ecosystem<\/span>\n  <span class=\"btn-icon-wrapper\">\n    <i class=\"fa-solid fa-arrow-right\"><\/i>\n  <\/span>\n<\/a>\n        <a href=\"#\" class=\"btn-secondary\">Consult Our Experts<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Search Modal -->\n  <div class=\"modal-overlay\" id=\"searchModal\">\n    <div class=\"modal-box\">\n      <button class=\"close-modal\" id=\"closeSearchModal\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>\n      <h3 style=\"margin-bottom: 16px; color: #55df77;\">Cari Layanan &amp; Laporan<\/h3>\n      <input type=\"text\" placeholder=\"Ketik kata kunci...\" style=\"width: 100%; padding: 14px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); color: #fff; outline: none; font-size: 15px;\">\n    <\/div>\n  <\/div>\n\n\n\n<!-- ========================================== -->\n<!-- 1. KODE HTML SEGMEN 4                      -->\n<!-- Masukkan ke dalam Blok Custom HTML         -->\n<!-- ========================================== -->\n<section class=\"expertise-section\" id=\"segment-4\">\n  <div class=\"expertise-container\">\n    \n    <!-- Header Bagian Atas -->\n    <div class=\"expertise-header\">\n      <div class=\"header-left\">\n        <div class=\"section-label\">\n          <i class=\"fa-solid fa-share-nodes\"><\/i> \u2014 Our Expertise Ecosystem\n        <\/div>\n        <h2 class=\"section-title\">Integrated Compliance &amp; <br>Sustainability Architecture.<\/h2>\n      <\/div>\n      \n      <!-- Tombol CTA -->\n      <div class=\"header-right\">\n        <a href=\"#\" class=\"btn-altegra-arrow\">\n          <span>Explore Our Ecosystem<\/span>\n          <span class=\"btn-icon-wrapper\">\n            <i class=\"fa-solid fa-arrow-right\"><\/i>\n          <\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- Konten Tab (Kiri Tab, Kanan Detail) -->\n    <div class=\"expertise-body\">\n      \n      <!-- Sisi Kiri: Menu Tab -->\n      <div class=\"expertise-tabs\">\n        <button class=\"tab-btn active\" data-target=\"tab-reporting\">\n          <i class=\"fa-solid fa-chart-line\"><\/i> Reporting Architecture\n        <\/button>\n        <button class=\"tab-btn\" data-target=\"tab-governance\">\n          <i class=\"fa-solid fa-scale-balanced\"><\/i> Governance Advisory\n        <\/button>\n        <button class=\"tab-btn\" data-target=\"tab-sustainability\">\n          <i class=\"fa-solid fa-leaf\"><\/i> Sustainability Strategy\n        <\/button>\n        <button class=\"tab-btn\" data-target=\"tab-digital\">\n          <i class=\"fa-solid fa-network-wired\"><\/i> ESG Digital Integration\n        <\/button>\n      <\/div>\n\n      <!-- Sisi Kanan: Konten Dinamis -->\n      <div class=\"expertise-content-wrapper\">\n        \n        <div id=\"tab-reporting\" class=\"tab-content active\">\n          <div class=\"content-card\">\n            <div class=\"content-img\">\n              <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556761175-5973dc0f32d7?q=80&#038;w=800&#038;auto=format&#038;fit=crop\" alt=\"Reporting Architecture\">\n            <\/div>\n            <div class=\"content-text\">\n              <h3>Transforming Data into Corporate Reputation<\/h3>\n              <p>Kami merancang Annual Report dan Sustainability Report berstandar global untuk memperkuat reputasi dan kepercayaan pemangku kepentingan dan menjadikan nya laporan yang strategis dan transparan.<\/p>\n              <ul class=\"check-list\">\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Kepatuhan komprehensif terhadap regulasi dan standar pelaporan global.<\/li>\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Struktur tata letak fungsional untuk navigasi informasi strategis.<\/li>\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Konsolidasi data berintegritas tinggi dan siap audit.<\/li>\n              <\/ul>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div id=\"tab-governance\" class=\"tab-content\">\n          <div class=\"content-card\">\n            <div class=\"content-img\">\n              <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?q=80&#038;w=800&#038;auto=format&#038;fit=crop\" alt=\"Governance Advisory\">\n            <\/div>\n            <div class=\"content-text\">\n              <h3>Evidence-Based Governance &amp; Risk Navigation<\/h3>\n              <p>Membangun ketahanan organisasi melalui tata kelola yang terukur. Kami berfokus pada pemetaan kesenjangan kepatuhan dan penguatan struktur kontrol internal secara presisi untuk memitigasi risiko sistemik.<\/p>\n              <ul class=\"check-list\">\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Asesmen efektivitas kontrol internal dan pemetaan risiko makro.<\/li>\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Perancangan instrumen Good Corporate Governance (GCG) yang implementatif.<\/li>\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Validasi independen berbasis kerangka kerja dan scorecard otoritas.<\/li>\n              <\/ul>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div id=\"tab-sustainability\" class=\"tab-content\">\n          <div class=\"content-card\">\n            <div class=\"content-img\">\n              <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600880292203-757bb62b4baf?q=80&#038;w=800&#038;auto=format&#038;fit=crop\" alt=\"Sustainability Strategy\">\n            <\/div>\n            <div class=\"content-text\">\n              <h3>Aligning Social Impact with Executive Vision<\/h3>\n              <p>Menyelaraskan inisiatif keberlanjutan dengan target fundamental bisnis. Kami menyusun blueprint ESG dan CSR yang berorientasi pada penciptaan nilai jangka panjang dan dampak sosial yang terukur.<\/p>\n              <ul class=\"check-list\">\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Integrasi inisiatif strategis dengan kerangka kerja ESG terkini.<\/li>\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Perumusan peta jalan program berorientasi dampak jangka panjang.<\/li>\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Penguatan visibilitas reputasi melalui komunikasi stakeholder.<\/li>\n              <\/ul>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div id=\"tab-digital\" class=\"tab-content\">\n          <div class=\"content-card\">\n            <div class=\"content-img\">\n              <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?q=80&#038;w=800&#038;auto=format&#038;fit=crop\" alt=\"ESG Digital Integration\">\n            <\/div>\n            <div class=\"content-text\">\n              <h3>Digitalizing Compliance &amp; Centralized Monitoring<\/h3>\n              <p>Modernisasi pelaporan menuju ekosistem data yang dinamis. Kami merancang infrastruktur digital dasar untuk mengonsolidasikan metrik keberlanjutan secara terpusat, interaktif, dan real-time.<\/p>\n              <ul class=\"check-list\">\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Dasbor analitik internal untuk pelacakan metrik kepatuhan operasional.<\/li>\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Otomatisasi sistem untuk efisiensi pengumpulan data ESG lintas divisi.<\/li>\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Portal transparansi interaktif untuk komunikasi stakeholder tingkat lanjut.<\/li>\n              <\/ul>\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n        <!-- Konten Tab 3: Sustainability Strategy -->\n        <div id=\"tab-sustainability\" class=\"tab-content\">\n          <div class=\"content-card\">\n            <div class=\"content-img\">\n              <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600880292203-757bb62b4baf?q=80&amp;w=800&amp;auto=format&amp;fit=crop\" alt=\"Sustainability Strategy\">\n            <\/div>\n            <div class=\"content-text\">\n              <h3>Aligning Social Impact with Executive Vision<\/h3>\n              <p>Kami membantu merancang cetak biru keberlanjutan dan program tanggung jawab sosial (CSR) yang terukur, relevan, dan terintegrasi langsung dengan target fundamental operasi bisnis perusahaan Anda.<\/p>\n              <ul class=\"check-list\">\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Pemetaan inisiatif strategis berbasis kerangka kerja ESG terkini.<\/li>\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Perancangan peta jalan program yang berorientasi pada dampak jangka panjang.<\/li>\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Inisiatif penguatan reputasi yang dirancang khusus untuk stakeholder.<\/li>\n              <\/ul>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Konten Tab 4: ESG Digital Integration -->\n        <div id=\"tab-digital\" class=\"tab-content\">\n          <div class=\"content-card\">\n            <div class=\"content-img\">\n              <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?q=80&amp;w=800&amp;auto=format&amp;fit=crop\" alt=\"ESG Digital Integration\">\n            <\/div>\n            <div class=\"content-text\">\n              <h3>Digitalizing Compliance for Centralized Monitoring<\/h3>\n              <p>Mempersiapkan korporasi menuju era pelaporan interaktif. Kami merancang infrastruktur digital dasar untuk mengonsolidasikan metrik keberlanjutan secara terpusat, mengubah dokumen statis menjadi ekosistem data yang dinamis.<\/p>\n              <ul class=\"check-list\">\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Pengembangan dasbor internal untuk pelacakan kepatuhan operasional.<\/li>\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Sistem otomasi untuk efisiensi pengumpulan data ESG lintas divisi.<\/li>\n                <li><i class=\"fa-solid fa-circle-check\"><\/i> Portal transparansi real-time untuk komunikasi stakeholder tingkat lanjut.<\/li>\n              <\/ul>\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ========================================== -->\n<!-- 2. KODE JAVASCRIPT                         -->\n<!-- Tetap masukkan di Blok Custom HTML yang    -->\n<!-- sama, tepat di bawah tag <\/section> di atas-->\n<!-- ========================================== -->\n<script>\n  document.addEventListener('DOMContentLoaded', function() {\n    const tabButtons = document.querySelectorAll('.tab-btn');\n    const tabContents = document.querySelectorAll('.tab-content');\n\n    tabButtons.forEach(function(button) {\n      button.addEventListener('click', function() {\n        \/\/ Hapus class 'active' dari semua tombol dan konten\n        tabButtons.forEach(btn => btn.classList.remove('active'));\n        tabContents.forEach(content => content.classList.remove('active'));\n\n        \/\/ Tambahkan class 'active' ke tombol yang diklik\n        this.classList.add('active');\n\n        \/\/ Tampilkan konten yang sesuai dengan data-target\n        const targetId = this.getAttribute('data-target');\n        const targetContent = document.getElementById(targetId);\n        \n        if (targetContent) {\n          targetContent.classList.add('active');\n        }\n      });\n    });\n  });\n<\/script>\n\n<!-- ========================================== -->\n<!-- 3. KODE CSS                                -->\n<!-- Masukkan ke Appearance > Customize >       -->\n<!-- Additional CSS (atau di file style.css)    -->\n<!-- ========================================== -->\n<style>\n\/* Reset Font (Opsional jika sudah diatur di tema) *\/\n.expertise-section {\n  font-family: 'Plus Jakarta Sans', sans-serif;\n  background-color: #f7f9f8; \n  \n  \/* Membuat ujung kanan & kiri atas melengkung *\/\n  border-radius: 48px 48px 0 0; \n  \n  \/* Menarik segmen ini ke atas agar menimpa bagian bawah hero section *\/\n  margin-top: -48px; \n  position: relative;\n  z-index: 10; \n  padding: 80px 24px 100px 24px;\n}\n\n.expertise-container {\n  max-width: 1320px;\n  margin: 0 auto;\n}\n\n\/* Header *\/\n.expertise-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  margin-bottom: 50px;\n  border-bottom: 1px solid rgba(0,0,0,0.06);\n  padding-bottom: 30px;\n}\n\n.section-label {\n  font-size: 14px;\n  font-weight: 700;\n  color: #111827;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.section-title {\n  font-size: 40px;\n  font-weight: 800;\n  color: #07150c;\n  line-height: 1.2;\n  letter-spacing: -1px;\n}\n\n\/* Layout Tab & Content *\/\n.expertise-body {\n  display: flex;\n  gap: 40px;\n  align-items: stretch;\n}\n\n\/* Tab Menu *\/\n.expertise-tabs {\n  width: 310px;\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  position: relative;\n  z-index: 20; \/* Memastikan tombol tidak tertutup elemen lain *\/\n}\n\n.tab-btn {\n  background: #ffffff;\n  border: 1px solid transparent;\n  color: #8c9791; \/* Warna teks redup saat tidak aktif *\/\n  font-family: inherit;\n  font-weight: 700;\n  font-size: 17px;\n  padding: 16px 20px;\n  text-align: left;\n  border-radius: 12px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  box-shadow: 0 4px 15px rgba(0,0,0,0.02);\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.tab-btn i {\n  font-size: 16px;\n  color: #8c9791;\n  transition: all 0.3s ease;\n}\n\n\/* Hover Effect: Background berubah, teks TETAP HITAM PEKAT *\/\n.tab-btn:hover {\n  background: #f0fdf4;\n  border-color: rgba(85, 223, 119, 0.4);\n  color: #000000 !important; \n}\n\n.tab-btn:hover i {\n  color: #000000 !important;\n}\n\n\/* Active State *\/\n.tab-btn.active {\n  background: linear-gradient(90deg, #55df77 0%, #a3f4b5 100%);\n  color: #000000 !important;\n  box-shadow: 0 10px 20px rgba(85, 223, 119, 0.25);\n  border-color: transparent;\n}\n\n.tab-btn.active i {\n  color: #000000 !important;\n}\n\n\/* Content Area *\/\n.expertise-content-wrapper {\n  flex: 1;\n  position: relative;\n  z-index: 20;\n}\n\n.tab-content {\n  display: none;\n  animation: fadeIn 0.4s ease-in-out;\n}\n\n.tab-content.active {\n  display: block;\n}\n\n.content-card {\n  background: #ffffff;\n  border-radius: 24px;\n  padding: 12px;\n  display: flex;\n  gap: 30px;\n  box-shadow: 0 15px 35px rgba(0,0,0,0.03);\n  align-items: center;\n}\n\n.content-img {\n  width: 45%;\n  height: 380px;\n  border-radius: 16px;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.content-img img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.content-text {\n  padding: 20px 30px 20px 10px;\n  flex: 1;\n}\n\n.content-text h3 {\n  font-size: 24px;\n  font-weight: 800;\n  color: #07150c;\n  margin-bottom: 16px;\n  line-height: 1.3;\n}\n\n.content-text p {\n  font-size: 14.5px;\n  color: #4b5563;\n  line-height: 1.6;\n  margin-bottom: 24px;\n}\n\n.check-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.check-list li {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  font-size: 13.5px;\n  color: #111827;\n  font-weight: 600;\n  line-height: 1.5;\n}\n\n.check-list li i {\n  color: #000000;\n  font-size: 15px;\n  margin-top: 2px;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\/* Responsive *\/\n@media (max-width: 1024px) {\n  .expertise-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 20px;\n  }\n  .expertise-body {\n    flex-direction: column;\n  }\n  .expertise-tabs {\n    width: 100%;\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n  .tab-btn {\n    flex: 1 1 calc(50% - 12px);\n  }\n  .content-card {\n    flex-direction: column;\n    padding: 20px;\n  }\n  .content-img {\n    width: 100%;\n    height: 300px;\n  }\n  .content-text {\n    padding: 10px 10px 20px 10px;\n  }\n}\n@media (max-width: 640px) {\n  .tab-btn {\n    flex: 1 1 100%;\n  }\n  .section-title {\n    font-size: 28px;\n  }\n  .expertise-section {\n    border-radius: 30px 30px 0 0; \n    margin-top: -30px;\n  }\n}\n<\/style>","protected":false},"excerpt":{"rendered":"<p>Home Ecosystem Solution Corporate Reporting Architecture Annual Report Pembuatan laporan tahunan berstandar tinggi dan fungsional. Sustainability Report Pengungkapan ESG dan narasi dampak berbasis regulasi. Executive Summaries Ringkasan strategis untuk navigasi C-Level. Strategic Advisory &amp; Governance GCG Implementation &amp; Assessment Penilaian dan penyusunan instrumen tata kelola korporat. CSR &amp; Sustainability Blueprint Penyelarasan program sosial dengan strategi &#8230; <a title=\"Beranda\" class=\"read-more\" href=\"https:\/\/altegra.asia\/id\/\" aria-label=\"Baca selengkapnya tentang Home\">Baca Selengkapnya<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-90","page","type-page","status-publish"],"amp_enabled":false,"_links":{"self":[{"href":"https:\/\/altegra.asia\/id\/wp-json\/wp\/v2\/pages\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/altegra.asia\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/altegra.asia\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/altegra.asia\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/altegra.asia\/id\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":24,"href":"https:\/\/altegra.asia\/id\/wp-json\/wp\/v2\/pages\/90\/revisions"}],"predecessor-version":[{"id":172,"href":"https:\/\/altegra.asia\/id\/wp-json\/wp\/v2\/pages\/90\/revisions\/172"}],"wp:attachment":[{"href":"https:\/\/altegra.asia\/id\/wp-json\/wp\/v2\/media?parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}