/* ================================================================
   IFRAME MULTIMEDIA GROUP — GLOBAL TOKENS & RESET
   ================================================================ */
:root {
  --orange:        #FF4D00;
  --orange-deep:   #C73D00;
  --paper:         #FAF8F4;
  --stage:         #15130F;
  --stage-soft:    #211D17;
  --ink:           #2B2722;
  --ink-soft:      #6F695D;
  --line:          #DCD5C8;
  --line-dark:     #3A352C;
  --f-display: 'Plus Jakarta Sans', sans-serif;
  --f-body:    'Inter', sans-serif;
  --maxw: 1280px;
  --gap-section: clamp(72px, 10vw, 140px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

.kicker-text, .section-head__eyebrow {
  font-family: var(--f-body); font-size: 16px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange);
}
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ================================================================
   LOADER
   ================================================================ */
.loader-overlay {
  position: fixed; inset: 0; z-index: 9999; background: var(--stage);
  display: flex; align-items: center; justify-content: center;
  clip-path: circle(150% at 50% 50%); transition: clip-path 1.05s cubic-bezier(.76,0,.24,1);
}
.loader-overlay--done { clip-path: circle(0% at 50% 50%); }
.loader-overlay__aperture { opacity: .9; animation: apertureSpin 1.1s cubic-bezier(.76,0,.24,1) forwards; }
@keyframes apertureSpin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(45deg) scale(.2); opacity: 0; }
}

/* ================================================================
   HEADER & MEGA MENU (Ultimate Chrome Bug Fix Applied)
   ================================================================ */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; }

.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: transparent; transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

.site-header.is-scrolled::before {
  background: rgba(250,248,244,.95); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.nav {
  max-width: var(--maxw); 
  margin: 0 auto; 
  display: flex; 
  align-items: center;
  justify-content: space-between; 
  padding: 10px clamp(20px, 4vw, 40px);
  position: relative; 
  z-index: 10;
}

.nav__brand { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--stage); }
.site-header:not(.is-scrolled) .nav__brand { color: var(--paper); }
.nav__brand-mark { color: var(--orange); flex-shrink: 0; }

.nav__links { display: flex; align-items: center; gap: 32px; position: relative; flex-wrap: nowrap; }
.nav__dropdown { position: relative; display: flex; align-items: center; }

.nav__direct-link, .nav__dropdown-btn {
  font-family: var(--f-body); font-size: 14px; font-weight: 500; color: var(--stage);
  position: relative; padding: 6px 0; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px; transition: color 0.3s ease; white-space: nowrap;
}

.site-header:not(.is-scrolled) .nav__direct-link, .site-header:not(.is-scrolled) .nav__dropdown-btn { color: var(--paper); }
.nav__direct-link::after, .nav__dropdown-btn::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--orange); transition: right .3s ease;
}
.nav__direct-link:hover::after, .nav__dropdown-btn:hover::after { right: 0; }

/* NESTED DROPDOWN MENU */
.nav__dropdown-btn svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.nav__dropdown:hover .nav__dropdown-btn svg, .nav__dropdown.is-active .nav__dropdown-btn svg { transform: rotate(180deg); }

.nav__mega-menu.nested-dropdown {
  position: absolute; top: calc(100% + 15px); left: 0; width: 260px;
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 16px; padding: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08), 0 2px 10px rgba(0,0,0,0.03);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s; transition-delay: 0.1s; pointer-events: none;
}

.nav__dropdown:hover .nav__mega-menu.nested-dropdown, .nav__dropdown.is-active .nav__mega-menu.nested-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; transition-delay: 0s;
}
.nav__mega-menu.nested-dropdown::before { content: ''; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; }

.dropdown-list, .submenu { list-style: none; margin: 0; padding: 0; }
.dropdown-item { position: relative; }
.dropdown-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-radius: 10px; font-family: var(--f-body); font-size: 14px; font-weight: 600; color: var(--ink); transition: background 0.25s ease, color 0.25s ease;
}
.dropdown-link span { pointer-events: none; }
.arrow-right { color: var(--ink-soft); transition: transform 0.25s ease, color 0.25s ease; }
.dropdown-link:hover, .dropdown-item:hover > .dropdown-link { background: rgba(255, 77, 0, 0.05); color: var(--orange); }
.dropdown-item:hover > .dropdown-link .arrow-right { color: var(--orange); transform: translateX(3px); }

