/* =====================================================
   TRYOUT SKD — CSS TERPADU
   Aturan duplikat dengan selector dan lingkup media yang
   sama telah digabung. Nilai deklarasi terbaru dipertahankan.
   ===================================================== */

body {
  font-family: Arial, sans-serif;
  background-color: #f1f5f9;
  color: #1e293b;
  margin: 0;
  padding: 40px;
}

h1 {
  color: #1e293b;
  font-size: 42px;
  font-weight: 800;
  margin-top: 20px;
  margin-bottom: 12px;
}

p {
  font-size: 16px;
  line-height: 1.6;
  color: #64748b;
}

.container > p:not(.label-platform) {
  max-width: 600px;
  margin: 0 auto;
}

.container {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.btn-mulai {
  background-color: #1d4ed8;
  color: #ffffff;
  padding: 14px 28px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 15px;
}

.btn-mulai:hover {
  background-color: #1e40af;
}

.label-platform {
  display: inline-block;
  color: #1d4ed8;
  background-color: #dbeafe;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
}

.fitur {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.fitur p:first-child {
  color: #1d4ed8;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
}

.fitur p:last-child {
  max-width: 600px;
  margin: 0 auto;
}

#halaman-ujian {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}

#halaman-ujian h2 {
  color: #1e293b;
  font-size: 30px;
  margin-top: 0;
}

#halaman-ujian h3 {
  margin-top: 30px;
  color: #1d4ed8;
  text-align: left;
}

#halaman-ujian ul {
  text-align: left;
  line-height: 1.8;
  color: #475569;
  padding-left: 25px;
}

#halaman-ujian li {
  margin-bottom: 8px;
}

#area-soal {
  margin-top: 30px;
  padding: 25px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  text-align: left;
}

#area-soal h3 {
  color: #1d4ed8;
  margin-top: 0;
}

#area-soal p {
  color: #334155;
  font-size: 17px;
}

.nomor-navigasi {
  width: 45px;
  height: 45px;
  margin: 5px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #f3f4f6;
  color: #333333;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.nomor-navigasi.aktif {
  background-color: #2563eb;
  color: white;
  border-color: #2563eb;
}

.nomor-navigasi.terjawab {
  background-color: #16a34a;
  color: white;
  border-color: #16a34a;
}

.nomor-navigasi.terjawab.aktif {
  background-color: #2563eb;
  color: white;
  border-color: #2563eb;
}

button:disabled {
  background-color: #9ca3af;
  color: white;
  cursor: not-allowed;
  opacity: 0.7;
}

#panel-hasil {
  margin-top: 30px;
  padding: 25px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#panel-hasil h2 {
  text-align: center;
  color: #1e3a8a;
  margin-bottom: 25px;
}

.rincian-hasil {
  display: flex;
  justify-content: space-around;
  gap: 15px;
  text-align: center;
}

.item-hasil {
  flex: 1;
  padding: 20px 10px;
  background-color: #f3f4f6;
  border-radius: 10px;
}

.item-hasil h3 {
  font-size: 15px;
  color: #4b5563;
}

.item-hasil p {
  font-size: 28px;
  font-weight: bold;
  color: #1e3a8a;
}

.nilai-akhir {
  margin-top: 20px;
  padding: 25px;
  text-align: center;
  background-color: #eff6ff;
  border-radius: 10px;
}

.nilai-akhir h3 {
  color: #1e3a8a;
}

.nilai-akhir p {
  font-size: 42px;
  font-weight: bold;
  color: #2563eb;
}

@media (max-width: 600px) {
  .rincian-hasil {
    flex-direction: column;
  }

  .item-hasil {
    width: 100%;
    box-sizing: border-box;
  }

  #panel-hasil {
    padding: 15px;
  }

  .nilai-akhir p {
    font-size: 34px;
  }
}

#area-review {
  margin-top: 30px;
}

#area-review h2 {
  color: #1e3a8a;
  margin-bottom: 20px;
  text-align: center;
}

.kartu-review {
  margin-bottom: 20px;
  padding: 25px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.kartu-review h3 {
  color: #1e3a8a;
  margin-bottom: 15px;
}

.kartu-review p {
  line-height: 1.6;
}

.pilihan-review {
  margin: 15px 0;
}

.pilihan-review p {
  padding: 12px 15px;
  margin: 8px 0;
  border-radius: 8px;
  background-color: #f3f4f6;
}

.pilihan-review .jawaban-benar {
  background-color: #dcfce7;
  border: 1px solid #16a34a;
  color: #166534;
}

.pilihan-review .jawaban-peserta {
  border: 2px solid #2563eb;
  font-weight: bold;
}

.pilihan-review .jawaban-salah {
  background-color: #fee2e2;
  border: 1px solid #dc2626;
  color: #991b1b;
}

.status-review {
  display: inline-block;
  padding: 8px 16px;
  margin: 15px 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
}

.status-benar {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #16a34a;
}

.status-salah {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #dc2626;
}

.pembahasan-review {
  margin-top: 20px;
  padding: 20px;
  background-color: #eff6ff;
  border-left: 5px solid #2563eb;
  border-radius: 8px;
}

.pembahasan-review h4 {
  margin: 0 0 10px;
  color: #1e3a8a;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.pembahasan-review p {
  margin: 0;
  color: #374151;
  line-height: 1.7;
  text-align: justify;
}

.informasi-jawaban {
  display: flex;
  gap: 15px;
  margin: 20px 0;
}

.jawaban-anda,
.kunci-jawaban {
  flex: 1;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jawaban-anda {
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
}

.kunci-jawaban {
  background-color: #dcfce7;
  border: 1px solid #16a34a;
}

.jawaban-anda span,
.kunci-jawaban span {
  font-size: 12px;
  font-weight: bold;
  color: #4b5563;
}

.jawaban-anda strong,
.kunci-jawaban strong {
  font-size: 22px;
  color: #1e3a8a;
}

.kunci-jawaban strong {
  color: #166534;
}

@media (max-width: 600px) {
  .informasi-jawaban {
    flex-direction: column;
  }
}

#tampilan-timer {
  width: fit-content;
  min-width: 180px;
  margin: 0 auto 25px;
  padding: 15px 30px;
  text-align: center;
  background-color: #eff6ff;
  border: 2px solid #2563eb;
  border-radius: 12px;
}

#tampilan-timer span {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #4b5563;
  letter-spacing: 1px;
}

#timer {
  margin: 8px 0 0;
  font-size: 36px;
  font-weight: bold;
  color: #1e3a8a;
  font-variant-numeric: tabular-nums;
}

#tampilan-timer.waktu-kritis {
  background-color: #fee2e2;
  border-color: #dc2626;
}

#tampilan-timer.waktu-kritis #timer {
  color: #991b1b;
}

.grafik-hasil {
  margin-top: 25px;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.grafik-hasil h3 {
  margin-bottom: 25px;
  text-align: center;
  color: #1e3a8a;
}

.grafik-item {
  display: grid;
  grid-template-columns: 45px 1fr 45px;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.grafik-item span {
  font-weight: bold;
  color: #374151;
}

.grafik-item strong {
  text-align: right;
  color: #1e3a8a;
}

.grafik-track {
  height: 18px;
  background: #e5e7eb;
  border-radius: 20px;
  overflow: hidden;
}

.grafik-bar {
  height: 100%;
  width: 0%;
  background: #2563eb;
  border-radius: 20px;
  transition: width 0.8s ease;
}

@media (max-width: 600px) {
  .grafik-hasil {
    padding: 15px;
  }

  .grafik-item {
    grid-template-columns: 35px 1fr 35px;
    gap: 8px;
  }
}

.evaluasi-hasil {
  margin-top: 25px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.evaluasi-hasil h3 {
  color: #1e3a8a;
  text-align: center;
  margin-bottom: 20px;
}

.evaluasi-item {
  padding: 15px;
  margin-bottom: 12px;
  background: #ffffff;
  border-radius: 8px;
  border-left: 4px solid #2563eb;
}

.evaluasi-item strong {
  display: block;
  color: #1e3a8a;
  margin-bottom: 8px;
}

.evaluasi-item span {
  display: inline-block;
  font-weight: bold;
  color: #15803d;
  margin-bottom: 6px;
}

.evaluasi-item p {
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 600px) {
  .evaluasi-hasil {
    padding: 15px;
  }
}

#halaman-paket h2 {
  text-align: center;
  font-size: 28px;
  color: #1e293b;
  margin-bottom: 10px;
}

#halaman-paket > p {
  text-align: center;
  color: #64748b;
  margin-bottom: 35px;
}

#daftar-paket {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.kartu-paket h3 {
  color: #1e293b;
  font-size: 20px;
  margin-bottom: 12px;
}

