/* ==========================================================================
   Manajemen Risiko - ringkasan, matriks 5x5, daftar risiko, formulir.

   Palet hanya dua keluarga warna: BIRU untuk yang masih aman (Rendah,
   Sedang) dan MERAH untuk yang perlu ditangani (Tinggi, Ekstrem). Nadanya
   terang-bersih, bukan warna gelap, tetapi tetap bertingkat jelas: biru
   muda -> biru, merah muda -> merah.
   ========================================================================== */

#risiko-root {
  --r-rendah-bg: #EBF3FE; --r-rendah-ink: #2278CE; --r-rendah-garis: #C8DFF9;
  --r-sedang-bg: #D6E7FB; --r-sedang-ink: #1B65B8; --r-sedang-garis: #AACDF2;
  --r-tinggi-bg: #FDE8E8; --r-tinggi-ink: #DE4444; --r-tinggi-garis: #F7C6C6;
  --r-ekstrem-bg: #FBD4D4; --r-ekstrem-ink: #C93232; --r-ekstrem-garis: #F0A8A8;
  --r-netral-bg: #EFF4FA; --r-netral-ink: #3A6591; --r-netral-garis: #B9CFE6;
}

#risiko-root > .section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
#risiko-root > .section + .section { margin-top: 18px; }

/* ---- ringkasan: kartu putih dengan garis tingkat, bukan blok warna ---- */
.risiko-ringkasan { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.risiko-ring {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 3px solid var(--border); border-radius: 10px;
  padding: 13px 14px; background: var(--card); color: var(--ink);
  font-family: inherit; cursor: pointer; text-align: center;
}
.risiko-ring strong { font-size: 1.45rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.risiko-ring span { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.risiko-ring.aktif { background: var(--bg); box-shadow: inset 0 0 0 1px var(--ink-soft); }
.risiko-ring--ekstrem { border-color: var(--r-ekstrem-garis); }
.risiko-ring--ekstrem strong { color: var(--r-ekstrem-ink); }
.risiko-ring--tinggi { border-color: var(--r-tinggi-garis); }
.risiko-ring--tinggi strong { color: var(--r-tinggi-ink); }
.risiko-ring--sedang { border-color: var(--r-sedang-garis); }
.risiko-ring--sedang strong { color: var(--r-sedang-ink); }
.risiko-ring--rendah { border-color: var(--r-rendah-garis); }
.risiko-ring--rendah strong { color: var(--r-rendah-ink); }
.risiko-ring--tinjau { cursor: default; border-color: var(--r-netral-garis); }
.risiko-ring--tinjau strong { color: var(--muted); }
.risiko-ring--tinjau.perlu { border-color: var(--r-netral-ink); }
.risiko-ring--tinjau.perlu strong { color: var(--r-netral-ink); }

/* ---- matriks 5x5 ---- */
.risiko-matriks { margin-top: 20px; }
.risiko-matriks-grid { display: grid; grid-template-columns: 42px repeat(5, 1fr); gap: 3px; }
.risiko-matriks-sudut, .risiko-matriks-kepala {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 800; color: var(--red); min-height: 32px;
}
.risiko-matriks-sudut { font-size: .68rem; font-weight: 700; letter-spacing: .03em; color: var(--muted); }
.risiko-sel {
  position: relative; min-height: 52px; border-radius: 4px; padding: 5px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center;
  border: 1px solid transparent;
}
/* Angka skor & kode risiko di dalam kotak dibuat HITAM polos - warna latar
   sudah cukup menunjukkan tingkatnya, teks hitam lebih mudah dibaca. */
.risiko-sel-skor { font-size: .72rem; font-weight: 700; color: #16161B; opacity: .8; }
.risiko-sel-kode { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 5px; font-size: .68rem; font-weight: 800; line-height: 1.3; color: #16161B; }
.risiko-sel-kode span { white-space: nowrap; }
.risiko-sel--rendah { background: var(--r-rendah-bg); border-color: var(--r-rendah-garis); }
.risiko-sel--sedang { background: var(--r-sedang-bg); border-color: var(--r-sedang-garis); }
.risiko-sel--tinggi { background: var(--r-tinggi-bg); border-color: var(--r-tinggi-garis); }
.risiko-sel--ekstrem { background: var(--r-ekstrem-bg); border-color: var(--r-ekstrem-garis); }
.risiko-matriks-ket { margin-top: 10px; color: var(--muted); font-size: .74rem; }

/* ---- toolbar ---- */
.risiko-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.risiko-input {
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
  background: var(--bg); color: var(--ink); font-weight: 400; font-size: .8rem; font-family: inherit; min-width: 150px;
}
#risiko-cari { flex: 1; min-width: 200px; }
.risiko-jumlah { color: var(--muted); font-size: .76rem; margin-left: auto; }
.risiko-btn {
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 13px;
  background: var(--card); color: var(--ink-soft); font-weight: 700; font-size: .78rem; font-family: inherit; cursor: pointer;
}
.risiko-btn:hover { background: var(--bg); }
.risiko-btn--tambah { background: var(--red); color: #fff; border-color: var(--red); }
.risiko-btn--tambah:hover { background: var(--red-dark); border-color: var(--red-dark); }
.risiko-btn--ok { color: var(--r-rendah-ink); }
.risiko-btn-hapus { color: var(--red-dark); }

/* ---- tabel risiko ---- */
.risiko-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: 10px;
}
.risiko-tabel { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 700px; font-size: .82rem; }
.risiko-tabel th {
  position: sticky; top: 0; z-index: 1; background: #F5F5F7; color: var(--ink-soft);
  text-align: left; font-size: .72rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.risiko-tabel td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.risiko-tabel tbody tr:last-child td { border-bottom: 0; }
.risiko-tabel tbody tr:hover td { background: var(--bg); }
.risiko-baris { border-left: 4px solid transparent; }
.risiko-baris--ekstrem td:first-child { box-shadow: inset 4px 0 0 var(--r-ekstrem-ink); }
.risiko-baris--tinggi td:first-child { box-shadow: inset 4px 0 0 var(--r-tinggi-ink); }
.risiko-baris--sedang td:first-child { box-shadow: inset 4px 0 0 var(--r-sedang-ink); }
.risiko-baris--rendah td:first-child { box-shadow: inset 4px 0 0 var(--r-rendah-ink); }
.risiko-td-kode { font-weight: 800; color: var(--muted); white-space: nowrap; }
.risiko-td-nama { min-width: 170px; max-width: 320px; }
.risiko-nama-btn {
  display: block; border: 0; background: transparent; padding: 0; margin: 0;
  color: var(--ink); font-weight: 700; font-size: .86rem; font-family: inherit; text-align: left; cursor: pointer; white-space: normal;
}
.risiko-nama-btn:hover { text-decoration: underline; }
.risiko-td-kategori { display: block; margin-top: 3px; color: var(--muted); font-size: .72rem; font-weight: 600; }
.risiko-td-skor { white-space: nowrap; }
.risiko-td-sisa { display: block; margin-top: 4px; color: var(--r-rendah-ink); font-size: .7rem; font-weight: 700; }
.risiko-td-sisa b { color: var(--r-sedang-ink); }
.risiko-td-sisa--kosong { color: var(--muted); font-weight: 600; }
.risiko-td-kosong { color: var(--muted); }
.risiko-td-lewat { color: var(--r-ekstrem-ink); font-weight: 700; }
/* Kolom Aksi menempel di kanan: tetap terlihat walau tabel digeser. */
.risiko-td-aksi, .risiko-th-aksi { position: sticky; right: 0; white-space: nowrap; box-shadow: -8px 0 10px -8px rgba(20, 20, 26, .18); }
.risiko-td-aksi { background: var(--card); z-index: 1; }
.risiko-th-aksi { z-index: 2; }
.risiko-tabel tbody tr:hover td.risiko-td-aksi { background: var(--bg); }
.risiko-aksi-ikon { display: flex; gap: 6px; }
.risiko-ikon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink-soft); cursor: pointer; }
.risiko-ikon svg { width: 16px; height: 16px; }
.risiko-ikon:hover { background: var(--bg); color: var(--ink); }
.risiko-ikon--tinjau { color: var(--r-sedang-ink); border-color: var(--r-sedang-garis); background: var(--r-rendah-bg); }
/* Lencana tingkat: kotak bergaris, bukan pil berwarna manis. */
.risiko-badge {
  border: 1px solid currentColor; border-radius: 4px; padding: 3px 9px;
  font-size: .71rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.risiko-badge--ekstrem { background: var(--r-ekstrem-bg); color: var(--r-ekstrem-ink); }
.risiko-badge--tinggi { background: var(--r-tinggi-bg); color: var(--r-tinggi-ink); }
.risiko-badge--sedang { background: var(--r-sedang-bg); color: var(--r-sedang-ink); }
.risiko-badge--rendah { background: var(--r-rendah-bg); color: var(--r-rendah-ink); }
.risiko-chip {
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 9px;
  background: var(--bg); color: var(--ink-soft); font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.risiko-chip--status { background: var(--r-netral-bg); color: var(--r-netral-ink); border-color: var(--r-netral-garis); }
.risiko-chip--status.risiko-chip--selesai { background: var(--r-sedang-bg); color: var(--r-sedang-ink); border-color: var(--r-sedang-garis); }

/* ---- modal ---- */
.risiko-modal { max-width: 760px; width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; }
.risiko-modal-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.risiko-modal-close { border: 0; background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.risiko-modal-isi { flex: 1; min-height: 0; overflow: auto; margin-top: 12px; }
.risiko-modal-aksi { position: sticky; bottom: -20px; background: var(--card); padding-top: 14px; }
.risiko-konfirmasi { font-size: .86rem; color: var(--ink-soft); }
/* Lencana & warna tingkat dipakai juga di dalam dialog. */
.risiko-modal {
  --r-rendah-bg: #EBF3FE; --r-rendah-ink: #2278CE; --r-rendah-garis: #C8DFF9;
  --r-sedang-bg: #D6E7FB; --r-sedang-ink: #1B65B8; --r-sedang-garis: #AACDF2;
  --r-tinggi-bg: #FDE8E8; --r-tinggi-ink: #DE4444; --r-tinggi-garis: #F7C6C6;
  --r-ekstrem-bg: #FBD4D4; --r-ekstrem-ink: #C93232; --r-ekstrem-garis: #F0A8A8;
  --r-netral-bg: #EFF4FA; --r-netral-ink: #3A6591;
}

/* ---- formulir ---- */
.risiko-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.risiko-field { display: flex; flex-direction: column; gap: 5px; font-size: .74rem; font-weight: 700; color: var(--ink-soft); }
.risiko-field--wide { grid-column: 1 / -1; }
.risiko-field input, .risiko-field select, .risiko-field textarea, .risiko-set textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
  background: var(--bg); color: var(--ink); font-weight: 400; font-size: .82rem; font-family: inherit;
}
.risiko-field textarea, .risiko-set textarea { resize: vertical; }
.risiko-skor-live { flex-direction: row; gap: 8px; flex-wrap: wrap; }

/* ---- pengurang mitigasi (skor awal - skor sisa) ---- */
.risiko-mitigasi-box { border: 2px solid var(--r-sedang-garis); border-radius: 10px; padding: 12px 14px 14px; margin: 4px 0 0; background: #F7FAFE; }
.risiko-mitigasi-box legend { padding: 0 6px; font-size: .8rem; font-weight: 800; color: var(--r-sedang-ink); }
.risiko-mitigasi-ket { margin: 0 0 10px; font-size: .74rem; line-height: 1.5; color: var(--ink-soft); }
.risiko-mitigasi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.risiko-pengurang { margin-top: 12px; }
.risiko-pengurang-baris { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.risiko-pengurang-minus { font-size: 1rem; font-weight: 800; color: var(--r-sedang-ink); }
.risiko-pengurang-sama { font-size: 1rem; font-weight: 800; color: var(--muted); }
.risiko-pengurang-teks { margin: 8px 0 0; font-size: .78rem; color: var(--ink-soft); }
.risiko-pengurang-teks b { color: var(--r-sedang-ink); }
.risiko-pengurang-kosong { margin: 0; font-size: .76rem; color: var(--muted); font-style: italic; }
.risiko-rinci .risiko-pengurang { margin: 0 0 14px; padding: 12px 14px; border: 2px solid var(--r-sedang-garis); border-radius: 10px; background: #F7FAFE; }

/* ---- rincian ---- */
.risiko-rinci-nilai { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.risiko-rinci-nilai p { color: var(--ink-soft); font-size: .8rem; margin: 0; }
.risiko-rinci-baris { border-top: 1px solid var(--border); padding: 9px 0; }
.risiko-rinci-baris span { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .03em; color: var(--muted); }
.risiko-rinci-baris p { margin: 3px 0 0; font-size: .84rem; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }

/* ---- pengaturan ---- */
.risiko-set h4 { margin: 16px 0 8px; font-size: .82rem; }
.risiko-set h4:first-child { margin-top: 0; }
.risiko-set-ambang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.risiko-set-ket { color: var(--muted); font-size: .74rem; margin-top: 6px; }
.risiko-status-daftar { display: grid; gap: 8px; margin: 10px 0; }
.risiko-status-baris { display: flex; align-items: center; gap: 10px; }
.risiko-status-baris input[type="text"] { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; background: var(--bg); color: var(--ink); font-size: .82rem; font-family: inherit; }
.risiko-status-selesai { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; cursor: pointer; }
.risiko-status-baris .risiko-btn { padding: 8px 12px; }

/* ---- toast ---- */
.risiko-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  background: #1F3A5A; color: #fff; padding: 10px 16px; border-radius: 8px;
  font-size: .8rem; font-weight: 600; opacity: 0; pointer-events: none; transition: .18s; z-index: 120;
}
.risiko-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  #risiko-root > .section { padding: 14px; }
  .risiko-ringkasan { grid-template-columns: repeat(3, 1fr); }
  .risiko-matriks-grid { grid-template-columns: 30px repeat(5, 1fr); gap: 3px; }
  .risiko-sel { min-height: 46px; }
  .risiko-jumlah { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  .risiko-form { grid-template-columns: 1fr; }
  .risiko-field--wide { grid-column: auto; }
  .risiko-ringkasan { grid-template-columns: repeat(2, 1fr); }
  .risiko-set-ambang { grid-template-columns: 1fr; }
  .risiko-mitigasi-grid { grid-template-columns: 1fr; }
}

/* ---- tinjauan berkala ---- */
.risiko-tinjau-info { margin: 0 0 6px; font-size: .8rem; color: var(--ink-soft); }
.risiko-tinjau-cek { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--r-netral-bg); color: var(--r-netral-ink); font-size: .76rem; line-height: 1.5; }
.risiko-tinjau .risiko-pengurang { margin: 0; padding: 10px 12px; border: 2px solid var(--r-sedang-garis); border-radius: 10px; background: #F7FAFE; }

/* ---- riwayat tinjauan ---- */
.risiko-riwayat { display: grid; gap: 8px; margin-top: 4px; }
.risiko-riwayat-item { border: 1px solid var(--border); border-left: 3px solid var(--r-sedang-ink); border-radius: 8px; padding: 10px 12px; background: var(--card); }
.risiko-riwayat-atas { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: .8rem; }
.risiko-riwayat-kode { border: 0; background: transparent; padding: 0; color: var(--ink); font-weight: 700; font-size: .8rem; font-family: inherit; text-align: left; cursor: pointer; }
.risiko-riwayat-kode:hover { text-decoration: underline; }
.risiko-riwayat-oleh { color: var(--muted); font-size: .74rem; }
.risiko-riwayat-nilai { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.risiko-riwayat-panah { color: var(--muted); font-weight: 800; }
.risiko-riwayat-catatan { margin: 6px 0 0; font-size: .8rem; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
.risiko-riwayat-kosong { margin: 2px 0 0; font-size: .8rem; color: var(--muted); font-style: italic; }

/* ---- pratinjau laporan A4 ---- */
.risiko-modal.risiko-modal--laporan { max-width: 900px; width: min(900px, calc(100vw - 24px)); }
.risiko-laporan-kertas { display: grid; gap: 16px; padding: 14px; background: #E9EAEE; border-radius: 10px; }
.risiko-laporan-halaman { display: block; width: 100%; max-width: 794px; height: auto; margin: 0 auto; background: #fff; box-shadow: 0 2px 10px rgba(20, 20, 26, .14); }

/* ---- rincian: kartu berkelompok ---- */
.rinci-chip { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.rinci-skor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rinci-skor-kotak { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 10px; border: 2px solid var(--border); border-radius: 10px; text-align: center; background: var(--card); }
.rinci-skor-kotak span { font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rinci-skor-kotak strong { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.rinci-skor-kotak small { font-size: .72rem; color: var(--ink-soft); }
.rinci-skor-kotak--rendah { background: var(--r-rendah-bg); border-color: var(--r-rendah-garis); }
.rinci-skor-kotak--rendah strong { color: var(--r-rendah-ink); }
.rinci-skor-kotak--sedang { background: var(--r-sedang-bg); border-color: var(--r-sedang-garis); }
.rinci-skor-kotak--sedang strong { color: var(--r-sedang-ink); }
.rinci-skor-kotak--tinggi { background: var(--r-tinggi-bg); border-color: var(--r-tinggi-garis); }
.rinci-skor-kotak--tinggi strong { color: var(--r-tinggi-ink); }
.rinci-skor-kotak--ekstrem { background: var(--r-ekstrem-bg); border-color: var(--r-ekstrem-garis); }
.rinci-skor-kotak--ekstrem strong { color: var(--r-ekstrem-ink); }
.rinci-judul { margin: 18px 0 8px; padding-left: 9px; border-left: 3px solid var(--red); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.rinci-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rinci-kartu { border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; background: var(--card); }
.rinci-kartu h5 { margin: 0 0 5px; font-size: .72rem; font-weight: 800; color: var(--muted); }
.rinci-kartu p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
.rinci-kartu--biru { background: #F7FAFE; border-color: var(--r-rendah-garis); }
.rinci-kartu--biru h5 { color: var(--r-sedang-ink); }
.rinci-kosong { color: var(--muted); font-style: italic; }
.rinci-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rinci-info-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.rinci-info-item--lebar { grid-column: 1 / -1; }
.rinci-info-item span { font-size: .7rem; font-weight: 700; color: var(--muted); }
.rinci-info-item b { font-size: .84rem; font-weight: 700; color: var(--ink); }
.rinci-lewat { color: var(--r-ekstrem-ink) !important; }
@media (max-width: 600px) {
  .rinci-skor, .rinci-grid, .rinci-info { grid-template-columns: 1fr; }
}
/* Tombol tambahan di kaki dialog (Laporan PDF, Tinjau) diberi bingkai
   supaya jelas bisa diklik, tidak terlihat seperti teks biasa. */
.risiko-modal-aksi .confirm-modal-btn:not(.cancel):not(.confirm) { border: 1px solid var(--border); background: var(--card); color: var(--ink); }
.risiko-modal-aksi .confirm-modal-btn:not(.cancel):not(.confirm):hover { background: var(--bg); }

/* ---- kelola riwayat tinjauan ---- */
.risiko-riwayat-kelola { display: inline-flex; gap: 4px; margin-left: auto; }
.risiko-ikon--kecil { width: 28px; height: 28px; }
.risiko-ikon--kecil svg { width: 14px; height: 14px; }
.risiko-ikon--hapus { color: var(--red-dark); }
.risiko-ikon--hapus:hover { color: var(--red-dark); background: #FDECEC; }
.risiko-riwayat-tambah { margin-top: 10px; color: var(--r-sedang-ink); border-color: var(--r-sedang-garis); background: var(--r-rendah-bg); }

/* ---- judul dialog Rincian: fokus utama ---- */
.risiko-modal--rinci .risiko-modal-kepala { position: relative; justify-content: center; padding: 2px 40px 12px; border-bottom: 1px solid var(--border); }
.risiko-modal--rinci .risiko-modal-kepala .confirm-modal-text { flex: 1; margin: 0; text-align: center; }
.risiko-modal--rinci .risiko-modal-close { position: absolute; top: 0; right: 0; }
.rinci-judul-kode { display: block; margin-bottom: 4px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; color: var(--red); }
.rinci-judul-nama { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
@media (max-width: 600px) { .rinci-judul-nama { font-size: 1.12rem; } }