/* LEVEL 2: Sub-Menu Flyout */
.submenu {
  position: absolute; top: -10px; left: calc(100% + 5px); width: 250px;
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 16px; padding: 10px; box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  opacity: 0; visibility: hidden; transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s; pointer-events: none;
}
.submenu::before { content: ''; position: absolute; top: -20px; bottom: -20px; left: -20px; width: 20px; }
.dropdown-item:hover .submenu { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; }
.submenu a { display: block; padding: 10px 16px; border-radius: 8px; font-family: var(--f-body); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.submenu a:hover { color: var(--orange); background: rgba(255, 77, 0, 0.03); transform: translateX(4px); }

/* MOBILE NAV TOGGLES & MENU */
.nav__toggle { display: none; flex-direction: column; gap: 5px; width: 32px; height: 24px; background: none; border: none; cursor: pointer; padding: 0; }
.nav__toggle span { display: block; height: 2px; background: var(--stage); border-radius: 2px; transition: transform .3s ease, opacity .3s ease, background-color .3s ease; }
.site-header:not(.is-scrolled) .nav__toggle span { background: var(--paper); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 400; background: var(--stage);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .5s cubic-bezier(.76,0,.24,1), opacity .4s ease, visibility .4s;
}
.mobile-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-nav a { font-family: var(--f-display); font-size: 32px; font-weight: 700; color: var(--paper); }

/* ================================================================
   NAV CTA (CONTACT US BUTTON)
   ================================================================ */
.nav__cta {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--paper) !important; 
  background-color: var(--orange); 
  padding: 10px 24px;
  border-radius: 50px; 
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav__cta:hover {
  background-color: var(--orange-deep);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 77, 0, 0.3);
}

@media (max-width: 1024px) {
  .nav__cta { display: none; }
}

/* ================================================================
   LOGO IMAGE SIZING & SCROLL BEHAVIOR
   ================================================================ */
.nav__brand-img {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: filter 0.35s ease; 
}

.site-header.is-scrolled .nav__brand-img,
.site-header.scrolled .nav__brand-img,
.site-header.sticky .nav__brand-img {
  filter: brightness(0);
}

/* ================================================================
   SECTION HEAD (Reusable) & REVEAL
   ================================================================ */
.section-head { max-width: 680px; margin: 0 auto var(--gap-section); padding: 0 24px; text-align: center; }
.section-head__eyebrow { font-family: var(--f-body); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; }
.section-head__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(32px, 4.5vw, 48px); color: var(--stage); letter-spacing: -.02em; line-height: 1.1; }
.section-head__sub { margin-top: 16px; color: var(--ink-soft); font-size: 17px; }
.section-head--dark .section-head__title { color: var(--paper); }
.section-head--dark .section-head__sub { color: rgba(250,248,244,.65); }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ================================================================
   1. MICRO-FOOTER STYLES
   ================================================================ */
.micro-footer {
  background: var(--stage);
  color: rgba(250, 248, 244, 0.5);
  padding: 24px 0;
  font-family: var(--f-body);
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.micro-footer__inner {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.micro-footer__links { display: flex; gap: 24px; }
.micro-footer__links a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
.micro-footer__links a:hover { color: var(--orange); }

/* ================================================================
   2. FULL FOOTER STYLES (EXTREME COMPACT)
   ================================================================ */
.site-footer {
  background: var(--stage);
  color: rgba(250, 248, 244, 0.7);
  padding: 24px 0 16px; 
  font-family: var(--f-body);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1.5fr; 
  gap: 24px; 
  margin-bottom: 20px; 
}

.footer__logo-img {
  width: 100%;
  max-width: 100px; 
  height: auto;
  margin: 0 0 8px -8px; 
  display: block;
  object-fit: contain;
  object-position: left center;
}

.footer__desc {
  font-size: 12.5px; 
  line-height: 1.4; 
  max-width: 300px; 
}

.footer__title {
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 700;
  color: #FFF;
  margin-bottom: 8px; 
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer__links ul {
  display: flex;
  flex-direction: column;
  gap: 4px; 
}

.footer__links ul.grid-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px; 
}

.footer__links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 12.5px; 
  transition: all 0.3s ease;
  display: inline-block;
}

.footer__links a:hover {
  color: var(--orange);
  transform: translateX(3px); 
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 16px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11.5px; 
}

.footer__copy { margin: 0; }

.footer__socials {
  display: flex;
  gap: 8px; 
}

.social-link {
  width: 28px; 
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05); 
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6); 
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-link svg {
  width: 12px;
  height: 12px;
}

