/* ==========================================================
   NAVBAR GOSIVA — FINAL CLEAN VERSION
   Desktop : Topbar + Menubar (2 baris)
   Mobile  : Sidebar slide-right + accordion
========================================================== */

/* ==========================================================
   ROOT VARIABLES
========================================================== */
:root {
  --gs-green: #0e6b4f;
  --gs-dark: #0b3a24;
  --gs-muted: #6b7280;
  --gs-border: #e5e7eb;
  --gs-bg: #ffffff;
}

/* ==========================================================
   TOPBAR (ROW 1)
========================================================== */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--gs-border);
}

.topbar-flex {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* BRAND */
.brand-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logo {
  height: 50px;
}

.brand-text {
  line-height: 1.2;
}

.bt-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gs-dark);
}

.bt-sub {
  font-size: 12px;
  color: var(--gs-muted);
}

/* RIGHT AREA */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* LANGUAGE DESKTOP */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-switch a {
  font-size: 14px;
  font-weight: 700;
  color: var(--gs-muted);
  text-decoration: none;
}

.lang-switch .active-lang {
  color: var(--gs-green);
}

/* HAMBURGER */
.hamburger {
  display: none;
  width: 34px;
  height: 26px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.hamburger span {
  height: 3px;
  background: var(--gs-dark);
  border-radius: 4px;
}

/* ==========================================================
   MENUBAR (ROW 2)
========================================================== */
.menubar {
  background: #fff;
  border-bottom: 1px solid var(--gs-border);
}

.menu-flex {
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu {
  display: flex;
  align-items: center;
  gap: 22px;
}

.menu a {
  font-size: 15px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--gs-dark);
}

.menu a:hover {
  background: rgba(14,107,79,.06);
}

.menu a.active {
  background: var(--gs-green);
  color: #fff;
}

/* ==========================================================
   DESKTOP DROPDOWN (PROFILE)
========================================================== */
.dropdown {
  position: relative;
}

.dropdown-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--gs-dark);
}

.dropdown-btn:hover {
  background: rgba(14,107,79,.06);
}

/* DROPDOWN PANEL */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--gs-border);
  border-radius: 12px;
  padding: 10px 0;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  display: none;
  z-index: 99;
}

/* HOVER STABILITY FIX */
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  display: block;
}

/* INVISIBLE BRIDGE */
.dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 12px;
}

/* DROPDOWN GROUP */
.dropdown-group {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #f1f1f1;
}

.dropdown-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* CATEGORY TITLE */
.dg-title {
  padding: 8px 16px 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gs-green);
}

/* DROPDOWN LINKS */
.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--gs-muted);
  text-decoration: none;
}

.dropdown-menu a:hover {
  background: #eef7f2;
  color: var(--gs-green);
}

/* ==========================================================
   MOBILE SIDEBAR
========================================================== */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: none;
  z-index: 999;
}

.mobile-overlay.open {
  display: block;
}

.mobile-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100vh;
  background: #fff;
  padding: 20px;
  border-left: 1px solid var(--gs-border);
  overflow-y: auto;
  transition: right .28s ease;
  z-index: 1000;
}

.mobile-nav.open {
  right: 0;
}

/* MOBILE HEADER */
.m-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.m-title {
  font-size: 17px;
  font-weight: 700;
}

.m-close {
  font-size: 26px;
  background: none;
  border: none;
  cursor: pointer;
}

/* MOBILE LINKS */
.mobile-nav a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid #f1f1f1;
  font-weight: 600;
  color: var(--gs-dark);
  text-decoration: none;
}

@media (max-width:991px){

    body.sidebar-open .website-notice{
        display:none;
    }

}

/* ==========================================================
   MOBILE ACCORDION
========================================================== */
.m-acc-btn {
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.m-acc-btn.open {
  color: var(--gs-green);
}

.m-acc-content {
  display: none;
  padding-left: 14px;
  background: #fafafa;
}

.m-acc-content a {
  padding: 10px 0;
  font-size: 14px;
  border-bottom: none;
}

/* ==========================================================
   MOBILE LANGUAGE
========================================================== */
.mobile-lang {
  margin-top: 18px;
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}

.mobile-lang a {
  font-size: 13px;
  font-weight: 600;
  color: var(--gs-dark);
  text-decoration: none;
  position: relative;
}

.mobile-lang a.active-lang {
  color: var(--gs-green);
}

.mobile-lang a:first-child::after {
  content: "|";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  color: #cbd5e1;
}

/* ==========================================================
   RESPONSIVE RULES
========================================================== */
@media (max-width: 900px) {
  .menu,
  .lang-switch {
    display: none;
  }

  .hamburger {
    display: flex;
  }
}

/* ==================================================
   MOBILE: HIDE DESKTOP MENUBAR
   ================================================== */
@media (max-width: 768px) {

  /* Sembunyikan menubar sepenuhnya di mobile */
  .menubar {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

}

/* ==========================
   WEBSITE NOTICE
========================== */

.website-notice{
    background:#0e6b4f;
    color:#fff;
    width:100%;
    position:relative;
    z-index:9999;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.notice-content{
    max-width:1400px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:18px;
    padding:14px 25px;
}

.notice-icon{
    font-size:24px;
    color:#ffd54f;
}

.notice-text{
    flex:1;
    line-height:1.6;
    font-size:15px;
}

.notice-text strong{
    display:block;
    font-size:16px;
    margin-bottom:3px;
}

.notice-close{
    background:rgba(255,255,255,.15);
    border:none;
    color:#fff;
    width:38px;
    height:38px;
    border-radius:50%;
    cursor:pointer;
    transition:.3s;
}

.notice-close:hover{
    background:#fff;
    color:#0e6b4f;
}

@media(max-width:768px){

.notice-content{
    padding:12px 15px;
    gap:12px;
}

.notice-icon{
    display:none;
}

.notice-text{
    font-size:13px;
}

.notice-text strong{
    font-size:14px;
}

}