.kartu-paket p {
  color: #64748b;
  line-height: 1.6;
}

.kartu-paket h4 {
  color: #2563eb;
  font-size: 24px;
  margin: 20px 0 12px;
}

.btn-paket {
  width: 100%;
  padding: 12px;
  margin-top: 20px;
  border: none;
  border-radius: 8px;
  background-color: #2563eb;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-paket:hover {
  background-color: #1d4ed8;
}

#tombol-kembali-beranda {
  padding: 10px 18px;
  margin-bottom: 25px;
  background-color: #ffffff;
  color: #2563eb;
  border: 1px solid #2563eb;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#tombol-kembali-beranda:hover {
  background-color: #2563eb;
  color: #ffffff;
}

#halaman-detail-paket {
  max-width: 900px;
  margin: 40px auto;
  padding: 25px;
}

#halaman-detail-paket > h2 {
  color: #1e293b;
  font-size: 26px;
  margin-bottom: 25px;
}

#konten-detail-paket {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

#konten-detail-paket h3 {
  color: #1e293b;
  margin-bottom: 15px;
}

#konten-detail-paket p {
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 12px;
}

#tombol-kembali-katalog {
  padding: 10px 18px;
  margin-top: 20px;
  background-color: #ffffff;
  color: #2563eb;
  border: 1px solid #2563eb;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#tombol-kembali-katalog:hover {
  background-color: #2563eb;
  color: #ffffff;
}

.komposisi-soal {
  margin-top: 25px;
  padding: 20px;
  background-color: #f8fafc;
  border-radius: 10px;
}

.komposisi-soal h4 {
  color: #1e293b;
  font-size: 17px;
  margin-bottom: 15px;
}

.item-komposisi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 10px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.item-komposisi span {
  color: #475569;
  font-weight: 600;
}

.item-komposisi strong {
  color: #2563eb;
}

.info-penilaian {
  margin-top: 20px;
  padding: 20px;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
}

.info-penilaian h4 {
  color: #1e40af;
  font-size: 17px;
  margin-bottom: 15px;
}

.info-penilaian p {
  color: #475569;
  margin-bottom: 10px;
}

.info-penilaian p:last-child {
  color: #1e40af;
  font-weight: 700;
  border-top: 1px solid #bfdbfe;
  padding-top: 12px;
  margin-top: 12px;
}

.btn-mulai-ujian {
  width: 100%;
  padding: 14px;
  margin-top: 25px;
  border: none;
  border-radius: 8px;
  background-color: #2563eb;
  color: white;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.btn-mulai-ujian:disabled {
  background-color: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
}

#halaman-admin {
  max-width: 1100px;
  margin: 40px auto;
  padding: 25px;
}

#halaman-admin h2 {
  color: #1e293b;
  font-size: 28px;
  margin-bottom: 10px;
}

#halaman-admin > p {
  color: #64748b;
  margin-bottom: 30px;
}

#daftar-pengelolaan-paket {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.btn-ubah-status {
  width: 100%;
  padding: 12px;
  margin-top: 15px;
  border: none;
  border-radius: 8px;
  background-color: #16a34a;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-ubah-status:hover {
  background-color: #15803d;
}

.input-harga-paket {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
  color: #1e293b;
  box-sizing: border-box;
}

.input-harga-paket:focus {
  outline: none;
  border-color: #2563eb;
}

.btn-simpan-harga {
  width: 100%;
  padding: 11px;
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  background-color: #2563eb;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-simpan-harga:hover {
  background-color: #1d4ed8;
}

.btn-simpan-nama {
  width: 100%;
  padding: 11px;
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-simpan-nama:hover {
  background: #1d4ed8;
}

.input-deskripsi-paket {
  width: 100%;
  min-height: 90px;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #1e293b;
  box-sizing: border-box;
  resize: vertical;
}

.input-deskripsi-paket:focus {
  outline: none;
  border-color: #2563eb;
}

.btn-simpan-deskripsi {
  width: 100%;
  padding: 11px;
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-simpan-deskripsi:hover {
  background: #1d4ed8;
}

.input-durasi-paket {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
  color: #1e293b;
  box-sizing: border-box;
}

.input-durasi-paket:focus {
  outline: none;
  border-color: #2563eb;
}

.btn-simpan-durasi {
  width: 100%;
  padding: 11px;
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-simpan-durasi:hover {
  background: #1d4ed8;
}

.input-jumlah-soal {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
  color: #1e293b;
  box-sizing: border-box;
}

.input-jumlah-soal:focus {
  outline: none;
  border-color: #2563eb;
}

.btn-simpan-jumlah-soal {
  width: 100%;
  padding: 11px;
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-simpan-jumlah-soal:hover {
  background: #1d4ed8;
}

.input-twk,
.input-tiu,
.input-tkp {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  margin-bottom: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
  color: #1e293b;
  box-sizing: border-box;
}

.input-twk:focus,
.input-tiu:focus,
.input-tkp:focus {
  outline: none;
  border-color: #2563eb;
}

.btn-simpan-komposisi {
  width: 100%;
  padding: 11px;
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-simpan-komposisi:hover {
  background: #1d4ed8;
}

.input-nilai-twk,
.input-nilai-tiu,
.input-nilai-tkp {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  margin-bottom: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
  color: #1e293b;
  box-sizing: border-box;
}

.input-nilai-twk:focus,
.input-nilai-tiu:focus,
.input-nilai-tkp:focus {
  outline: none;
  border-color: #2563eb;
}

.btn-simpan-nilai-maksimal {
  width: 100%;
  padding: 11px;
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-simpan-nilai-maksimal:hover {
  background: #1d4ed8;
}

.btn-hapus-paket {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  background-color: #fff1f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-hapus-paket:hover {
  background-color: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.18);
}

.btn-hapus-paket:active,
#tombol-tambah-paket:active {
  transform: scale(0.98);
}

#panel-bank-soal {
  margin-top: 30px;
  padding: 28px;
  background: #ffffff;
  border: 1px solid #e5eaf2;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}

#panel-bank-soal h3 {
  margin: 0 0 22px;
  color: #172554;
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.4px;
}

#panel-bank-soal p {
  color: #64748b;
  font-size: 14px;
  margin: 10px 0;
}

#panel-bank-soal strong {
  color: #1e40af;
  font-weight: 750;
}

#tombol-tambah-soal,
#tombol-import-soal {
  min-height: 46px;
  padding: 12px 20px;
  margin: 18px 10px 12px 0;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: 0.2s ease;
}

#tombol-tambah-soal {
  color: #ffffff;
  background: #2563eb;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.18);
}

#tombol-tambah-soal:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

#tombol-import-soal {
  color: #166534;
  background: #dcfce7;
}

#tombol-import-soal:hover {
  background: #bbf7d0;
  transform: translateY(-2px);
}

#form-tambah-soal {
  margin-top: 24px;
  padding: 28px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

#form-tambah-soal h3 {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
  color: #172554;
  font-size: 19px;
}

#form-tambah-soal h4 {
  margin: 22px 0 10px;
  color: #1e3a8a;
  font-size: 15px;
}

#form-tambah-soal label {
  display: block;
  margin: 18px 0 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 650;
}

