html, body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* layout */
.header { /* Ini adalah elemen nav, kontainer utama untuk header */
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 2rem;
  /* Tambahkan properti untuk membuat header sticky */
  position: sticky; /* <-- PENTING: Membuat header menempel */
  top: 0;          /* <-- PENTING: Menempel di bagian paling atas */
  z-index: 1000;   /* <-- PENTING: Pastikan header berada di atas konten lain saat sticky */
  background-color: white; /* <-- PENTING: Beri background agar konten di bawah tidak terlihat */
}

.wrapper {
  display: flex;
  flex-grow: 1;
}

/* logo */
.logo {
  font-weight: 700;
  color: var(--primary-color);
  font-size: 1.5rem;
  /* grid-column: 2; (Hapus ini, tidak diperlukan dengan flex) */
  flex-shrink: 0; /* Cegah logo menyusut */
}

.logo__thin {
  font-weight: 300;
}

/* menu */
.menu { /* Menimpa .menu default dari global.css untuk kebutuhan desktop spesifik */
  /* Hapus grid-template-columns di sini, itu penyebab konflik */
  /* grid-template-columns: 1fr 180px 60% 1fr; */
  /* display: flex; sudah diatur di global.css */
  /* padding-left: 0; sudah diatur di global.css */
}

.menu__item {
  padding: 1.5rem 1rem; /* Padding spesifik untuk item desktop */
}

/* doc (sisanya tidak berubah dari perbaikan sidebar sebelumnya) */
.doc__bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  background-color: var(--bg-color);
  z-index: -1;
}

.doc__nav {
  width: 300px;
  font-weight: 400;
  padding-top: 1rem;
  flex-shrink: 0;
  /* --- Properti baru untuk membuat sidebar sticky (desktop) --- */
  position: sticky; /* Membuat sidebar menempel */
  top: 5rem; /* Menempel 5rem dari atas, ini akan menempel di bawah header */
  align-self: flex-start; /* Penting agar sidebar menempel di bagian atas flex container */
  background-color: white; /* Beri background agar konten di bawah tidak terlihat */
  max-height: calc(100vh - 5rem); /* Memastikan sidebar tidak melebihi tinggi viewport setelah header */
  overflow-y: auto; /* Aktifkan scrollbar jika konten sidebar terlalu panjang */
  z-index: 999; /* Pastikan sidebar di atas konten utama saat sticky */
}

.doc__nav ul {
  list-style: none;
  padding-left: 0;
  line-height: 1.8;
}

.doc__nav ul.fixed {
  /* Aturan ini tidak akan digunakan jika .doc__nav yang jadi sticky,
     tapi biarkan saja jika suatu saat Anda ingin menerapkan sticky hanya pada UL */
  position: sticky;
  top: 2rem;
  width: inherit;
}

.doc__nav li {
  position: relative;
  display: block;
}

.doc__nav li a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--primary-color);
  border-radius: .25rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.doc__nav li a:hover {
  background-color: rgba(0,0,0,0.05);
}

.doc__nav li a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: transparent;
  border-radius: 1rem;
  transition: background-color 0.2s ease;
}

.doc__nav .selected a {
  background-color: var(--accent-color-light);
  color: var(--accent-color);
}

.doc__nav .selected a:before {
  background-color: var(--accent-color);
}

.doc__content {
  flex-grow: 1;
  padding: 2rem;
}

@media (max-width: 750px) {
  /* Tidak ada override spesifik header/menu di sini, mengandalkan global.css */
  .wrapper {
    flex-direction: column;
  }
  .doc__bg {
    display: none;
  }
  .doc__nav {
    width: 100%;
    padding: 0.5rem 0;
    /* --- Override properti sticky untuk mobile --- */
    position: static; /* Biar tidak sticky di mobile */
    top: auto;       /* Hapus offset top */
    max-height: unset; /* Hapus batasan tinggi */
    overflow-y: visible; /* Biarkan konten sidebar mengalir normal */
    z-index: auto;   /* Reset z-index */
    align-self: auto; /* Reset align-self */
  }
  .doc__nav ul {
    border-bottom: 1px solid var(--code-bg-color);
    padding-bottom: 0.5rem;
    padding-left: 1rem;
  }
  .doc__nav ul.fixed {
    position: relative;
    top: 0;
  }
  .doc__nav li {
    display: block;
    padding-right: 0;
  }
  .doc__nav li a {
    padding: 0.5rem 1rem;
  }
  .doc__content {
    margin-left: 0;
    width: 100%;
    padding-left: 2rem;
  }
}