/* Gaya badan artikel Finansiologi (dimuat hanya di halaman artikel, sesudah gabungan.css).
   Dipisah dari gabungan.css karena berkas itu dibuat ulang oleh buat_css_gabungan.py. */

/* Revisi pemilik 20 Okt 2026: spasi baris 2 untuk isi artikel, riset, dan newsletter; jarak antarparagraf dan antarbagian ikut proporsional */
.u .artikel, .u .artikel p, .u .artikel li, .u .artikel td, .u .artikel th, .u .artikel blockquote, .u .artikel ol.sumber li,
.u .nl-hero p, .u .nl-hero label, .u .nl-catatan { line-height: 2; }
.u .artikel p { margin: 0 0 1.1em; }
.u .artikel li { margin-bottom: .3em; }
.u .artikel h2, .u .artikel h3 { line-height: 1.3; margin: 1.8em 0 .6em; }
.u .artikel td, .u .artikel th { line-height: 1.8; }
.u .artikel table { margin: 1.2em 0 1.5em; }
.u .gambar-artikel { margin: 28px 0; }
.u .gambar-artikel img { display: block; width: 100%; height: auto; border-radius: var(--radius-s); border: 1px solid var(--border); background: var(--abu); }
.u .gambar-artikel figcaption { margin-top: 8px; font-size: .82rem; line-height: 1.6; color: var(--teks-2); text-align: left; hyphens: manual; }