#form-tambah-soal input,
#form-tambah-soal select,
#form-tambah-soal textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  color: #1e293b;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#form-tambah-soal textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.6;
}

#form-tambah-soal input:focus,
#form-tambah-soal select:focus,
#form-tambah-soal textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

#bagian-nilai-tkp {
  margin-top: 24px;
  padding: 20px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
}

#bagian-nilai-tkp h4 {
  margin-top: 0;
  color: #92400e;
}

#bagian-nilai-tkp p {
  color: #92400e;
  font-size: 13px;
}

#tombol-simpan-soal-baru,
#tombol-batal-soal-baru {
  min-height: 45px;
  padding: 12px 22px;
  margin: 24px 10px 0 0;
  border: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: 0.2s ease;
}

#tombol-simpan-soal-baru {
  color: #ffffff;
  background: #2563eb;
}

#tombol-simpan-soal-baru:hover {
  background: #1d4ed8;
}

#tombol-batal-soal-baru {
  color: #475569;
  background: #e2e8f0;
}

#tombol-batal-soal-baru:hover {
  background: #cbd5e1;
}

@media (max-width: 600px) {
  #panel-bank-soal {
    padding: 18px;
  }

  #panel-bank-soal > p {
    display: flex;
    width: fit-content;
  }

  #tombol-tambah-soal,
  #tombol-import-soal {
    width: 100%;
    margin: 8px 0;
  }

  #form-tambah-soal {
    padding: 18px;
  }

#tombol-simpan-soal-baru,
  #tombol-batal-soal-baru {
    width: 100%;
    margin: 8px 0;
  }
}

#tombol-tambah-soal .ikon-tombol {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
}

#tombol-import-soal .ikon-tombol {
  color: #166534;
  background: rgba(22, 101, 52, 0.10);
}

.btn-bank-soal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  min-width: 190px;
  min-height: 58px !important;
  padding: 8px 12px !important;
  border-radius: 9px;
}

.btn-bank-soal .ikon-tombol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 400;
}

.btn-bank-soal strong {
  display: block;
  font-size: 12px;
}

.btn-bank-soal small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  opacity: 0.85;
}

#panel-bank-soal > p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 18px;
  padding: 16px 22px;
  background: #f1f5f9;
  border-radius: 12px;
  margin: 12px 12px 12px 0;
  font-size: 15px;
}

#panel-bank-soal > p strong {
  font-size: 23px;
  margin-left: 5px;
  color: #1d4ed8;
}

#panel-bank-soal > p:first-of-type {
  background: #eff6ff;
}

#panel-bank-soal > p:first-of-type strong {
  font-size: 30px;
  color: #1e40af;
}

.btn-kembali-beranda .ikon-kembali {
  font-size: 20px;
  line-height: 1;
}

.btn-tambah-paket {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 16px;
  color: #ffffff;
  background: #2563eb;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.16);
  transition: all 0.2s ease;
}

.btn-tambah-paket:hover {
  background: #1d4ed8;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22);
  transform: translateY(-2px);
}

.ikon-tambah-paket {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  font-size: 19px;
  line-height: 1;
}

#tombol-kembali-admin {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  margin: 10px 0 20px;
  color: #475569;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.2s ease;
}

#tombol-kembali-admin:hover {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #93c5fd;
  transform: translateX(-3px);
}

#tombol-tambah-paket {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 17px;
  margin: 10px 0 25px;
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.16);
  transition: all 0.2s ease;
  min-height: 44px;
}

#tombol-tambah-paket:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22);
}

#tombol-tambah-paket .ikon-tambah-paket {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 19px;
}

#form-tambah-paket {
  margin: 10px 0 30px;
  padding: 28px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

#form-tambah-paket h3 {
  margin: 0 0 25px;
  padding-bottom: 17px;
  color: #172554;
  border-bottom: 1px solid #e2e8f0;
  font-size: 20px;
  font-weight: 750;
}

#form-tambah-paket label {
  display: block;
  margin: 18px 0 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 650;
}

#form-tambah-paket input,
#form-tambah-paket textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  color: #1e293b;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

#form-tambah-paket textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.6;
}

#form-tambah-paket input:focus,
#form-tambah-paket textarea:focus {
  background: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

#tombol-simpan-paket-baru,
#tombol-batal-paket-baru {
  min-height: 43px;
  padding: 11px 20px;
  margin: 25px 8px 0 0;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.2s ease;
}

#tombol-simpan-paket-baru {
  color: #ffffff;
  background: #2563eb;
}

#tombol-simpan-paket-baru:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

#tombol-batal-paket-baru {
  color: #475569;
  background: #e2e8f0;
}

#tombol-batal-paket-baru:hover {
  background: #cbd5e1;
}

@media (max-width: 600px) {
  #form-tambah-paket {
    padding: 18px;
  }

  #tombol-simpan-paket-baru,
  #tombol-batal-paket-baru {
    width: 100%;
    margin: 10px 0 0;
  }
}

main.container .label-platform {
  display: inline-block;
  justify-self: start;
  width: fit-content;
  margin: 0 0 12px;
  padding: 9px 15px;
  color: #1d4ed8;
  background: #dbeafe;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 1.5px;
}

main.container h1 {
  margin: 0;
  color: #142b50;
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -2px;
}

main.container > p:not(.label-platform) {
  margin: 12px 0 20px;
  color: #64748b;
  font-size: 16px;
  line-height: 1.7;
}

main.container .btn-mulai {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 27px;
  color: #ffffff;
  background: #2563eb;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.2);
  transition: all 0.2s ease;
}

main.container .btn-mulai:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

main.container #tombol-buka-admin {
  width: fit-content;
  min-height: 42px;
  margin-left: 10px;
  padding: 10px 17px;
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.2s ease;
}

main.container #tombol-buka-admin:hover {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #93c5fd;
}

main.container .fitur p:first-child {
  margin: 0 0 9px;
  color: #1d4ed8;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
}

main.container .fitur p:last-child {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 700px) {
  main.container {
    grid-template-columns: 1fr;
    width: calc(100% - 28px);
    min-height: auto;
    margin: 25px auto;
    padding: 38px 24px;
    text-align: center;
  }

  main.container .label-platform {
    justify-self: center;
  }

  main.container h1 {
    font-size: 39px;
  }

  main.container::after {
    grid-column: 1;
    grid-row: auto;
    width: 230px;
    min-height: 175px;
    margin: 25px auto 10px;
    padding: 25px 15px;
    font-size: 13px;
  }

  main.container .fitur {
    grid-column: 1;
    margin-top: 25px;
  }

  main.container #tombol-buka-admin {
    margin: 8px 0 0;
  }
}

main.container .hero-content > p:not(.label-platform) {
  margin: 15px 0 25px;
  color: #64748b;
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 700px) {
  main.container .hero-content {
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    text-align: center;
  }

  main.container .hero-content .label-platform {
    justify-self: center;
  }

  main.container .hero-tombol {
    justify-content: center;
  }

  main.container .hero-content h1 {
    font-size: 39px;
  }
}

.site-header {
  position: relative;
  z-index: 10;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e8eef5;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 1240px;
  min-height: 82px;
  margin: 0 auto;
  padding: 0 35px;
  box-sizing: border-box;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #142b50;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: linear-gradient(135deg, #06b6d4, #2563eb);
  border-radius: 12px;
  font-size: 24px;
  font-weight: 850;
}

.brand-name {
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.5px;
}

.brand-name span {
  color: #0891b2;
}

.main-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.main-navigation a {
  color: #475569;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
  transition: color 0.2s ease;
}