.social-link:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #FFF;
  transform: translateY(-2px); 
  box-shadow: 0 4px 8px rgba(255, 77, 0, 0.2);
}

.footer__legal {
  display: flex;
  gap: 16px;
}

.footer__legal a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__legal a:hover {
  color: var(--orange);
}

/* ================================================================
   MOBILE RULES & FIXES (Tergabung)
   ================================================================ */
@media (max-width: 1024px) {
  /* Footer Mobile */
  .footer__top {
    grid-template-columns: 1fr; 
    gap: 24px;
  }
  .footer__links ul.grid-list {
    grid-template-columns: 1fr 1fr; 
  }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  /* Header & Menu Mobile */
  .nav__links { display: none; } 
  .nav { display: flex; z-index: 999 !important; }
  
  .nav__toggle {
    display: flex;
    padding: 12px;
    margin-right: -12px;
    width: 56px; 
    height: 48px; 
    justify-content: center; 
  }

  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  
  .nav__toggle[aria-expanded="true"] span { background-color: var(--paper) !important; }
  .site-header:has(.nav__toggle[aria-expanded="true"]) .nav__brand-img { filter: brightness(0) invert(1) !important; }

  /* Membuat Background Menu Mobile Bisa Di-Scroll */
  .mobile-nav {
    justify-content: flex-start !important; 
    padding-top: 120px; 
    padding-bottom: 60px;
    overflow-y: auto; 
  }
  
  .mobile-nav-cta {
    margin-top: 24px;
    background-color: var(--orange);
    color: #FFFFFF !important;
    padding: 14px 40px;
    border-radius: 50px;
    font-size: 20px !important;
    box-shadow: 0 8px 24px rgba(255, 77, 0, 0.3);
  }
}

/* ================================================================
   MOBILE FIX: NESTED DROPDOWN MENU (2-LEVEL ACCORDION)
   ================================================================ */
.mobile-dropdown { display: flex; flex-direction: column; align-items: center; width: 100%; }
.mobile-dropdown-btn { 
  background: none; border: none; color: var(--paper); 
  font-family: var(--f-display); font-size: 32px; font-weight: 700; 
  display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 0; 
  transition: color 0.3s; 
}
.mobile-dropdown-btn svg { transition: transform 0.3s ease; }
.mobile-dropdown-btn.is-active { color: var(--orange); }
.mobile-dropdown-btn.is-active svg { transform: rotate(180deg); }

/* Parent Submenu */
.mobile-submenu { 
  max-height: 0; overflow: hidden; transition: max-height 0.5s ease; 
  display: flex; flex-direction: column; width: 100%; padding: 0 32px; 
}

/* Child Nested Level */
.mobile-nested-dropdown { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); }
.mobile-nested-dropdown:first-child { margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.05); }

.mobile-nested-btn {
  background: none; border: none; color: rgba(250,248,244,0.8);
  font-family: var(--f-body); font-size: 16px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; width: 100%; cursor: pointer; transition: color 0.3s;
}
.mobile-nested-btn svg { width: 18px; height: 18px; transition: transform 0.3s ease; }
.mobile-nested-btn.is-active { color: var(--orange); }
.mobile-nested-btn.is-active svg { transform: rotate(180deg); }

.mobile-nested-submenu {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
  display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px;
}
.mobile-nav .mobile-nested-submenu a {
  font-family: var(--f-body); font-size: 14px; font-weight: 400; color: rgba(250,248,244,0.5);
  padding: 10px 0 10px 16px; border-left: 2px solid rgba(255,255,255,0.1); 
  margin-left: 8px; text-align: left; display: block;
}
.mobile-nav .mobile-nested-submenu a:hover { color: var(--orange); border-left-color: var(--orange); }