/* ======= Tema (Light as default) ======= */
:root {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --muted: #6b7280;
  --text: #0f172a;
  --accent: #2563eb;
  --accent2: #059669;
  --accent3: #b45309;
  --accent4: #c026d3;
  --border: #e5e7eb;
  --shadow: 0 8px 20px rgba(15, 23, 42, .06);
  --footer-bg: #ffffff;
}

/* ======= Tema Gelap ======= */
:root[data-theme="dark"]{
  --bg: #0f1216;
  --panel: #151a21;
  --muted: #9aa3af;
  --text: #e5e7eb;
  --accent: #60a5fa;
  --accent2: #34d399;
  --accent3: #f59e0b;
  --accent4: #f472b6;
  --border: #222a35;
  --shadow: 0 10px 25px rgba(0, 0, 0, .35);
  --footer-bg: #0b1117;
}

/* Basic reset */
* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Noto Naskh Arabic", "Noto Sans", Arial, sans-serif;
  transition: background-color .2s ease, color .2s ease;
}

/* Layout utama */
.app { display: grid; grid-template-columns: 120px 1fr; min-height: 100vh }
.years {
  border-inline-end: 1px solid var(--border); padding: 12px; overflow: auto;
  position: sticky; top: 0; height: 100vh; background: var(--bg);
}
.years h3 { margin: 6px 6px 12px; font-size: .9rem; color: var(--muted) }
.year {
  display: block; padding: 8px 10px; margin: 4px 0; border-radius: 8px;
  color: var(--muted); text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.year:hover { background: rgba(0,0,0,.06); color: var(--text) }
:root[data-theme="dark"] .year:hover { background: #11161d; color: var(--text) }
.year.active { background: #e6eefc; color: #1e40af; border: 1px solid #93c5fd }
:root[data-theme="dark"] .year.active { background: #0b1220; color: #c7d2fe; border: 1px solid #1f2a44 }

/* Timeline */
.timeline { position: relative; padding: 24px 24px 80px; }
.rule {
  position: absolute; inset-inline-start: 32px; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--border), var(--accent)); border-radius: 3px
}

/* Cluster dan titik */
.cluster { position: relative; margin: 28px 0 12px 0; padding-inline-start: 70px }
.dot {
  position: absolute; inset-inline-start: 24px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--panel); border: 3px solid var(--accent); box-shadow: var(--shadow)
}
.cluster .label { font-weight: 700; letter-spacing: .5px; color: #1d4ed8; margin-bottom: 6px }
:root[data-theme="dark"] .cluster .label { color: #c7d2fe }

/* Kartu */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px }

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px 16px; box-shadow: var(--shadow); position: relative;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.card:hover { transform: translateY(-2px); border-color: #cbd5e1 }
:root[data-theme="dark"] .card:hover { border-color: #26476b }

.card .badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: .75rem;
  color: var(--muted); margin-bottom: 8px
}
.badge .dot { position: static; width: 8px; height: 8px; border: 0; box-shadow: none; border-radius: 50% }

.card h4 { margin: 0 0 4px; font-size: 1.05rem; line-height: 1.4; cursor: pointer; color: var(--text) }
.card p { margin: .25rem 0 .5rem; color: var(--muted); font-size: .92rem }
.meta { font-size: .8rem; color: #2563eb }
:root[data-theme="dark"] .meta { color: #93c5fd }

/* Kategori warna kecil */
.k1 { background: var(--accent) }
.k2 { background: var(--accent2) }
.k3 { background: var(--accent3) }
.k4 { background: var(--accent4) }

/* Toolbar atas */
.toolbar{
  position: sticky; top: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 95%, transparent), color-mix(in srgb, var(--bg) 70%, transparent));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 10px 24px; border-bottom: 1px solid var(--border); z-index: 2;
  display: flex; align-items: center; gap: 10px
}
.toolbar input[type="search"]{
  flex: 1; background: var(--panel); border: 1px solid var(--border);
  color: var(--text); padding: 8px 10px; border-radius: 10px
}
.toolbar .info { font-size: .85rem; color: var(--muted) }