.main-navigation a:hover {
  color: #0891b2;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 19px;
  color: #ffffff;
  background: #06b6d4;
  border-radius: 9px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.header-cta:hover {
  background: #0891b2;
  transform: translateY(-2px);
}

.header-cta span {
  font-size: 17px;
}

@media (max-width: 800px) {
  .header-inner {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 20px;
  }

  .main-navigation {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    padding: 8px 0;
  }

  .main-navigation a {
    white-space: nowrap;
  }
}

@media (max-width: 450px) {
  .brand-name {
    font-size: 17px;
  }

  .brand-icon {
    width: 36px;
    height: 36px;
  }

  .header-cta {
    padding: 9px 12px;
    font-size: 12px;
  }
}

main.container {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-content: center;
  align-items: center;
  gap: 12px 35px;
  width: 100%;
  max-width: 1240px;
  min-height: 570px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 65px 45px;
  overflow: hidden;
  background: linear-gradient(120deg, #f8fcff 0%, #eaf7ff 100%);
  border: none;
  border-radius: 0;
  box-shadow: none;
}

main.container .hero-content {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  max-width: 570px;
  padding: 15px 0;
}

main.container .hero-content .label-platform {
  margin: 0 0 18px;
  margin-bottom: 22px;
  padding: 9px 15px;
  color: #0891b2;
  background: #cffafe;
  border: 1px solid #a5f3fc;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

main.container .hero-content h1 {
  margin: 0;
  font-size: clamp(42px, 5vw, 60px);
  max-width: 560px;
  color: #142b50;
  font-weight: 850;
  line-height: 1.13;
  letter-spacing: -2px;
}

main.container .hero-content h1 span {
  display: block;
  color: #06a6c7;
}

main.container .hero-content .hero-description {
  max-width: 510px;
  margin: 22px 0;
  color: #52657d;
  font-size: 16px;
  line-height: 1.85;
}

main.container .hero-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 22px 0 28px;
}

main.container .hero-benefits span {
  color: #334b68;
  font-size: 14px;
  font-weight: 600;
}

main.container .hero-benefits span::first-letter {
  color: #06a6c7;
}

main.container .hero-tombol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
}

main.container .hero-tombol .btn-mulai {
  width: auto;
  min-width: 165px;
  min-height: 49px;
  padding: 13px 23px;
  color: #ffffff;
  background: linear-gradient(135deg, #0891b2, #2563eb);
  border-radius: 9px;
  font-size: 14px;
  font-weight: 750;
}

main.container .hero-tombol #tombol-buka-admin {
  width: auto;
  min-height: 49px;
  margin: 0;
  padding: 12px 19px;
}

main.container .hero-content .hero-note {
  margin: 18px 0 0;
  color: #8293a8;
  font-size: 12px;
  font-style: italic;
}

main.container::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  right: -35px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #c9efff 0%,
    #e2f4ff 55%,
    rgba(239, 246, 255, 0) 75%
  );
}

main.container::after {
  content: "SIMULASI UJIAN\A TRY OUT SKD\A \A TWK  •  TIU  •  TKP\A \A 100 SOAL     100 MENIT";
  white-space: pre;
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / span 5;
  justify-self: center;
  align-self: center;
  width: 310px;
  min-height: 260px;
  box-sizing: border-box;
  padding: 48px 25px;
  color: #ffffff;
  background: linear-gradient(145deg, #0e7490, #2563eb);
  border: 10px solid #ffffff;
  border-radius: 25px;
  box-shadow: 0 25px 55px rgba(14, 116, 144, 0.2);
  font-size: 17px;
  font-weight: 750;
  line-height: 2.3;
  letter-spacing: 1px;
  text-align: center;
  transform: rotate(3deg);
}

main.container .fitur {
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;
  margin-top: 45px;
  padding-top: 25px;
  border-top: 1px solid #e2e8f0;
  text-align: center;
  border-top-color: #d6e8f2;
}

@media (max-width: 700px) {
  main.container {
    width: 100%;
    min-height: auto;
    padding: 45px 22px;
  }

  main.container .hero-content {
    max-width: 100%;
    padding: 0;
  }

  main.container .hero-content h1 {
    font-size: 39px;
    letter-spacing: -1px;
  }

  main.container .hero-content .hero-description {
    font-size: 14px;
  }

  main.container .hero-benefits {
    align-items: flex-start;
  }

  main.container .hero-tombol {
    flex-wrap: wrap;
  }

  main.container::after {
    width: 230px;
    min-height: 190px;
    padding: 28px 15px;
    font-size: 13px;
  }
}

[hidden] {
  display: none !important;
}

.keunggulan-section {
  padding: 80px 8%;
  background: #f5f8fc;
}

.section-heading {
  max-width: 700px;
  margin: 0 auto 45px;
  text-align: center;
}

.section-label {
  color: #1685c5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}

.section-heading h2 {
  margin: 14px 0;
  color: #142b4a;
  font-size: 34px;
  line-height: 1.3;
}

.section-heading h2 span {
  color: #1685c5;
}

.section-heading p {
  color: #64748b;
  font-size: 15px;
  line-height: 1.8;
}

.keunggulan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: auto;
}

.keunggulan-card {
  padding: 30px;
  background: #ffffff;
  border: 1px solid #e5edf5;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(20, 43, 74, 0.04);
}

.keunggulan-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eaf5fc;
  border-radius: 12px;
  font-size: 25px;
  margin-bottom: 22px;
}

.keunggulan-card h3 {
  color: #142b4a;
  font-size: 18px;
  margin-bottom: 12px;
}

.keunggulan-card p {
  color: #64748b;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 768px) {
  .keunggulan-grid {
    grid-template-columns: 1fr;
  }

  .section-heading h2 {
    font-size: 27px;
  }

  .keunggulan-section {
    padding: 60px 6%;
  }
}

.materi-section {
  padding: 80px 8%;
  background: #ffffff;
}

.materi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: auto;
}

.materi-card {
  padding: 30px;
  background: #f8fafc;
  border: 1px solid #e5edf5;
  border-radius: 16px;
  transition: 0.3s ease;
}

.materi-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(20, 43, 74, 0.08);
}

.materi-kode {
  display: inline-block;
  padding: 9px 16px;
  margin-bottom: 22px;
  color: #1685c5;
  background: #eaf5fc;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
}

.materi-card h3 {
  color: #142b4a;
  font-size: 18px;
  margin-bottom: 12px;
}

.materi-card p {
  color: #64748b;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 768px) {
  .materi-grid {
    grid-template-columns: 1fr;
  }

  .materi-section {
    padding: 60px 6%;
  }
}

.cara-kerja-section {
  padding: 80px 8%;
  background: #f5f8fc;
}

.cara-kerja-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: auto;
}

.cara-kerja-card {
  padding: 30px;
  background: #ffffff;
  border: 1px solid #e5edf5;
  border-radius: 16px;
}

.cara-kerja-nomor {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: #ffffff;
  background: #1685c5;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
}

.cara-kerja-card h3 {
  margin-bottom: 12px;
  color: #142b4a;
  font-size: 18px;
}

.cara-kerja-card p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .cara-kerja-grid {
    grid-template-columns: 1fr;
  }

  .cara-kerja-section {
    padding: 60px 6%;
  }
}

.cta-section {
  padding: 80px 8%;
  background: #ffffff;
}