/* ===== Sistem tampilan Finansiologi di badan artikel (keputusan pemilik 20 Okt 2026): kotak rumus, kotak berikon, tabel gaya modul, kuis mini, umpan ===== */
.u .artikel .ikon-svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Kotak rumus */
.u .artikel .rumus-kotak { background: #1A3A5C; color: #D6EEFF; border-radius: 12px; padding: 14px 18px 16px; margin: 20px 0; box-shadow: 0 4px 16px rgba(26, 58, 92, .18); overflow-x: auto; }
.u .artikel .rumus-kotak__label { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8FD0FF; margin-bottom: 6px; line-height: 1.4; }
.u .artikel .rumus-kotak code { display: block; font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: .95rem; font-weight: 600; line-height: 1.8; color: #D6EEFF; background: transparent; padding: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Kotak berikon (kesalahan, akibat, perbaikan, contoh, info) */
.u .artikel .kotak { border-left: 4px solid var(--kt, #1E90E6); background: var(--kt-bg, #E8F4FD); border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 18px 0; }
.u .artikel .kotak p { margin: 0; text-align: left; }
.u .artikel .kotak__label { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kt, #1E90E6); margin-bottom: 4px; line-height: 1.5; }
.u .artikel .kotak-salah { --kt: #C0392B; --kt-bg: rgba(192, 57, 43, .09); }
.u .artikel .kotak-akibat { --kt: #C47A00; --kt-bg: rgba(245, 166, 35, .13); }
.u .artikel .kotak-benar { --kt: #1F8A4C; --kt-bg: rgba(46, 139, 87, .11); }
.u .artikel .kotak-info { --kt: #1570C8; --kt-bg: rgba(30, 144, 230, .10); }
.u .artikel .kotak-contoh { --kt: #6D4BD1; --kt-bg: rgba(139, 92, 246, .10); }

/* Tabel gaya modul */
.u .artikel .ftab-wrap { margin: 22px 0 26px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(26, 58, 92, .08); overflow-x: auto; background: var(--putih); }
.u .artikel .ftab { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 0; min-width: 420px; }
.u .artikel .ftab thead th { background: linear-gradient(135deg, #1A3A5C, #1E6FB8); color: #fff; text-align: left; font-weight: 700; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; padding: 12px 14px; border: 0; line-height: 1.5; }
.u .artikel .ftab td { padding: 12px 14px; border: 0; border-top: 1px solid var(--border); vertical-align: top; text-align: left; line-height: 1.7; color: var(--teks); }
.u .artikel .ftab tbody tr:nth-child(even) td { background: var(--abu); }
.u .artikel .ftab td:first-child { font-weight: 600; color: var(--navy); }

/* Daftar periksa dengan ikon centang */
.u .artikel ul.daftar-centang { list-style: none; padding-left: 0; }
.u .artikel ul.daftar-centang li { position: relative; padding-left: 34px; margin-bottom: .55em; }
.u .artikel ul.daftar-centang li::before { content: ""; position: absolute; left: 0; top: .55em; width: 22px; height: 22px; border-radius: 50%; background: #1F8A4C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* Kuis pemahaman */
.u .artikel .kuis-mini { border: 1px solid var(--border); border-radius: 16px; background: var(--abu); padding: 20px 22px 8px; margin: 36px 0 28px; }
.u .artikel .kuis-mini > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.3rem; }
.u .artikel .kuis-mini__sub { margin: 0 0 14px; color: var(--teks-2); font-size: .92rem; text-align: left; }
.u .artikel .kuis-soal { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.u .artikel .kuis-soal legend { font-weight: 700; color: var(--navy); line-height: 1.6; padding: 0; margin-bottom: 10px; }
.u .artikel .kuis-opsi { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 48px; text-align: left; font: inherit; font-size: .96rem; line-height: 1.6; color: var(--teks); background: var(--putih); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 14px; margin: 0 0 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.u .artikel .kuis-opsi:hover:not([disabled]) { border-color: var(--biru); background: var(--biru-muda); }
.u .artikel .kuis-opsi__kunci { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: var(--teks-2); margin-top: 1px; }
.u .artikel .kuis-opsi[disabled] { cursor: default; }
.u .artikel .kuis-opsi.is-benar { border-color: #1F8A4C; background: rgba(46, 139, 87, .12); }
.u .artikel .kuis-opsi.is-benar .kuis-opsi__kunci { background: #1F8A4C; border-color: #1F8A4C; color: #fff; }
.u .artikel .kuis-opsi.is-salah { border-color: #C0392B; background: rgba(192, 57, 43, .10); }
.u .artikel .kuis-opsi.is-salah .kuis-opsi__kunci { background: #C0392B; border-color: #C0392B; color: #fff; }
.u .artikel .kuis-umpan { margin: 4px 0 0; padding: 10px 14px; border-radius: 10px; font-size: .92rem; line-height: 1.7; text-align: left; background: var(--putih); border: 1px solid var(--border); }
.u .artikel .kuis-umpan[hidden] { display: none; }
.u .artikel .kuis-hasil { margin: 0 0 14px; font-weight: 700; color: var(--navy); text-align: left; }

/* Umpan: apakah konten ini bermanfaat */
.u .artikel .umpan-artikel { text-align: center; border: 1px solid var(--border); border-radius: 16px; padding: 24px 20px 20px; margin: 32px 0; background: var(--putih); box-shadow: var(--bayang); }
.u .artikel .umpan-artikel h2 { margin: 0 0 6px; font-size: 1.3rem; }
.u .artikel .umpan-artikel__sub { margin: 0 0 16px; color: var(--teks-2); font-size: .92rem; text-align: center; }
.u .artikel .umpan-artikel__tombol { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.u .artikel .umpan-tombol { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 20px; font: inherit; font-weight: 700; color: var(--navy); background: var(--putih); border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.u .artikel .umpan-tombol:hover:not([disabled]) { border-color: var(--biru); background: var(--biru-muda); }
.u .artikel .umpan-tombol:active:not([disabled]) { transform: scale(.97); }
.u .artikel .umpan-tombol .ikon-svg { width: 22px; height: 22px; }
.u .artikel .umpan-tombol b { min-width: 2ch; font-variant-numeric: tabular-nums; padding-left: 10px; border-left: 1.5px solid var(--border); }
.u .artikel .umpan-tombol[aria-pressed="true"] { color: #fff; border-color: transparent; }
.u .artikel .umpan-naik[aria-pressed="true"] { background: #1F8A4C; }
.u .artikel .umpan-turun[aria-pressed="true"] { background: #C0392B; }
.u .artikel .umpan-tombol[aria-pressed="true"] b { border-color: rgba(255, 255, 255, .5); }
.u .artikel .umpan-tombol[disabled] { cursor: default; opacity: .85; }
.u .artikel .umpan-artikel__status { min-height: 1.6em; margin: 14px 0 0; font-size: .92rem; color: var(--teks-2); text-align: center; }
@media (max-width: 480px) {
  .u .artikel .kuis-mini { padding: 16px 14px 4px; }
  .u .artikel .umpan-tombol { flex: 1 1 100%; justify-content: center; }
}

/* Tombol bagikan: X, LinkedIn, Instagram (Instagram menyalin tautan). */
.u .artikel .bagikan-artikel { text-align: center; margin: 0 0 32px; }
.u .artikel .bagikan-artikel h2 { margin: 0 0 12px; font-size: 1.1rem; }
.u .artikel .bagikan-artikel__tombol { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.u .artikel .bagikan-tombol { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 20px; font: inherit; font-weight: 600; font-size: .92rem; color: var(--navy); background: var(--putih); border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s; }
.u .artikel .bagikan-tombol:hover { border-color: var(--biru); background: var(--biru-muda); }
html[data-tema="gelap"] .u .artikel .bagikan-tombol { color: #E4E7EB; }
html[data-tema="gelap"] .u .artikel .bagikan-tombol:hover { background: #16212b; }
.u .artikel .bagikan-artikel__status { min-height: 1.4em; margin: 8px 0 0; font-size: .88rem; color: var(--teks-2); text-align: center; }

/* Ajakan ke kelas terkait di bawah artikel. */
.u .artikel .ajakan-kelas { margin: 40px 0 24px; padding: 28px 24px; border: 1px solid var(--garis, #D9E2EC); border-radius: 16px; background: var(--biru-muda, #EAF3FC); text-align: center; }
.u .artikel .ajakan-kelas__label { margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--biru-tua, #1570C8); }
.u .artikel .ajakan-kelas h2 { margin: 0 0 10px; font-size: 1.35rem; }
.u .artikel .ajakan-kelas p { margin: 0 auto 10px; max-width: 560px; text-align: center; }
.u .artikel .ajakan-kelas__catatan { font-size: .92rem; color: var(--teks-2); }
.u .artikel .ajakan-kelas .tombol-grup { justify-content: center; margin-top: 14px; }
html[data-tema="gelap"] .u .artikel .ajakan-kelas { background: #16212b; border-color: #2a3a48; }
html[data-tema="gelap"] .u .artikel .ajakan-kelas__label { color: #6FB4F5; }

/* Bagian Sumber: font kecil, tidak bersaing dengan isi artikel. */
.u .artikel .bagian-sumber { margin-top: 32px; font-size: .82rem; line-height: 1.55; color: var(--teks-2); }
.u .artikel .bagian-sumber h2 { margin: 0 0 8px; font-size: 1rem; }
.u .artikel .bagian-sumber p, .u .artikel .bagian-sumber li { font-size: .82rem; line-height: 1.55; margin-bottom: 6px; }