/* Invesmentpedia — gaya mengikuti sistem desain Enigma Institute
   (token warna & font diambil dari institute.enigma.or.id/css/style.css) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Merriweather:wght@400;700&display=swap');

:root{
  --primary-color:#0A2647; --secondary-color:#144272; --accent-color:#205295;
  --highlight-color:#2C74B3; --text-color:#333; --light-text-color:#f8f9fa;
  --bg-color:#FFFFFF; --light-gray-bg:#f8f9fa; --border-color:#e0e0e0;
  --card-shadow:0 4px 15px rgba(0,0,0,.1);
  --font-primary:'Roboto',sans-serif; --font-secondary:'Merriweather',serif;
  --ok:#1b7f4b; --ok-bg:#e8f5ee; --awas:#9a6700; --awas-bg:#fff8e5;
  --galat:#b3261e; --galat-bg:#fdecea; --diam:#667085;
  --r:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-primary);color:var(--text-color);background:var(--light-gray-bg);
  line-height:1.65;font-size:16px}
a{color:var(--highlight-color);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* ── kerangka ─────────────────────────────────────────────── */
.bungkus{max-width:1180px;margin:0 auto;padding:0 20px}
.sempit{max-width:820px}
header.atas{background:var(--primary-color);color:#fff;position:sticky;top:0;z-index:50;
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.atas .bungkus{display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap}
.merek{font-family:var(--font-secondary);font-weight:700;font-size:1.18rem;color:#fff;
  letter-spacing:.2px;white-space:nowrap}
.merek span{color:var(--highlight-color)}
.merek small{display:block;font-family:var(--font-primary);font-weight:400;font-size:.68rem;
  opacity:.72;letter-spacing:.5px;text-transform:uppercase}
nav.utama{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
nav.utama a{color:#dbe6f3;padding:8px 12px;border-radius:6px;font-size:.92rem;white-space:nowrap}
nav.utama a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
nav.utama a.kini{background:var(--accent-color);color:#fff}

footer.bawah{background:var(--primary-color);color:#c8d6e8;margin-top:56px;padding:34px 0 28px;
  font-size:.88rem}
footer.bawah a{color:#9dc3e6}
footer.bawah .grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
footer.bawah h4{color:#fff;font-size:.95rem;margin-bottom:10px}
footer.bawah ul{list-style:none}
footer.bawah li{margin-bottom:5px}
.garis-bawah{border-top:1px solid rgba(255,255,255,.14);margin-top:24px;padding-top:16px;
  font-size:.82rem;opacity:.8}

main{padding:28px 0 10px;min-height:60vh}

/* ── judul ────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font-secondary);color:var(--primary-color);line-height:1.3}
h1{font-size:1.85rem;margin-bottom:10px}
h2{font-size:1.35rem;margin:28px 0 12px}
h3{font-size:1.1rem;margin:20px 0 8px}
.kicker{text-transform:uppercase;letter-spacing:1.2px;font-size:.74rem;font-weight:700;
  color:var(--highlight-color);font-family:var(--font-primary);margin-bottom:6px}
.pengantar{color:#555;font-size:1.02rem;max-width:72ch}

/* ── kartu ────────────────────────────────────────────────── */
.kartu{background:#fff;border:1px solid var(--border-color);border-radius:var(--r);
  padding:20px;box-shadow:var(--card-shadow)}
.kartu+.kartu{margin-top:16px}
.kisi{display:grid;gap:16px}
.kisi.k2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.kisi.k3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kisi.k4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* ── tombol ───────────────────────────────────────────────── */
.tbl{display:inline-block;background:var(--highlight-color);color:#fff;border:0;
  padding:10px 18px;border-radius:6px;font-family:var(--font-primary);font-size:.94rem;
  font-weight:500;cursor:pointer;text-align:center}
.tbl:hover{background:var(--accent-color);text-decoration:none;color:#fff}
.tbl.sekunder{background:#fff;color:var(--accent-color);border:1px solid var(--accent-color)}
.tbl.sekunder:hover{background:var(--light-gray-bg);color:var(--primary-color)}
.tbl.hantu{background:transparent;color:var(--diam);border:1px solid var(--border-color)}
.tbl.hantu:hover{background:var(--light-gray-bg);color:var(--text-color)}
.tbl:disabled,.tbl.mati{background:#c9d2dc;cursor:not-allowed;pointer-events:none}
.tbl.kecil{padding:6px 12px;font-size:.85rem}
.tbl.penuh{display:block;width:100%}

/* ── formulir ─────────────────────────────────────────────── */
label{display:block;font-weight:500;margin-bottom:5px;font-size:.92rem}
.petunjuk{font-size:.83rem;color:var(--diam);margin-top:4px}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:6px;
  font-family:var(--font-primary);font-size:.97rem;background:#fff;color:var(--text-color)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--highlight-color);outline-offset:1px;
  border-color:var(--highlight-color)}
textarea{min-height:110px;resize:vertical;line-height:1.6}
.bidang{margin-bottom:16px}

/* ── lencana & status ─────────────────────────────────────── */
.lencana{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.76rem;
  font-weight:500;background:var(--light-gray-bg);color:var(--diam);border:1px solid var(--border-color)}
.lencana.ok{background:var(--ok-bg);color:var(--ok);border-color:#bfe3cf}
.lencana.awas{background:var(--awas-bg);color:var(--awas);border-color:#f0dcae}
.lencana.galat{background:var(--galat-bg);color:var(--galat);border-color:#f3c4bf}
.lencana.biru{background:#e7f0f9;color:var(--accent-color);border-color:#c2d9ef}
.lencana.bloom{font-family:var(--font-primary);font-weight:700;letter-spacing:.4px}

.pesan{padding:12px 16px;border-radius:8px;margin-bottom:16px;border:1px solid}
.pesan.ok{background:var(--ok-bg);color:var(--ok);border-color:#bfe3cf}
.pesan.galat{background:var(--galat-bg);color:var(--galat);border-color:#f3c4bf}
.pesan.awas{background:var(--awas-bg);color:var(--awas);border-color:#f0dcae}
.pesan.info{background:#e7f0f9;color:var(--accent-color);border-color:#c2d9ef}

/* ── bilah kemajuan ───────────────────────────────────────── */
.bilah{height:8px;background:#e6ebf1;border-radius:99px;overflow:hidden;margin:8px 0 4px}
.bilah i{display:block;height:100%;background:var(--highlight-color);border-radius:99px}
.bilah.ok i{background:var(--ok)}

/* ── tabel ────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.93rem;background:#fff}
th,td{border:1px solid var(--border-color);padding:8px 11px;text-align:left;vertical-align:top}
th{background:var(--light-gray-bg);font-weight:700;color:var(--primary-color)}
tbody tr:nth-child(even){background:#fcfdfe}
.gulir-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── isi modul (keluaran pandoc) ──────────────────────────── */
.isi{font-size:1rem;line-height:1.75;overflow-wrap:break-word}
.isi h1,.isi h2,.isi h3,.isi h4{margin:26px 0 10px}
.isi h3{font-size:1.08rem;border-left:3px solid var(--highlight-color);padding-left:10px}
.isi p{margin:0 0 13px}
.isi ul,.isi ol{margin:0 0 14px 22px}
.isi li{margin-bottom:6px}
.isi blockquote{border-left:4px solid var(--highlight-color);background:#f2f7fc;
  padding:12px 16px;margin:16px 0;border-radius:0 8px 8px 0}
.isi blockquote p:last-child{margin-bottom:0}
.isi code{background:#eef2f6;padding:1px 5px;border-radius:4px;font-size:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.isi pre{background:var(--primary-color);color:#e8f0f8;padding:16px;border-radius:8px;
  overflow-x:auto;margin:16px 0;line-height:1.45}
.isi pre code{background:none;color:inherit;padding:0;font-size:.85rem}
.isi table{font-size:.9rem}
.isi hr{border:0;border-top:1px solid var(--border-color);margin:26px 0}
.isi strong{color:var(--primary-color)}

/* ── daftar isi modul ─────────────────────────────────────── */
.dua-kolom{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}
.samping{position:sticky;top:78px}
.daftar-isi{list-style:none;font-size:.9rem}
.daftar-isi li{margin-bottom:2px}
.daftar-isi a{display:block;padding:7px 10px;border-radius:6px;color:#4a5568;border-left:3px solid transparent}
.daftar-isi a:hover{background:var(--light-gray-bg);text-decoration:none}
.daftar-isi a.kini{background:#e7f0f9;color:var(--accent-color);font-weight:500;
  border-left-color:var(--highlight-color)}

/* ── butir soal ───────────────────────────────────────────── */
.butir{border:1px solid var(--border-color);border-radius:var(--r);padding:16px;background:#fff;
  margin-bottom:14px}
.butir.dijawab{border-left:4px solid var(--ok)}
.butir .kepala{display:flex;gap:10px;align-items:baseline;margin-bottom:9px;flex-wrap:wrap}
.butir .no{font-weight:700;color:var(--primary-color);font-size:1.02rem}
.butir .soal{flex:1;min-width:220px}
.kunci{background:var(--ok-bg);border:1px solid #bfe3cf;border-radius:8px;padding:12px 14px;
  margin-top:10px;font-size:.94rem}
.kunci b{color:var(--ok);display:block;margin-bottom:4px;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.6px}
.nilai-diri{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.nilai-diri button{flex:1;min-width:110px}

/* ── sertifikat ───────────────────────────────────────────── */
.sertifikat{background:#fff;border:3px double var(--primary-color);border-radius:6px;
  padding:44px 38px;text-align:center;max-width:780px;margin:0 auto}
.sertifikat .gelar{font-family:var(--font-secondary);font-size:1.9rem;color:var(--primary-color);
  margin:14px 0}
.sertifikat .nama-peserta{font-family:var(--font-secondary);font-size:1.5rem;
  border-bottom:1px solid var(--border-color);display:inline-block;padding:0 26px 8px;margin:14px 0}
.sertifikat .nomor{font-family:ui-monospace,Menlo,monospace;font-size:.86rem;color:var(--diam);
  letter-spacing:1px}

/* ── lain ─────────────────────────────────────────────────── */
.diam{color:var(--diam)}
.kecil{font-size:.86rem}
.tengah{text-align:center}
.rapat{margin-top:0}
.sela{margin-top:18px}
.baris{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dorong{margin-left:auto}
.remah{font-size:.86rem;color:var(--diam);margin-bottom:12px}
.remah a{color:var(--diam)}
.kosong{text-align:center;padding:44px 20px;color:var(--diam)}

@media (max-width:820px){
  .dua-kolom{grid-template-columns:1fr}
  .samping{position:static}
  footer.bawah .grid{grid-template-columns:1fr}
  h1{font-size:1.5rem}
  .atas .bungkus{min-height:56px;padding-top:8px;padding-bottom:8px}
  nav.utama{margin-left:0;width:100%;overflow-x:auto}
}
@media print{
  header.atas,footer.bawah,nav.utama,.tbl,.samping{display:none!important}
  body{background:#fff}
  .kartu,.sertifikat{box-shadow:none;border:1px solid #999}
}