.cta-content {
  max-width: 1100px;
  margin: auto;
  padding: 65px 40px;
  text-align: center;
  background: linear-gradient(135deg, #142b4a, #176b9e);
  border-radius: 22px;
}

.cta-content .section-label {
  color: #8ed8ff;
}

.cta-content h2 {
  margin: 18px 0;
  color: #ffffff;
  font-size: 36px;
  line-height: 1.35;
}

.cta-content h2 span {
  display: block;
  color: #8ed8ff;
}

.cta-content p {
  max-width: 620px;
  margin: 0 auto 28px;
  color: #dceaf5;
  font-size: 15px;
  line-height: 1.8;
}

.cta-button {
  padding: 15px 26px;
  color: #142b4a;
  background: #ffffff;
  border: none;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease;
}

.cta-button:hover {
  background: #eaf5fc;
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .cta-section {
    padding: 60px 6%;
  }

  .cta-content {
    padding: 45px 22px;
  }

  .cta-content h2 {
    font-size: 27px;
  }
}

.site-footer {
  padding: 60px 8% 0;
  background: #10243d;
  color: #ffffff;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 50px;
  max-width: 1100px;
  margin: auto;
  padding-bottom: 45px;
}

.footer-logo {
  margin-bottom: 16px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 1px;
}

.footer-logo span {
  color: #55b9ed;
}

.footer-brand p {
  max-width: 350px;
  color: #bdcad8;
  font-size: 14px;
  line-height: 1.8;
}

.footer-links,
.footer-info {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-links h3,
.footer-info h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 16px;
}

.footer-links a {
  color: #bdcad8;
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s ease;
}

.footer-links a:hover {
  color: #55b9ed;
}

.footer-info p {
  margin: 0;
  color: #bdcad8;
  font-size: 14px;
}

.footer-bottom {
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.footer-bottom p {
  margin: 0;
  color: #9eafc1;
  font-size: 13px;
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .site-footer {
    padding: 50px 6% 0;
  }
}

@media (max-width: 768px) {
  .site-header {
    padding: 12px 10px;
  }

  .header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
  }

  .brand-logo {
    flex: 1;
    min-width: 0;
  }

  .brand-name {
    font-size: 16px;
  }

  .header-cta {
    flex: 0 0 auto;
    padding: 12px 14px;
    font-size: 12px;
  }

  .main-navigation {
    order: 3;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
  }

  .main-navigation a {
    font-size: 12px;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .main-navigation {
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: space-between;
  }

  .main-navigation a {
    font-size: 11px;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .hero-content {
    padding: 45px 20px;
  }

  .hero-content h1 {
    font-size: 36px;
    line-height: 1.15;
  }

  .hero-description {
    font-size: 14px;
    line-height: 1.7;
  }

  .hero-benefits {
    gap: 12px;
  }

  .hero-tombol {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .hero-tombol button {
    width: 100%;
  }

  .hero-note {
    font-size: 14px;
  }
}

.kartu-paket {
  background: #ffffff;
  border: 1px solid #e2eaf3;
  border-radius: 18px;
  padding: 25px;
  box-shadow: 0 8px 25px rgba(20, 43, 74, 0.06);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kartu-paket:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(20, 43, 74, 0.12);
  border-color: #b8dff5;
}

.kartu-paket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 20px 10px;
}

.label-paket {
  color: #1685c5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.status-paket {
  display: inline-block;
  padding: 7px 11px;
  border-radius: 30px;
  background-color: #fee2e2;
  color: #b91c1c;
  font-size: 10px;
  font-weight: 800;
  margin-top: 10px;
  letter-spacing: 0.4px;
}

.status-paket.selesai {
  color: #087443;
  background: #dcfce7;
}

.status-paket.berlangsung {
  color: #9a6700;
  background: #fef3c7;
}

.status-paket.tersedia {
  color: #0866a5;
  background: #e0f2fe;
}

.status-paket.belum-tersedia {
  color: #64748b;
  background: #e9eef5;
}

.kartu-paket-body {
  flex: 1;
  padding: 12px 20px 20px;
}

.kartu-paket-body h3 {
  margin: 0 0 10px;
  color: #142b4a;
  font-size: 19px;
  line-height: 1.4;
}

.deskripsi-paket {
  min-height: 42px;
  margin: 0 0 20px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.7;
}

.info-paket {
  margin-top: 15px;
  padding: 13px 10px;
  background-color: #dfe7ec;
  border-radius: 12px;
  color: #0e56b9;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #f1f7fc;
  border: 1px solid #e3edf6;
}

.info-paket-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #34516e;
}

.info-paket-item strong {
  color: #142b4a;
  font-size: 14px;
}

.info-paket-item small {
  color: #64748b;
  font-size: 11px;
}

.pemisah-info {
  width: 1px;
  height: 25px;
  background: #d5e2ee;
}

.harga-paket {
  margin-top: 22px;
}

.harga-paket small {
  color: #64748b;
  font-size: 11px;
}

.harga-paket h4 {
  margin: 5px 0 0;
  color: #087fc1;
  font-size: 22px;
  font-weight: 800;
}

#halaman-paket {
  max-width: 1000px;
  margin: 40px auto;
  padding: 70px 30px 80px;
  min-height: 100vh;
  background: #f1f6fc;
}

.katalog-header {
  max-width: 850px;
  margin: 0 auto 45px;
  text-align: center;
  padding: 45px 30px 35px;
  background: linear-gradient(135deg, #ffffff, #eaf7ff);
  border: 1px solid #dceaf7;
  border-radius: 24px;
  box-shadow: 0 12px 35px rgba(20, 65, 110, 0.07);
}

.katalog-label {
  display: inline-block;
  padding: 9px 18px;
  margin-bottom: 20px;
  color: #008fc5;
  background: #dff8ff;
  border: 1px solid #b8efff;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.katalog-header h1 {
  margin: 0 0 16px;
  color: #102c50;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.25;
}

.katalog-header h1 span {
  color: #079fce;
}

.katalog-deskripsi {
  max-width: 620px;
  margin: 0 auto;
  color: #64748b;
  font-size: 14px;
  line-height: 1.8;
}

.katalog-kategori {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 25px 0 28px;
}

.katalog-kategori span {
  padding: 9px 15px;
  color: #17618e;
  background: #ffffff;
  border: 1px solid #d8eaf7;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
}

.btn-kembali-beranda {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 19px;
  margin: 18px 0;
  color: #17618e;
  background: #ffffff;
  border: 1px solid #c8deef;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
  justify-content: center;
}

.btn-kembali-beranda:hover {
  color: #ffffff;
  background: #087fc0;
  border-color: #087fc0;
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  #halaman-paket {
    padding: 30px 16px 50px;
  }

  .katalog-header {
    padding: 35px 18px 28px;
    margin-bottom: 30px;
    border-radius: 18px;
  }

  .katalog-header h1 {
    font-size: 27px;
  }

  .katalog-deskripsi {
    font-size: 13px;
  }

  .katalog-kategori {
    gap: 7px;
  }

  .katalog-kategori span {
    padding: 8px 11px;
    font-size: 10px;
  }
}


/* =====================================================
   REDESAIN HALAMAN PENGERJAAN, HASIL, DAN REVIEW TRY OUT
   Lapisan visual tambahan — tidak mengubah struktur/fungsi JS
   ===================================================== */

:root {
  --ujian-ink: #172554;
  --ujian-muted: #64748b;
  --ujian-blue: #1d4ed8;
  --ujian-blue-dark: #1e40af;
  --ujian-blue-soft: #eff6ff;
  --ujian-line: #e2e8f0;
  --ujian-surface: #ffffff;
  --ujian-bg: #f8fafc;
  --ujian-green: #15803d;
  --ujian-red: #b91c1c;
}

/* Area utama ujian */
#halaman-ujian {
  width: min(1120px, calc(100% - 32px));
  max-width: 1120px;
  margin: 28px auto;
  padding: clamp(20px, 3.5vw, 42px);
  box-sizing: border-box;
  color: var(--ujian-ink);
  background: var(--ujian-surface);
  border: 1px solid #e8edf5;
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
  text-align: left;
}

#halaman-ujian > h2 {
  margin: 0 0 8px;
  color: var(--ujian-ink);
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.7px;
}

#halaman-ujian > p {
  margin: 0 0 28px;
  color: var(--ujian-muted);
  font-size: 15px;
}

#halaman-ujian > h3:not(#nomor-soal) {
  margin: 26px 0 12px;
  color: var(--ujian-ink);
  font-size: 17px;
}

#halaman-ujian > ul {
  margin: 0 0 24px;
  padding: 18px 22px 18px 42px;
  color: #475569;
  background: var(--ujian-bg);
  border: 1px solid var(--ujian-line);
  border-radius: 14px;
  line-height: 1.85;
}

/* Panel pengerjaan soal */
#area-soal {
  margin-top: 22px;
  padding: clamp(18px, 3vw, 32px);
  background: var(--ujian-bg);
  border: 1px solid var(--ujian-line);
  border-radius: 18px;
  text-align: left;
}

