/* ==========================================================================
   1. RESET STRUKTUR UTAMA HEADER & WRAPPER (DESKTOP BASE)
   ========================================================================== */
html body .pkp_structure_head {
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    padding-bottom: 0 !important;
    position: relative !important;
}

html body .pkp_head_wrapper {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px 24px 0 24px !important;
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
}

/* Posisi Logo Desktop */
html body .pkp_site_name_wrapper {
    position: absolute !important;
    top: 20px !important;
    left: 24px !important;
    transform: none !important;
    display: inline-block !important;
    z-index: 10 !important;
}

@media (min-width: 992px) {
    html body .pkp_site_name img {
        display: block !important;
        max-height: 120px !important; 
        width: auto !important;
        height: auto !important;
    }
}

/* Posisi Tombol Akun User (Kanan Atas Desktop) */
html body .pkp_navigation_user_wrapper,
html body #navigationUserWrapper,
html body .pkp_structure_nav {
    position: absolute !important;
    top: 50px !important;
    right: 24px !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    z-index: 11 !important;
}

/* ==========================================================================
   2. BALOK EMAS NAVIGASI (GAYA BASE DESKTOP)
   ========================================================================== */
@media (min-width: 992px) {
    html body #mainNavigationContainer,
    html body .pkp_navigation_primary_row,
    html body .pkp_navigation_primary_wrapper,
    html body #mainNavigation,
    html body ul.pkp_navigation_primary,
    html body .pkp_navigation_primary li {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    html body .pkp_navigation_primary_row {
        background-color: #D2AF6D !important; /* Warna Emas */
        border-top: 1px solid #e4e7ec !important;
        border-bottom: 1px solid #e4e7ec !important;
        margin: 140px -24px 0 -24px !important; 
        padding: 0 !important;
        clear: both !important;
    }

    html body .pkp_navigation_primary_wrapper {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 24px !important;
        box-sizing: border-box !important;
    }

    html body ul.pkp_navigation_primary {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    html body ul.pkp_navigation_primary > li {
        display: inline-block !important;
        float: none !important;
        white-space: nowrap !important;
    }
}

/* Style Text Menu Utama Global */
html body ul.pkp_navigation_primary > li > a,
html body ul.pkp_navigation_primary > li > span {
    display: block !important;
    color: #222222 !important; 
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 14px 20px !important;
    line-height: 1.2 !important;
    transition: all 0.2s ease !important;
}

html body ul.pkp_navigation_primary > li > a:hover {
    color: #ffffff !important;
    background-color: #bfa063 !important;
    text-decoration: none !important;
}

/* ==========================================================================
   3. GLOBAL CLEANER (HAPUS SEARCH)
   ========================================================================== */
html body .pkp_nav_search,
html body li[class*="search"],
html body form.pkp_search,
html body .pkp_search,
html body .pkp_search_toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

html body #pkp_content_main {
    padding-top: 35px !important;
}

/* ══════════════════════════════════════════════
   4. PERBAIKAN RESPONSIVE MOBILE - TOGGLE MECHANIC LOCK (FINAL)
   ============================================== */
@media (max-width: 991px) {
  html body .pkp_structure_head {
    min-height: auto !important;
    height: auto !important;
    padding: 14px 0 !important;
    position: relative !important;
    display: block !important;
  }

  html body .pkp_head_wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    padding: 0 16px 15px 16px !important; 
    position: relative !important;
  }

  /* Kunci Logo Tengah di Mobile */
  html body .pkp_site_name_wrapper {
    position: static !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 60px !important; 
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 50px !important;
  }

  html body .pkp_structure_head .pkp_head_wrapper .pkp_site_name_wrapper .pkp_site_name img {
    width: 42vw !important;       
    max-width: 210px !important;  
    min-width: 140px !important;  
    height: auto !important;
    max-height: none !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* WARNA EMAS BURGER / CLOSE BUTTON */
  html body a[id*="Menu"], 
  html body button[class*="toggle"], 
  html body a[class*="toggle"], 
  html body .pkp_navigation_toggle {
    position: absolute !important;
    top: 25px !important; 
    left: 14px !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    z-index: 9999999 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border: none !important;
    background: transparent !important;
  }

  html body a[id*="Menu"]::before, html body #closeMenu::before, html body #openMenu::before {
    color: #D2AF6D !important;
    -webkit-text-fill-color: #D2AF6D !important;
    font-size: 26px !important;
    filter: invert(79%) sepia(21%) saturate(992%) hue-rotate(341deg) brightness(91%) contrast(87%) !important;
  }

  /* ------------------------------------------------------------
     KONDISI 1: SEMBUNYIKAN AREA EMAS SECARA DEFAULT SAAT MENU TERTUTUP
     ------------------------------------------------------------ */
  html body .pkp_navigation_primary_row {
    display: none !important; /* Kunci sembunyi total agar halaman bersih */
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* ------------------------------------------------------------
     KONDISI 2: TAMPILKAN HANYA JIKA TOMBOL BURGER AKTIF (.in / .open / .is_open)
     ------------------------------------------------------------ */
  
  /* Menembak target class status expand yang disuntikkan Bootstrap OJS pada row menu */
  html body .pkp_navigation_primary_row.in,
  html body .pkp_navigation_primary_row.open,
  html body .is_open .pkp_navigation_primary_row,
  html body .pkp_structure_head.is_open .pkp_navigation_primary_row,
  html body #mainNavigationContainer.in .pkp_navigation_primary_row {
    display: block !important; /* Buka gerbang menu */
    visibility: visible !important;
    opacity: 1 !important;
    
    position: absolute !important;
    top: 100% !important; 
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #D2AF6D !important; /* Balok emas seragam beranda */
    padding: 16px 0 !important;
    margin: 0 !important;
    z-index: 999998 !important;
    transform: none !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15) !important;
    border-bottom: 4px solid #bfa063 !important;
  }

  html body .pkp_navigation_primary_wrapper {
    display: flex !important;
    flex-direction: column !important; /* Alur vertikal ke bawah murni */
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  /* UNTUK KELANCARAN STRUKTUR INTERIOR */
  html body #mainNavigationContainer,
  html body #mainNavigation,
  html body ul.pkp_navigation_primary {
    display: block !important;
    height: auto !important;
  }

  /* A. REGISTER ATAS, LOGIN BAWAH */
  html body .pkp_structure_nav,
  html body .pkp_navigation_user_wrapper,
  html body #navigationUserWrapper {
    position: static !important; 
    display: block !important;
    width: 100% !important;
    max-width: 240px !important;
    margin: 0 auto 16px auto !important; 
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body #navigationUser,
  html body #navigationUser li {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    clear: both !important;
  }

  html body #navigationUser li { margin-bottom: 10px !important; }
  html body #navigationUser li:last-child { margin-bottom: 0 !important; }

  html body #navigationUser li a {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 16px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    color: #222222 !important;
    background-color: #ffffff !important; 
    border-radius: 4px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
  }

  /* B. HOME, CURRENT, ARCHIVES, ABOUT (DI BAWAH LOGIN) */
  html body ul.pkp_navigation_primary {
    max-width: 240px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  html body ul.pkp_navigation_primary > li {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important; 
    padding: 0 !important;
    float: none !important;
    clear: both !important;
  }

  html body ul.pkp_navigation_primary > li:last-child { margin-bottom: 0 !important; }

  html body ul.pkp_navigation_primary > li > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 16px !important;
    color: #ffffff !important; 
    background-color: rgba(0,0,0,0.15) !important; 
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  html body ul.pkp_navigation_primary > li > a:hover {
    background-color: #ffffff !important;
    color: #222222 !important;
  }
}