#markdown-content h1 {
  font-size: 1.5em; 
}

#markdown-content h2 {
  font-size: 1.25em; 
}

#markdown-content h3 {
  font-size: 1.15em;
}

#markdown-content h4 {
  font-size: 1em;
}

#markdown-content h5 {
  font-size: 0.9em;
}

#markdown-content h6 {
  font-size: 0.8em;
}

#markdown-content body {
    counter-reset: h1-counter h2-counter h3-counter h4-counter h5-counter h6-counter;
}

#markdown-content hr {
    box-sizing: content-box;
    height: 0;
    margin: 24px 0; /* Memberi jarak atas dan bawah */
    overflow: hidden;
    background: transparent;
    border: 0;
    /* Properti inti untuk membuat garis tipis: */
    border-bottom: 1px solid #e1e4e8; 
}

/* Catatan: Di beberapa implementasi lama/alternatif, mungkin menggunakan 'border-top'. */

/* Base style for all header indexes */
#markdown-content .header-index,
#markdown-content h1::before,
#markdown-content h2::before,
#markdown-content h3::before,
#markdown-content h4::before {
    display: inline-block;
    padding: 2px 6px;
    margin-right: 8px;
    font-size: 0.85em;
    font-weight: 600;
    color: #24292e; /* GitHub default text color */
    vertical-align: middle;
}

/* H1: Kotak hijau rounded kecil */
#markdown-content h1 {
    counter-increment: h1-counter;
    counter-reset: h2-counter h3-counter h4-counter;
}
#markdown-content h1::before {
    content: counter(h1-counter);
    border: 1px solid #2ea44f;
    background-color: #dafbe1;
    border-radius: 4px;
}

/* H2: Kotak biru rounded kecil */
#markdown-content h2 {
    counter-increment: h2-counter;
    counter-reset: h3-counter h4-counter;
}
#markdown-content h2::before {
    content: counter(h2-counter, lower-alpha);
    border: 1px solid #0969da;
    background-color: #ddf4ff;
    border-radius: 4px;
}

/* H3: Bulat merah */
#markdown-content h3 {
    counter-increment: h3-counter;
    counter-reset: h4-counter;
}

#markdown-content h3::before {
    content: counter(h3-counter, lower-roman);
    border: 1px solid #cf222e;
    background-color: #ffebe9;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 20px;
    padding: 0;
    display: inline-block;
}

/* H4: Bulat kuning */
#markdown-content h4 {
    counter-increment: h4-counter;
}

#markdown-content h4::before {
    content: counter(h4-counter, none);
    border: 1px solid #9a6700;
    background-color: #fff8c5;
    border-radius: 50%;
    width: 11px;
    height: 11px;
    text-align: center;
    line-height: 20px;
    padding: 0;
    display: inline-block;
}

/* H5 & H6 tanpa pengindeksan */
#markdown-content h5::before,
#markdown-content h6::before {
    content: none;
}

/* prev-next bar (GitHub white-like) */
.pn-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  background: #ffffff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(27,31,35,0.04);
  margin: 1rem 0;
}

.pn-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.92rem;
  color: #24292f;
  background: #ffffff;
  border: 1px solid #d1d5da;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .08s, box-shadow .08s, transform .04s;
}

.pn-btn:hover {
  background-color: #f6f8fa;
  box-shadow: 0 1px 0 rgba(27,31,35,0.06);
  transform: translateY(-1px);
}

.pn-btn .pn-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
}

.pn-title {
  max-width: 22ch; /* potong teks panjang */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

/* Posisi: tombol kiri = prev; tombol kanan = next */
.pn-bar .pn-prev { margin-right: auto; }
.pn-bar .pn-next { margin-left: auto; }

/* Mobile: stack */
@media (max-width: 640px) {
  .pn-bar { flex-direction: column; align-items: stretch; }
  .pn-bar .pn-prev, .pn-bar .pn-next { margin: 0; width: 100%; justify-content: center; }
}

#toc-list a {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  color: #374151;
  font-size: 0.875rem;
  transition: background-color 0.2s;
}

#toc-list a:hover {
  background-color: #e0f2fe; /* biru muda */
}

#toc-list a.active {
  background-color: #dbeafe;
  font-weight: 600;
  color: #1e40af;
}

#toc-list {
  list-style: none; /* Hilangkan bullet default */
}

#toc-list li {
  margin-bottom: 0.1rem; /* Space antar item */
}

.toc-level-1 { margin-left: 0; }
.toc-level-2 { margin-left: 0.8rem; }
.toc-level-3 { margin-left: 1.6rem; }
.toc-level-4 { margin-left: 2.4rem; }
.toc-level-5 { margin-left: 3.2rem; }
.toc-level-6 { margin-left: 4rem; }

/* default Markdown lists (nice spacing) */
article ul, .markdown-body ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: .6rem 0 1rem;
}
article ol, .markdown-body ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin: .6rem 0 1rem;
}

/* Custom list classes (dipakai via markdown-it-attrs) */
.list-disc     { list-style-type: disc; }
.list-circle   { list-style-type: circle; }
.list-square   { list-style-type: square; }

.list-decimal  { list-style-type: decimal; }
.list-lower-alpha { list-style-type: lower-alpha; }
.list-upper-alpha { list-style-type: upper-alpha; }
.list-lower-roman { list-style-type: lower-roman; }
.list-upper-roman { list-style-type: upper-roman; }

/* Spacing antar-level */
.list-level-1 { margin-left: 0.5rem; }
.list-level-2 { margin-left: 1.25rem; }
.list-level-3 { margin-left: 2rem; }
.list-level-4 { margin-left: 2.75rem; }

/* spacing for nested lists */
article ul ul, article ol ol, .markdown-body ul ul, .markdown-body ol ol {
  margin-top: 0.25rem;
  margin-bottom: 0.4rem;
  padding-left: 1rem;
}