#tampilan-timer {
  width: auto;
  min-width: 0;
  max-width: 340px;
  margin: 0 auto 22px;
  padding: 17px 24px;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  box-shadow: 0 5px 16px rgba(37, 99, 235, 0.07);
}

#tampilan-timer span {
  color: var(--ujian-muted);
  font-size: 11px;
  letter-spacing: 1.4px;
}

#timer {
  margin: 5px 0 2px;
  color: var(--ujian-ink);
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 800;
}

#status-timer {
  margin: 7px 0 4px;
  color: var(--ujian-blue);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.4px;
}

#keterangan-timer {
  color: var(--ujian-muted);
  font-size: 12px;
  line-height: 1.5;
}

#tampilan-timer.waktu-kritis {
  background: #fff7f7;
  border-color: #fecaca;
}

#tampilan-timer.waktu-kritis #timer,
#tampilan-timer.waktu-kritis #status-timer {
  color: var(--ujian-red);
}

#tombol-kembali-katalog-ujian {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 24px;
  padding: 10px 15px;
  color: #1d4ed8;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

#nomor-soal {
  margin: 0 0 14px !important;
  padding-bottom: 14px;
  color: var(--ujian-ink) !important;
  border-bottom: 1px solid var(--ujian-line);
  font-size: 19px;
  font-weight: 800;
  text-align: left;
}

#teks-pertanyaan {
  margin: 0 0 22px;
  color: #1e293b;
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 600;
  line-height: 1.8;
}

/* Pilihan jawaban: label dibuat sebagai kartu yang mudah dipilih */
#daftar-pilihan {
  display: grid;
  gap: 11px;
  margin: 0 0 18px;
}

#daftar-pilihan br {
  display: none;
}

#daftar-pilihan label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 15px 17px;
  color: #334155;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.65;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#daftar-pilihan label:hover {
  background: #f8fbff;
  border-color: #93c5fd;
}

#daftar-pilihan label:has(input:checked) {
  color: #1e3a8a;
  background: #eff6ff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.10);
}

#daftar-pilihan label:has(input:disabled) {
  cursor: default;
}

#daftar-pilihan input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--ujian-blue);
}

#status-jawaban,
#jumlah-terjawab {
  margin: 10px 0;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

#status-jawaban {
  display: inline-block;
  padding: 7px 11px;
  background: #f1f5f9;
  border-radius: 8px;
}

#navigasi-soal {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 16px 0 26px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--ujian-line);
  border-radius: 14px;
}

#navigasi-soal .nomor-navigasi {
  width: 42px;
  height: 42px;
  margin: 0;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 750;
  transition: 0.18s ease;
}

#navigasi-soal .nomor-navigasi.terjawab {
  color: #ffffff;
  background: #16a34a;
  border-color: #16a34a;
}

#navigasi-soal .nomor-navigasi.aktif,
#navigasi-soal .nomor-navigasi.terjawab.aktif {
  color: #ffffff;
  background: var(--ujian-blue);
  border-color: var(--ujian-blue);
  box-shadow: 0 0 0 3px #dbeafe;
}

/* Tombol-tombol pengerjaan */
#area-soal button.btn-mulai,
#panel-hasil button.btn-mulai,
#area-review button.btn-mulai {
  min-height: 46px;
  margin: 8px 8px 0 0;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 750;
  box-shadow: 0 4px 10px rgba(29, 78, 216, 0.12);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#area-soal button.btn-mulai:hover,
#panel-hasil button.btn-mulai:hover,
#area-review button.btn-mulai:hover {
  background: var(--ujian-blue-dark);
  box-shadow: 0 7px 15px rgba(29, 78, 216, 0.18);
  transform: translateY(-1px);
}

/* Hasil ujian */
#panel-hasil {
  margin-top: 30px;
  padding: clamp(18px, 3vw, 30px);
  background: #ffffff;
  border: 1px solid var(--ujian-line);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

#panel-hasil > h2 {
  margin: 0 0 25px;
  color: var(--ujian-ink);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 850;
  letter-spacing: -0.5px;
}

#panel-hasil .rincian-hasil {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  justify-content: initial;
}

#panel-hasil > .rincian-hasil:first-of-type {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

#panel-hasil .item-hasil {
  min-width: 0;
  padding: 18px 14px;
  background: #f8fafc;
  border: 1px solid #edf1f6;
  border-radius: 13px;
  text-align: left;
}

#panel-hasil .item-hasil h3 {
  min-height: 34px;
  margin: 0 0 9px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

#panel-hasil .item-hasil p {
  margin: 0;
  color: var(--ujian-ink);
  font-size: 25px;
  font-weight: 850;
  line-height: 1.2;
}

#panel-hasil .nilai-akhir {
  margin-top: 18px;
  padding: 23px;
  background: linear-gradient(135deg, #eff6ff, #f8fbff);
  border: 1px solid #dbeafe;
  border-radius: 15px;
  text-align: left;
}

#panel-hasil .nilai-akhir h3 {
  margin: 0 0 8px;
  color: #1e40af;
  font-size: 16px;
}

#panel-hasil .nilai-akhir > p {
  margin: 0;
  color: #1d4ed8;
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 850;
  text-align: center;
}

#analisis-hasil {
  margin-top: 24px;
}

#analisis-hasil > h3 {
  margin: 0 0 15px;
  color: var(--ujian-ink);
  font-size: 17px;
}

.grafik-hasil,
.evaluasi-hasil {
  margin-top: 18px;
  padding: 21px;
  background: #ffffff;
  border: 1px solid var(--ujian-line);
  border-radius: 14px;
  box-shadow: none;
}

.grafik-hasil h3,
.evaluasi-hasil h3 {
  margin: 0 0 20px;
  color: var(--ujian-ink);
  font-size: 16px;
  text-align: left;
}

.grafik-item {
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  gap: 12px;
  margin-bottom: 16px;
}

.grafik-item:last-child {
  margin-bottom: 0;
}

.grafik-track {
  height: 12px;
  background: #e9eef5;
}

.grafik-bar {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.evaluasi-hasil {
  background: #f8fafc;
}

.evaluasi-item {
  margin-bottom: 10px;
  padding: 16px 18px;
  border: 1px solid #edf1f6;
  border-left: 4px solid #3b82f6;
  border-radius: 11px;
}

.evaluasi-item:last-child {
  margin-bottom: 0;
}

.evaluasi-item strong {
  color: var(--ujian-ink);
}

.evaluasi-item span {
  color: var(--ujian-green);
}

/* Review jawaban */
#area-review {
  margin-top: 28px;
  padding: clamp(16px, 2.5vw, 26px);
  background: #f8fafc;
  border: 1px solid var(--ujian-line);
  border-radius: 17px;
}

#area-review > h2 {
  margin: 0 0 22px;
  color: var(--ujian-ink);
  font-size: clamp(22px, 3vw, 28px);
  text-align: left;
}

.kartu-review {
  margin-bottom: 18px;
  padding: clamp(17px, 2.5vw, 25px);
  background: #ffffff;
  border: 1px solid var(--ujian-line);
  border-radius: 15px;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.04);
}

.kartu-review:last-child {
  margin-bottom: 0;
}

.kartu-review h3 {
  margin: 0 0 12px;
  padding-bottom: 12px;
  color: var(--ujian-ink);
  border-bottom: 1px solid var(--ujian-line);
  font-size: 17px;
}

.kartu-review > p {
  margin: 0 0 17px;
  color: #334155;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.75;
}

.pilihan-review p {
  margin: 8px 0;
  padding: 12px 14px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e8edf4;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.65;
}

.pilihan-review .jawaban-benar {
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #86efac;
}

.pilihan-review .jawaban-salah {
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fca5a5;
}

.pilihan-review .jawaban-peserta {
  border-width: 1px;
  box-shadow: inset 3px 0 0 #2563eb;
}

.informasi-jawaban {
  gap: 12px;
  margin: 17px 0 12px;
}

.jawaban-anda,
.kunci-jawaban {
  padding: 15px 17px;
  border-radius: 11px;
}

