:root {
  --brand-blue: #052962;
  --text-dark: #121212;
  --scroll-btn-bg: #052962;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

body { margin:0; color: var(--text-dark); }

/* ===== Utility Bar ===== */
.utility-bar {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  background:#d1d5db;
  border-bottom:1px solid #02194a;
  padding:4px 16px;
  font-size:0.85rem;
  position:fixed;
  top:0; left:0; right:0;
  z-index:1002;
  height:36px;
  transition: background 0.3s ease;
}
.left-group { display:flex; align-items:center; gap:10px; margin-right:auto; }
.support-btn { 
  background:#d1d5db;
  color:#000;
  border:0;
  padding:4px 10px;
  border-radius:3px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:5px;
  text-decoration:none;
  transition: all 0.3s ease;
}
.utility-bar.scrolled { background: var(--brand-blue); }
.utility-bar.scrolled .support-btn { background: var(--brand-blue); color:#fff; }
.support-btn:hover { background:#9ca3af; color:#fff; }

/* ===== Hamburger ===== */
.hamburger-wrapper { position:relative; }
.hamburger {
  display:flex; flex-direction:column; gap:3px;
  background:#d1d5db; border-radius:50%;
  padding:5px; width:32px; height:32px;
  justify-content:center; align-items:center;
  cursor:pointer; border:1px solid #a3a3a3;
}
.hamburger span {
  display:block; width:16px; height:2px;
  background:#052962; border-radius:1px;
}

/* ===== Small Logo ===== */
.small-logo {
  height:28px;
  opacity:0; transform:scale(0);
  cursor:pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.small-logo.visible { opacity:1; transform:scale(1); }

/* ===== Logo Bar ===== */
.logo-bar {
  display:flex; justify-content:center; align-items:center;
  background: var(--brand-blue);
  height:60px; padding:16px 10px;
  transition: height 0.3s ease, padding 0.3s ease;
  z-index:100; margin-top:36px;
}
.logo-bar img { height:70px; cursor:pointer; }
.logo-bar.collapsed { height:0; padding:0; }
.logo-bar.collapsed img { height:0; }

/* ===== Menu Container ===== */
.menu-container {
  background: var(--brand-blue); height:42px;
  display:flex; align-items:center;
  position:relative; z-index:1001;
  transition: top 0.3s ease, position 0.3s ease;
}
.menu-container.sticky { position:fixed; top:36px; left:0; right:0; }
.menu-container:hover .scroll-btn { display:flex; }

/* ===== Menu Bar ===== */
.menu-bar {
  display:flex; flex-wrap:nowrap; gap:0;
  padding:0 16px; overflow:hidden;
  height:100%; align-items:center;
}
.menu-bar a {
  text-decoration:none; color:#fff;
  font-weight:600; font-size:0.8rem;
  white-space:nowrap; text-align:center;
  padding:0 15px; display:flex; align-items:center;
  border-right:1px solid #c4c4c4;
}
.menu-bar a:last-child { border-right:none; }

/* ===== Scroll Buttons ===== */
.scroll-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:32px; height:32px; background:var(--scroll-btn-bg);
  color:#fff; border:none; font-size:1rem;
  cursor:pointer; display:none;
  align-items:center; justify-content:center;
  border-radius:50%; transition: background 0.2s; z-index:5;
}
.scroll-btn:hover { background:#02194a; }
.scroll-btn.left { left:5px; }
.scroll-btn.right { right:5px; }

/* ===== Off-canvas Nav ===== */
.nav-drawer {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.5); display:none; z-index:2000;
}
.nav-panel {
  background:#fff; width:260px; height:100%; padding:20px;
  box-shadow:2px 0 10px rgba(0,0,0,0.2);
  display:flex; flex-direction:column; overflow-y:auto;
}
.nav-panel a { display:block; padding:10px 0; font-weight:600; text-decoration:none; color:var(--text-dark); }
.nav-panel button { background:none; border:0; font-size:1.2rem; margin-bottom:10px; cursor:pointer; }
.nav-panel .nav-link { padding:8px 16px; font-size:0.85rem; font-weight:500; color:var(--text-dark); text-decoration:none; border-bottom:1px solid #e0e0e0; transition: background 0.2s; }
.nav-panel .nav-link:hover { background:#f0f0f0; }

/* ===== Nav Drawer Header ===== */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--brand-blue);
  height: 60px;
  padding: 0 16px;
  box-sizing: border-box;
}

.nav-header img {
  max-height: 40px;  /* batasi tinggi logo */
  width: auto;       /* tetap proporsional */
  cursor: pointer;
}

#closeNav {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}