/* =========================================================
   Peta Belajar ISO 27001 — tema "audit journal" amber pastel
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f5f4f4;
  --bg-sidebar: #fdeedc;
  --surface: #fffefb;
  --accent: #e3993d;
  --accent-dark: #b8722a;
  --accent-pastel: #f7ddaa;
  --accent-pastel-2: #f2c879;
  --ink: #4a3624;
  --ink-soft: #8b7259;
  --border: #efdcb8;
  --code-bg: #fbeacb;
  --code-text: #7a4b1c;

  --font-display: 'Baloo 2', 'Segoe UI Rounded', sans-serif;
  --font-body: 'Nunito', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
}

::selection { background: var(--accent-pastel-2); color: var(--ink); }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding-top: 8px;
}

.sidebar::-webkit-scrollbar-thumb { background: var(--accent-pastel-2); border-radius: 8px; }

.sidebar > h1 {
  margin: 0 0 4px 0;
  padding: 0 20px;
}
.sidebar > h1 a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28em;
  color: var(--accent-dark);
  letter-spacing: 0.2px;
}
.sidebar > h1 .app-name-link img { display: none; }

.sidebar .search {
  border-bottom: 1px solid var(--border);
  margin: 8px 16px 12px;
  padding: 0 0 12px;
}
.sidebar .search input {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-body);
  color: var(--ink);
  padding: 8px 14px;
}
.sidebar .search input:focus { border-color: var(--accent); outline: none; }
.sidebar .search .clear-button { right: 14px; }
.sidebar .search .matching-post { border-bottom: 1px dashed var(--border); }

.sidebar-nav { padding: 0 12px 32px; }

.sidebar-nav > ul > li > p,
.sidebar-nav p.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78em;
  letter-spacing: 0.3px;
  color: var(--ink-soft);
  margin: 18px 8px 6px;
}

.sidebar-nav ul { margin: 0; }

.sidebar-nav li { margin: 2px 0; }

.sidebar-nav a {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92em;
  color: var(--ink-soft);
  border-radius: 12px;
  padding: 8px 14px;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-nav a:hover {
  background: var(--surface);
  color: var(--accent-dark);
}

.sidebar-nav li.active > a {
  background: var(--accent-pastel);
  color: var(--accent-dark);
  font-weight: 800;
}

.sidebar-toggle {
  background: transparent;
}
.sidebar-toggle span { background-color: var(--accent-dark); }

/* ---------- Content ---------- */
.content { background: var(--bg); }

.markdown-section {
  max-width: 780px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  padding: 40px 40px 80px;
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
}

.markdown-section h1 {
  font-size: 2em;
  border-bottom: none;
  margin: 0 0 6px;
  color: var(--accent-dark);
}

.markdown-section h2 {
  font-size: 1.4em;
  margin-top: 2.2em;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}

.markdown-section h3 {
  font-size: 1.12em;
  margin-top: 1.8em;
  color: var(--accent-dark);
}

.markdown-section p, .markdown-section li { color: var(--ink); }

.markdown-section strong { color: var(--accent-dark); }

.markdown-section a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-color: var(--accent-pastel-2);
  text-underline-offset: 3px;
  font-weight: 700;
}
.markdown-section a:hover { text-decoration-color: var(--accent-dark); }

.markdown-section hr {
  border: none;
  border-top: 2px dashed var(--border);
  margin: 2.4em 0;
}

.markdown-section blockquote {
  margin: 1.4em 0;
  padding: 0.8em 1.2em;
  background: var(--accent-pastel);
  border-left: 5px solid var(--accent);
  border-radius: 10px;
  color: var(--ink);
}
.markdown-section blockquote p { margin: 0; }

.markdown-section code {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.88em;
}

.markdown-section pre {
  background: var(--code-bg) !important;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.markdown-section pre > code { background: transparent; color: var(--code-text); }

.markdown-section table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.markdown-section table th {
  background: var(--accent-pastel);
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-weight: 600;
  border: none;
  border-bottom: 2px solid var(--accent-pastel-2);
}
.markdown-section table td {
  border: none;
  border-top: 1px solid var(--border);
}
.markdown-section table tr:nth-child(2n) { background: var(--surface); }
.markdown-section table tr:nth-child(2n+1) { background: #fffcf6; }

.markdown-section input[type='checkbox'] {
  accent-color: var(--accent);
  width: 16px; height: 16px;
}

/* Progress-style task list items */
.markdown-section li input[type='checkbox'] + * { color: var(--ink); }

/* ---------- Cover page ---------- */
.cover.show { background: radial-gradient(ellipse at top, #fff3de 0%, var(--bg) 65%); }
.cover-main { font-family: var(--font-body); }
.cover-main > p:last-child a {
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  border: none;
  transition: transform 0.15s ease;
}
.cover-main > p:last-child a:first-child {
  background: var(--accent);
  color: #fff8ec;
}
.cover-main > p:last-child a:first-child:hover { background: var(--accent-dark); transform: translateY(-2px); }
.cover-main > p:last-child a:last-child {
  color: var(--accent-dark);
  border: 1.5px solid var(--accent-pastel-2);
  background: var(--surface);
}
.cover-main > p:last-child a:last-child:hover { border-color: var(--accent); transform: translateY(-2px); }

.cover-main h1 {
  font-family: var(--font-display);
  color: var(--accent-dark);
}
.cover-main blockquote {
  font-family: var(--font-body);
  color: var(--ink-soft);
}

/* Custom roadmap timeline used on the cover page */
.roadmap-timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 640px;
  margin: 28px auto 8px;
  font-family: var(--font-display);
}
.roadmap-timeline span {
  background: var(--surface);
  border: 1.5px solid var(--accent-pastel-2);
  color: var(--accent-dark);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.82em;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Pagination plugin ---------- */
.pagination-item-label { color: var(--ink-soft); font-family: var(--font-body); }
.pagination-item-title {
  color: var(--accent-dark) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}
.pagination-item { border: 1px solid var(--border) !important; border-radius: 14px !important; background: var(--surface); }
.pagination-item:hover { border-color: var(--accent) !important; }

/* ---------- Misc ---------- */
body::-webkit-scrollbar-thumb { background: var(--accent-pastel-2); }

@media (max-width: 768px) {
  .markdown-section { padding: 28px 20px 64px; }
}