.jawaban-anda {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.kunci-jawaban {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.jawaban-anda span,
.kunci-jawaban span {
  color: #64748b;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.jawaban-anda strong {
  color: #1d4ed8;
}

.kunci-jawaban strong {
  color: #15803d;
}

.status-review {
  margin: 10px 0 15px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
}

.pembahasan-review {
  margin-top: 15px;
  padding: 17px 19px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-left: 4px solid #3b82f6;
  border-radius: 11px;
}

.pembahasan-review h4 {
  margin: 0 0 9px;
  color: #1e40af;
  font-size: 13px;
}

.pembahasan-review p {
  color: #334155;
  font-size: 14px;
  line-height: 1.75;
  text-align: left;
}

/* Navigasi antarsoal di bagian bawah */
#halaman-ujian > .navigasi-soal {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ujian-line);
}

#halaman-ujian > .navigasi-soal button {
  min-width: 145px;
  min-height: 46px;
  margin: 0;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 750;
}

/* Responsif */
@media (max-width: 800px) {
  body {
    padding: 18px;
  }

  #panel-hasil > .rincian-hasil:first-of-type {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  body {
    padding: 10px;
  }

  #halaman-ujian {
    width: 100%;
    margin: 10px auto;
    padding: 17px;
    border-radius: 15px;
  }

  #area-soal {
    padding: 14px;
    border-radius: 13px;
  }

  #tampilan-timer {
    max-width: none;
    padding: 14px;
  }

  #daftar-pilihan label {
    padding: 13px;
    font-size: 14px;
  }

  #navigasi-soal {
    gap: 7px;
    padding: 12px;
  }

  #navigasi-soal .nomor-navigasi {
    width: 38px;
    height: 38px;
  }

  #panel-hasil .rincian-hasil,
  #panel-hasil > .rincian-hasil:first-of-type {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #panel-hasil .item-hasil {
    padding: 14px 12px;
  }

  #panel-hasil .item-hasil p {
    font-size: 22px;
  }

  .informasi-jawaban {
    flex-direction: column;
  }

  #halaman-ujian > .navigasi-soal {
    flex-direction: column;
  }

  #halaman-ujian > .navigasi-soal button {
    width: 100%;
  }

  #area-soal button.btn-mulai,
  #panel-hasil button.btn-mulai {
    width: 100%;
    margin-right: 0;
  }
}



/* =====================================================
   PENYEMPURNAAN HALAMAN DETAIL PAKET TRY OUT
   Khusus tampilan — tidak mengubah HTML maupun JavaScript
   ===================================================== */

#halaman-detail-paket {
  max-width: 960px;
  margin: 34px auto 60px;
  padding: 0 28px 30px;
  box-sizing: border-box;
}

#halaman-detail-paket > h2 {
  margin: 0 0 24px;
  padding: 0 0 18px;
  color: #17365d;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.3;
  border-bottom: 1px solid #dce6f0;
  text-align: left;
}

#konten-detail-paket {
  padding: 34px 36px;
  background: #ffffff;
  border: 1px solid #e1e9f2;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(27, 55, 90, 0.07);
}

/* Nama dan deskripsi paket */
#konten-detail-paket > h3:first-child {
  margin: 0 0 8px;
  color: #17365d;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.35;
}

#konten-detail-paket > p:first-of-type {
  margin: 0 0 22px;
  color: #718096;
  font-size: 14px;
}

/* Harga paket */
#konten-detail-paket > h3:nth-of-type(2) {
  display: inline-flex;
  align-items: center;
  margin: 0 0 14px;
  padding: 10px 16px;
  color: #087f5b;
  background: #e9f8f1;
  border: 1px solid #c9edda;
  border-radius: 10px;
  font-size: 21px;
  font-weight: 800;
}

/* Jumlah soal */
#konten-detail-paket > p:nth-of-type(2) {
  margin: 0 0 24px;
  color: #43556d;
  font-size: 14px;
  font-weight: 700;
}

/* Komposisi soal */
#konten-detail-paket .komposisi-soal {
  margin: 0 0 24px;
  padding: 23px;
  background: #f6f9fc;
  border: 1px solid #e8eef5;
  border-radius: 14px;
}

#konten-detail-paket .komposisi-soal h4 {
  margin: 0 0 16px;
  color: #243b5a;
  font-size: 16px;
  font-weight: 800;
}

#konten-detail-paket .item-komposisi {
  min-height: 44px;
  margin: 0 0 9px;
  padding: 11px 15px;
  border: 1px solid #e0e8f1;
  border-radius: 9px;
  box-sizing: border-box;
}

#konten-detail-paket .item-komposisi:last-child {
  margin-bottom: 0;
}

#konten-detail-paket .item-komposisi span {
  color: #43556d;
  font-size: 14px;
}

#konten-detail-paket .item-komposisi strong {
  color: #245bd3;
  font-size: 14px;
}

/* Informasi durasi, kesempatan, ketentuan, dan status */
#konten-detail-paket > p:nth-of-type(n+3) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 12px 2px;
  color: #52647b;
  font-size: 14px;
  line-height: 1.55;
  border-bottom: 1px solid #edf1f5;
}

#konten-detail-paket > p:nth-of-type(n+3):last-of-type {
  margin-top: 10px;
  padding: 14px 16px;
  color: #176247;
  background: #effaf4;
  border: 1px solid #d5f0df;
  border-radius: 10px;
  font-weight: 600;
}

/* Informasi penilaian */
#konten-detail-paket .info-penilaian {
  margin-top: 24px;
  padding: 24px;
  background: #f2f7ff;
  border: 1px solid #d7e6ff;
  border-radius: 14px;
}

#konten-detail-paket .info-penilaian h4 {
  margin: 0 0 14px;
  color: #1e4fa3;
  font-size: 16px;
  font-weight: 800;
}

#konten-detail-paket .info-penilaian p {
  margin: 0;
  padding: 9px 0;
  color: #52647b;
  font-size: 14px;
  border-bottom: 1px solid #dfebfc;
}

#konten-detail-paket .info-penilaian p:last-child {
  margin-top: 8px;
  padding-top: 15px;
  color: #1e4fa3;
  font-size: 15px;
  font-weight: 800;
  border-top: 1px solid #c9dcfb;
  border-bottom: 0;
}

/* Tombol mulai ujian */
#konten-detail-paket .btn-mulai-ujian {
  min-height: 52px;
  margin-top: 24px;
  border-radius: 10px;
  font-size: 15px;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#konten-detail-paket .btn-mulai-ujian:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

/* Tombol kembali ke katalog */
#tombol-kembali-katalog {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin-top: 18px;
  padding: 10px 17px;
  color: #245bd3;
  background: #ffffff;
  border: 1px solid #cbdaf0;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
}

#tombol-kembali-katalog:hover {
  color: #ffffff;
  background: #245bd3;
  border-color: #245bd3;
}

@media (max-width: 600px) {
  #halaman-detail-paket {
    margin: 24px auto 40px;
    padding: 0 15px 24px;
  }

  #halaman-detail-paket > h2 {
    font-size: 22px;
    margin-bottom: 17px;
  }

  #konten-detail-paket {
    padding: 23px 18px;
    border-radius: 14px;
  }

  #konten-detail-paket > h3:first-child {
    font-size: 20px;
  }

  #konten-detail-paket .komposisi-soal,
  #konten-detail-paket .info-penilaian {
    padding: 17px;
  }
}



/* =====================================================
   NAVIGASI NOMOR SOAL DI PANEL SAMPING
   Desktop: panel tetap terlihat saat halaman digulir.
   Tablet/ponsel: kembali ke alur normal agar tidak menutupi soal.
   ===================================================== */

