/* Blok soal latihan di artikel (blog/soal.py + soal.js). */
.soal { --oranye: #ea580c; --hijau: #16a34a; --merah: #dc2626; --garis: #f1e4d6;
  margin: 2em 0; padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--garis); border-radius: 1.25rem; background: #fff;
  box-shadow: 0 1px 2px rgba(124, 45, 18, .04), 0 10px 30px -18px rgba(124, 45, 18, .18); scroll-margin-top: 6rem; }
.soal > * + * { margin-top: 0; }
.soal-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .85rem; }
.soal .soal-judul { margin: 0 .25rem 0 0; font-size: 1.05rem; font-weight: 700; color: #111827; scroll-margin-top: 6rem; }
.soal-tag, .soal-jenis { display: inline-flex; padding: .2rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.5; }
.soal-tag { background: #fff7ed; color: #9a3412; }
.soal-jenis { margin-left: auto; background: #1e3a5f; color: #fff; }
.soal-batang { color: #1f2937; }
.soal-batang p { margin: 0 0 .75rem; }

/* Pilihan */
.soal-opsi { display: grid; gap: .6rem; margin-top: .25rem; }
.soal-pilihan { position: relative; display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem; border: 2px solid #eee3d8;
  border-radius: .9rem; background: #fff; cursor: pointer; line-height: 1.45;
  transition: border-color .18s, background-color .18s, transform .18s, box-shadow .18s; }
.soal-pilihan:hover { border-color: #fdba74; transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(234, 88, 12, .5); }
.soal-pilihan input, .soal-pilih input { position: absolute; opacity: 0; pointer-events: none; }
.soal-huruf { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: #f6efe8; color: #7c2d12; font-size: .85rem; font-weight: 700; transition: background-color .18s, color .18s, transform .18s; }
.soal[data-jenis="pgk"] .soal-huruf { border-radius: .55rem; }
.soal-teks { flex: 1; color: #1f2937; }
.soal-pilihan.dipilih { border-color: var(--oranye); background: #fff7ed; }
.soal-pilihan.dipilih .soal-huruf { background: var(--oranye); color: #fff; animation: soal-pop .22s ease-out; }
.soal-pilihan:has(input:focus-visible), .soal-pilih:has(input:focus-visible) { outline: 3px solid rgba(234, 88, 12, .35); outline-offset: 2px; }

/* Tabel kategori */
.soal-tabel { overflow-x: auto; border: 1px solid #eee3d8; border-radius: .9rem; }
.soal-tabel table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.45; }
.soal-tabel th { padding: .65rem .8rem; background: #fff7ed; color: #7c2d12; font-weight: 600; font-size: .85rem; text-align: center; white-space: nowrap; }
.soal-tabel th:first-child { text-align: left; white-space: normal; }
.soal-tabel td { padding: .7rem .8rem; border-top: 1px solid #f3ebe3; text-align: center; vertical-align: middle; transition: background-color .2s; }
.soal-tabel td.soal-pernyataan { text-align: left; color: #1f2937; }
.soal-pilih { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; cursor: pointer; }
.soal-pilih::before { content: ""; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid #cdb5a0; background: #fff;
  transition: border-width .15s, border-color .15s; }
.soal-pilih:hover::before { border-color: #fb923c; }
.soal-pilih.dipilih::before { border: 6px solid var(--oranye); }

/* Hasil pemeriksaan */
.soal-pilihan.benar { border-color: var(--hijau); background: #f0fdf4; }
.soal-pilihan.benar .soal-huruf { background: var(--hijau); color: #fff; }
.soal-pilihan.salah { border-color: var(--merah); background: #fef2f2; animation: soal-geleng .35s ease-in-out; }
.soal-pilihan.salah .soal-huruf { background: var(--merah); color: #fff; }
.soal-pilihan.terlewat { border-style: dashed; border-color: var(--hijau); }
.soal-pilihan.benar::after, .soal-pilihan.salah::after, .soal-pilihan.terlewat::after { margin-left: auto; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.soal-pilihan.benar::after { content: "✓ Benar"; color: var(--hijau); }
.soal-pilihan.salah::after { content: "Kurang tepat"; color: var(--merah); }
.soal-pilihan.terlewat::after { content: "Terlewat"; color: var(--hijau); }
.soal[data-jenis="pg"] .soal-pilihan.terlewat { border-style: solid; background: #f0fdf4; }
.soal[data-jenis="pg"] .soal-pilihan.terlewat::after { content: "Jawaban benar"; }
.soal-pilihan.terlewat .soal-huruf { background: #dcfce7; color: var(--hijau); }
.soal[data-jenis="pg"] .soal-pilihan.terlewat .soal-huruf { background: var(--hijau); color: #fff; }
.soal-tabel tr.benar td { background: #f0fdf4; }
.soal-tabel tr.salah td { background: #fef2f2; }
.soal-tabel tr.salah .soal-pilih.dipilih::before { border-color: var(--merah); }
.soal-tabel .soal-pilih.kunci::before { border: 6px solid var(--hijau); }
.soal[data-status] .soal-pilihan, .soal[data-status] .soal-pilih { cursor: default; }
.soal[data-status] .soal-pilihan:hover { transform: none; box-shadow: none; }

/* Aksi */
.soal-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
.soal-periksa { padding: .6rem 1.15rem; border-radius: .8rem; background: var(--oranye); color: #fff; font-weight: 600; font-size: .9rem;
  transition: background-color .18s, transform .1s, box-shadow .18s; box-shadow: 0 6px 16px -8px rgba(234, 88, 12, .7); }
.soal-periksa:hover:not(:disabled) { background: #c2410c; }
.soal-periksa:active:not(:disabled) { transform: scale(.97); }
.soal-periksa:disabled { background: #f3e8dd; color: #b08a6e; box-shadow: none; cursor: not-allowed; }
.soal[data-status] .soal-periksa { background: #fff; color: #9a3412; box-shadow: inset 0 0 0 2px #fed7aa; }
.soal[data-status] .soal-periksa:hover { background: #fff7ed; }
.soal-periksa:focus-visible { outline: 3px solid rgba(234, 88, 12, .35); outline-offset: 2px; }
.soal-hasil { margin: 0; display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; }
.soal-hasil:empty { display: none; }
.soal[data-status="tepat"] .soal-hasil { color: var(--hijau); animation: soal-muncul .3s ease-out; }
.soal[data-status="keliru"] .soal-hasil { color: var(--merah); animation: soal-muncul .3s ease-out; }
.soal-hasil::before { content: ""; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; }
.soal[data-status="tepat"] .soal-hasil::before { background: var(--hijau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .8rem no-repeat; }
.soal[data-status="keliru"] .soal-hasil::before { background: var(--merah) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / .75rem no-repeat; }

/* Pembahasan */
.soal-bahas { margin-top: .85rem; border-top: 1px dashed #eadbcc; padding-top: .7rem; }
.soal-bahas > summary { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none; font-size: .9rem; font-weight: 600; color: #9a3412; }
.soal-bahas > summary::-webkit-details-marker { display: none; }
.soal-bahas > summary::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  margin-left: .15rem; transform: translateY(-.15rem) rotate(45deg); transition: transform .2s; }
.soal-bahas[open] > summary::after { transform: translateY(.1rem) rotate(-135deg); }
.soal-bahas > summary:focus-visible { outline: 3px solid rgba(234, 88, 12, .35); outline-offset: 3px; border-radius: .3rem; }
.soal-bahas-isi { margin-top: .7rem; padding: .85rem 1rem; border-left: 3px solid #fb923c; border-radius: 0 .8rem .8rem 0; background: #fffaf5;
  color: #374151; font-size: .95rem; line-height: 1.7; }
.soal-bahas[open] .soal-bahas-isi { animation: soal-muncul .28s ease-out; }
.soal-bahas-isi p { margin: .35rem 0; }
.soal-kunci { font-weight: 700; color: #7c2d12; }

/* Skor mengambang */
.soal-skor { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; gap: .75rem;
  max-width: calc(100vw - 2rem); padding: .45rem .45rem .45rem 1.1rem; border-radius: 999px; background: #1c0c00; color: #fff; font-size: .875rem;
  box-shadow: 0 16px 40px -12px rgba(28, 12, 0, .55); transform: translate(-50%, 160%); opacity: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
.soal-skor.tampil { transform: translate(-50%, 0); opacity: 1; }
.soal-skor b { color: #fdba74; font-variant-numeric: tabular-nums; }
.soal-skor span { white-space: nowrap; }
.soal-skor i { font-style: normal; color: #d6c4b5; }
.soal-skor button { padding: .45rem .9rem; border-radius: 999px; background: #ea580c; color: #fff; font-weight: 600; white-space: nowrap; transition: background-color .18s; }
.soal-skor button:hover { background: #f97316; }
.soal-skor button:focus-visible { outline: 3px solid rgba(253, 186, 116, .6); outline-offset: 2px; }

@keyframes soal-pop { 0% { transform: scale(.8); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes soal-geleng { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes soal-muncul { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .soal { padding: 1rem .9rem .85rem; border-radius: 1rem; }
  .soal-jenis { margin-left: 0; }
  .soal-pilihan { gap: .7rem; padding: .65rem .75rem; }
  .soal-pilihan.benar::after, .soal-pilihan.salah::after, .soal-pilihan.terlewat::after { display: none; }
  .soal-tabel td, .soal-tabel th { padding: .55rem .5rem; }
  .soal-pilih { width: 2.4rem; height: 2.4rem; }
  .soal-skor { font-size: .8125rem; gap: .6rem; }
}
@media (max-width: 400px) { .soal-skor i { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .soal *, .soal-skor { animation: none !important; transition: none !important; }
}