@media (min-width: 1251px) {
  /* Sisakan ruang khusus untuk panel navigasi di sisi kanan */
  #halaman-ujian {
    width: min(1000px, calc(100% - 330px));
    max-width: 1000px;
    margin: 28px auto 28px 24px;
  }

  /* Panel nomor soal menempel pada sisi kanan layar */
  #navigasi-soal {
    position: fixed;
    z-index: 100;
    top: 145px;
    right: 24px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    width: 260px;
    max-height: calc(100vh - 175px);
    margin: 0;
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-content: start;
    background: #ffffff;
    border: 1px solid #dce6f1;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
  }

  #navigasi-soal::before {
    content: "NAVIGASI SOAL";
    grid-column: 1 / -1;
    display: block;
    padding: 0 0 12px;
    margin-bottom: 3px;
    color: #172554;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.7px;
  }

  #navigasi-soal .nomor-navigasi {
    width: 100%;
    height: 40px;
    min-width: 0;
    margin: 0;
    border-radius: 9px;
  }

  #navigasi-soal::after {
    content: "Biru: soal aktif   •   Hijau: sudah dijawab   •   Abu-abu: belum dijawab";
    grid-column: 1 / -1;
    display: block;
    padding-top: 12px;
    margin-top: 5px;
    color: #64748b;
    border-top: 1px solid #e2e8f0;
    font-size: 10px;
    line-height: 1.6;
  }
}

/* Di layar lebih kecil, navigasi tetap berada di bawah soal
   agar panel tidak menutupi pertanyaan maupun pilihan jawaban. */
@media (max-width: 1250px) {
  #navigasi-soal {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
  }

  #navigasi-soal::before,
  #navigasi-soal::after {
    content: none;
  }
}



/* =====================================================
   TIMER UJIAN MENETAP DI POJOK KANAN ATAS
   Dipisahkan dari panel navigasi nomor soal.
   ===================================================== */

@media (min-width: 601px) {
  #tampilan-timer {
    position: fixed;
    z-index: 110;
    top: 18px;
    right: 24px;
    width: 260px;
    min-width: 0;
    margin: 0;
    padding: 12px 18px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dce6f1;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
  }

  #tampilan-timer span {
    font-size: 10px;
    letter-spacing: 1px;
  }

  #timer {
    margin: 4px 0;
    font-size: 29px;
    line-height: 1.2;
  }

  #tampilan-timer #status-timer {
    margin: 4px 0 0;
    font-size: 10px;
    line-height: 1.35;
  }

  #tampilan-timer #keterangan-timer {
    display: none;
  }
}

/* Pada ponsel, timer tetap mudah terlihat tetapi tidak terlalu lebar. */
@media (max-width: 600px) {
  #tampilan-timer {
    position: sticky;
    z-index: 90;
    top: 8px;
    width: min(100%, 230px);
    min-width: 0;
    margin: 0 auto 18px;
    padding: 9px 14px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.10);
  }

  #timer {
    font-size: 27px;
  }

  #tampilan-timer #keterangan-timer {
    display: none;
  }
}



/* =====================================================
   PENEMPATAN INFORMASI TAMBAHAN DI PANEL KANAN
   Jumlah terjawab di bawah timer, tombol katalog di kanan bawah.
   ===================================================== */

@media (min-width: 1251px) {
  #jumlah-terjawab {
    position: fixed;
    z-index: 105;
    top: 112px;
    right: 24px;
    width: 260px;
    box-sizing: border-box;
    margin: 0;
    padding: 13px 16px;
    color: #334155;
    background: #ffffff;
    border: 1px solid #dce6f1;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }

  /* Turunkan panel navigasi agar tidak bertabrakan dengan ringkasan */
  #navigasi-soal {
    top: 190px;
    max-height: calc(100vh - 215px);
  }

  #tombol-kembali-katalog {
    position: fixed;
    z-index: 120;
    right: 24px;
    bottom: 18px;
    margin: 0;
    min-height: 42px;
    padding: 10px 16px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
  }
}

/* Ukuran layar lebih kecil: jangan membuat elemen melayang
   menutupi area soal. Elemen kembali mengikuti alur halaman. */
@media (max-width: 1250px) {
  #jumlah-terjawab {
    position: static;
    width: auto;
    margin: 14px 0;
  }

  #tombol-kembali-katalog {
    position: static;
    margin-top: 16px;
  }
}

/* =====================================================
   PENYESUAIAN AKHIR TOMBOL DAN NAVIGASI SOAL
   Tombol Sebelumnya/Berikutnya mengikuti alur konten,
   sedangkan tombol kembali katalog berada di kanan bawah.
   ===================================================== */

/* Navigasi sebelumnya/berikutnya tidak dibuat melayang. */
.navigasi-soal {
  position: static !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 28px 0 18px;
  padding: 0;
  box-sizing: border-box;
}

.navigasi-soal #tombol-sebelumnya,
.navigasi-soal #tombol-berikutnya {
  position: static !important;
  inset: auto !important;
  flex: 0 1 auto;
  margin: 0;
}

/* Tombol kembali katalog pada halaman ujian dan hasil. */
@media (min-width: 1251px) {
  #tombol-kembali-katalog-ujian,
  #tombol-kembali-katalog-hasil {
    position: fixed !important;
    z-index: 120;
    right: 24px;
    bottom: 18px;
    margin: 0;
    max-width: 260px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
  }
}

@media (max-width: 1250px) {
  #tombol-kembali-katalog-ujian,
  #tombol-kembali-katalog-hasil {
    position: static !important;
    margin: 16px 0;
  }
}

@media (max-width: 600px) {
  .navigasi-soal {
    gap: 10px;
  }

  .navigasi-soal #tombol-sebelumnya,
  .navigasi-soal #tombol-berikutnya {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 8px;
    font-size: 13px;
  }
}

/* =================================
   TAMPILAN KARTU PAKET ADMIN
================================= */

#daftar-pengelolaan-paket {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

#daftar-pengelolaan-paket .kartu-paket {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

#daftar-pengelolaan-paket .kartu-paket h3 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #172554;
  font-size: 19px;
}

#daftar-pengelolaan-paket .kartu-paket > p {
  color: #64748b;
  line-height: 1.6;
}

#daftar-pengelolaan-paket .btn-edit-paket {
  width: 100%;
  margin-top: 15px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #1d4ed8;
  color: white;
  font-weight: 600;
  cursor: pointer;
}

#daftar-pengelolaan-paket .btn-edit-paket:hover {
  background: #1e40af;
}

/* RINGKASAN KOMPOSISI SOAL */
.ringkasan-komposisi-paket {
  display: flex;
  gap: 8px;
  margin: 15px 0;
  flex-wrap: wrap;
}

.ringkasan-komposisi-paket span {
  flex: 1;
  min-width: 55px;
  padding: 9px 5px;
  text-align: center;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

/* STATUS PAKET ADMIN */

.label-status-paket {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.label-status-paket.aktif {
  background: #dcfce7;
  color: #15803d;
}

.label-status-paket.nonaktif {
  background: #f1f5f9;
  color: #64748b;
}

/* INFORMASI UTAMA KARTU PAKET */

.info-paket-admin > p:not(.label-status-paket) {
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}

.info-paket-admin h3 {
  font-size: 20px;
  font-weight: 700;
  color: #172554;
  margin-bottom: 8px;
}

.detail-ringkas-paket {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.detail-ringkas-paket span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 8px 10px;
  border-radius: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

/* RINGKASAN DASHBOARD ADMIN */
#ringkasan-dashboard-admin {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 25px 0 30px;
}

.kartu-ringkasan-admin {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.kartu-ringkasan-admin span {
  display: block;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.kartu-ringkasan-admin h3 {
  color: #1e293b;
  font-size: 30px;
  font-weight: 700;
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  #ringkasan-dashboard-admin {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* TOMBOL AKUN PESERTA */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-login,
.btn-daftar {
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.btn-login {
  background: transparent;
  border: 1px solid #2563eb;
  color: #2563eb;
}

.btn-login:hover {
  background: #eff6ff;
}

.btn-daftar {
  background: #2563eb;
  border: 1px solid #2563eb;
  color: white;
}

.btn-daftar:hover {
  background: #1d4ed8;
}