/* =====================================================================
   Halaman tes peserta
   =====================================================================

   Perombakan ini murni tampilan. Alur tes, penyimpanan jawaban, timer,
   dan fitur lanjut-tes tidak tersentuh : seluruh pengait yang dipakai
   assets/myjs/progres-tes.js tetap ada dengan nama yang sama
   (.jawaban, input:radio[data-kunci], #sesi-N, #waktu, .soal, .audio,
   #seekbar-<id>, .btnAudio, .btnNext, .btnBack, .btnSimpan).
   ===================================================================== */

/* =====================================================================
   PALET BERSAMA
   =====================================================================

   Token ini SAMA PERSIS dengan yang ada di panel admin
   (admintes/assets/mycss/style.css). Kalau salah satu diubah, ubah
   keduanya — uji_ui_palet.js membandingkan keduanya dan akan gagal
   kalau menyimpang.
   ===================================================================== */

:root {
    --ui-navy:       #0f172a;
    --ui-navy-2:     #1e293b;
    --ui-aksen:      #2563eb;
    --ui-aksen-2:    #3b82f6;
    --ui-sukses:     #10b981;
    --ui-bahaya:     #dc2626;
    --ui-peringatan: #f59e0b;
    --ui-latar:      #f1f5f9;
    --ui-permukaan:  #ffffff;
    --ui-garis:      #e2e8f0;
    --ui-redup:      #64748b;
    --ui-radius:     .75rem;
    --ui-bayang:     0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --ui-bayang-lg:  0 10px 15px -3px rgba(15, 23, 42, .07), 0 4px 6px -4px rgba(15, 23, 42, .05);
    --ui-huruf:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Token lama dipetakan ke token baru, BUKAN dihapus : seluruh aturan
       di bawah sudah memakainya, jadi cara ini mengubah semuanya
       sekaligus tanpa menyunting satu per satu — dan tanpa risiko ada
       yang terlewat. */
    --tes-biru:  var(--ui-aksen);
    --tes-garis: var(--ui-garis);
    --tes-teks:  var(--ui-navy-2);
    --tes-redup: var(--ui-redup);
}

body {
    font-family: var(--ui-huruf);
    color: var(--ui-navy-2);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ui-navy-2);
    letter-spacing: -.01em;
}

.text-muted { color: var(--ui-redup) !important; }

/* ---------------------------------------------------------------------
   Form & tombol — disamakan dengan panel admin
   --------------------------------------------------------------------- */

.form-control,
.form-select {
    border-color: #cbd5e1;
    border-radius: .5rem;
    color: var(--ui-navy-2);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: #94a3b8; }

.form-control:focus,
.form-select:focus {
    border-color: var(--ui-aksen);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.form-label {
    font-weight: 600;
    font-size: .8125rem;
    color: var(--ui-navy-2);
}

.form-floating > label { color: var(--ui-redup); }

.btn { border-radius: .5rem; font-weight: 500; }

.btn-primary {
    background-color: var(--ui-aksen);
    border-color: var(--ui-aksen);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ui-aksen-2);
    border-color: var(--ui-aksen-2);
}

.btn-primary:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .2); }

.btn-success { background-color: var(--ui-sukses); border-color: var(--ui-sukses); }

.card {
    border: 1px solid var(--ui-garis);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-bayang);
}

.card-header {
    border-bottom: 1px solid var(--ui-garis);
    background: transparent;
}

.card-title { font-weight: 600; }

/* ---------------------------------------------------------------------
   Bilah atas
   --------------------------------------------------------------------- */

.bilah-tes {
    background: var(--ui-permukaan);
    border-bottom: 1px solid var(--tes-garis);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

.bilah-tes .container-xl {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.bilah-logo img {
    height: 28px;
    width: auto;
    display: block;
}

.bilah-sesi {
    font-weight: 600;
    color: var(--tes-teks);
    white-space: nowrap;
}

.bilah-terjawab {
    color: var(--tes-redup);
    font-size: .85rem;
    white-space: nowrap;
}

/* Timer. Ukurannya sengaja besar : ini satu-satunya angka yang harus
   terbaca sekilas dari jarak baca ponsel. */
.bilah-waktu {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-variant-numeric: tabular-nums;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    padding: .35rem .7rem;
    border-radius: .5rem;
    background: #eff6ff;
    color: var(--tes-biru);
    white-space: nowrap;
}

/* Dua keadaan ini yang benar-benar penting terbaca : peserta harus tahu
   waktunya menipis tanpa harus membaca angkanya. Warnanya diambil dari
   token peringatan dan bahaya supaya sama dengan sisa aplikasi. */
.bilah-waktu.segera {
    background: #fffbeb;
    color: #b45309;
}

.bilah-waktu.kritis {
    background: #fef2f2;
    color: var(--ui-bahaya);
    animation: denyut 1s ease-in-out infinite;
}

@keyframes denyut {
    50% { opacity: .55; }
}

/* Pilihan ukuran huruf : ringkas supaya tidak mendesak timer */
.bilah-font {
    max-width: 9.5rem;
}

/* Keterangan kapan jam mulai berjalan. Hanya muncul pada TOEFL selama
   sesi Listening, lalu disembunyikan bilah-tes.js. */
.bilah-catatan {
    padding: .2rem .75rem .35rem;
    font-size: .75rem;
    color: #8a6d00;
    background: #fff8e6;
    border-top: 1px solid #f3e3bd;
    text-align: right;
}

/* Bilah progres tipis di tepi bawah */
.bilah-progres {
    height: 3px;
    background: #edf1f6;
}

.bilah-progres > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--tes-biru);
    transition: width .25s ease;
}

/* Penanda simpan otomatis */
.tanda-simpan {
    font-size: .78rem;
    color: var(--tes-redup);
    white-space: nowrap;
}

.tanda-simpan.tersimpan { color: #2f9e44; }
.tanda-simpan.gagal     { color: #c62828; }

@media (max-width: 575.98px) {
    .bilah-tes .container-xl {
        gap: .35rem .5rem;
        padding-left: .6rem;
        padding-right: .6rem;
    }

    .bilah-sesi     { font-size: .9rem; }
    .bilah-terjawab { font-size: .8rem; }

    /* Timer sengaja TIDAK dikecilkan : ini satu-satunya angka yang harus
       terbaca sekilas, dan justru di ponsel jarak bacanya paling jauh. */
    .bilah-waktu { font-size: 1.15rem; padding: .3rem .55rem; }

    /* Pemilih ukuran huruf cukup selebar angkanya */
    .bilah-font { max-width: 6.5rem; font-size: .8rem; }

    /* Penanda simpan menyusut jadi titik. Sebelumnya teksnya memaksa satu
       baris penuh sendirian, dan tiga baris bilah melekat memakan hampir
       seperlima layar ponsel selama 140 menit. */
    .tanda-simpan {
        width: .6rem;
        height: .6rem;
        padding: 0;
        border-radius: 50%;
        overflow: hidden;
        text-indent: -999px;
        background: #cbd3de;
        flex: 0 0 auto;
    }

    .tanda-simpan.tersimpan { background: #2f9e44; }
    .tanda-simpan.gagal     { background: #c62828; }
}

/* ---------------------------------------------------------------------
   Kartu soal
   --------------------------------------------------------------------- */

.soal {
    border: 1px solid var(--tes-garis);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-bayang);
}

/* line-height sengaja lega : sesi Reading berisi paragraf panjang yang
   dibaca berulang-ulang, dan baris yang terlalu rapat melelahkan. */
.soal .card-body {
    padding: 1.25rem 1.4rem;
    font-size: 17px;
    line-height: 1.75;
    color: var(--tes-teks);
}

/* Isi soal ditulis admin lewat CKEditor, jadi bisa memuat apa saja.
   Satu tabel atau satu tautan panjang yang melebihi lebar layar akan
   membuat SELURUH halaman tes tergulir mendatar, dan tombol navigasi di
   tepi kanan ikut terdorong keluar jangkauan. Ketiga aturan berikut
   memaksa isian yang kelewat lebar menyelesaikan urusannya sendiri. */
.soal {
    overflow-wrap: anywhere;
}

.soal img {
    max-width: 100%;
    height: auto;
}

.soal table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.soal pre {
    white-space: pre-wrap;
}

/* Soal yang belum terjawab. progres-tes.js menambahkan kelas Bootstrap
   list-group-item-danger ke .card-body, jadi penandanya dipasang di
   kelas itu, bukan kelas baru. */
.soal .card-body.list-group-item-danger {
    background: #fef2f2;
    border-left: 4px solid var(--ui-bahaya);
    color: var(--tes-teks);
}

@media (max-width: 575.98px) {
    .soal .card-body { padding: .9rem 1rem; font-size: 16px; }
}

/* ---------------------------------------------------------------------
   Pilihan jawaban
   --------------------------------------------------------------------- */

.opsi {
    /* menampung radio yang disembunyikan di bawah, supaya posisinya
       terkurung di sini dan tidak melompat ke sudut halaman */
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: 100%;
    min-height: 44px;          /* bidang tekan yang nyaman di layar sentuh */
    margin-bottom: .5rem;
    padding: .6rem .8rem;
    border: 1px solid var(--tes-garis);
    border-radius: .55rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.opsi:hover { border-color: #94a3b8; background: #f8fafc; }

.opsi input[type="radio"] {
    /* radio aslinya tetap ada dan tetap bernama sama — hanya disembunyikan
       secara visual, karena penanda terpilih digambar oleh .opsi-huruf */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.opsi-huruf {
    flex: 0 0 auto;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    border: 1px solid var(--tes-garis);
    background: #f1f5f9;
    color: var(--tes-redup);
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.75rem;
    text-align: center;
    transition: background .12s, border-color .12s, color .12s;
}

.opsi-teks { flex: 1 1 auto; }

.opsi input[type="radio"]:checked ~ .opsi-huruf {
    background: var(--tes-biru);
    border-color: var(--tes-biru);
    color: #fff;
}

/* :has belum ada di semua browser lama, jadi kelas ini juga dipasang
   dari JS agar penanda terpilih tetap terlihat di mana pun */
.opsi.terpilih {
    border-color: var(--tes-biru);
    background: #eff6ff;
    box-shadow: 0 0 0 1px var(--tes-biru) inset;
}

.opsi[dir="rtl"] { flex-direction: row-reverse; text-align: right; }

/* ---------------------------------------------------------------------
   Pemutar audio
   --------------------------------------------------------------------- */

.audio-kartu {
    text-align: center;
    padding: .5rem 0;
}

.audio-kartu progress {
    width: 100%;
    height: 8px;
    margin: .5rem 0;
    border-radius: 4px;
    overflow: hidden;
}

.audio-kartu .btnAudio {
    min-width: 11rem;
    min-height: 44px;
    font-size: 1rem;
}

.audio-catatan {
    margin-top: .5rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: #fff4e0;
    color: #a05a00;
    font-size: .85rem;
}

/* ---------------------------------------------------------------------
   Tombol navigasi
   --------------------------------------------------------------------- */

.btnNext, .btnBack, .btnSimpan {
    min-height: 44px;
    min-width: 8rem;
}

@media (max-width: 575.98px) {
    .btnNext, .btnBack, .btnSimpan { min-width: 6.5rem; }
}

/* ---------------------------------------------------------------------
   Halaman pendaftaran dan halaman terkunci
   --------------------------------------------------------------------- */

/* Kartu ini berdiri sendiri di tengah latar slate, jadi bayangannya
   dibuat lebih dalam daripada kartu biasa supaya benar-benar terangkat. */
.kartu-masuk {
    border: 0;
    border-radius: 1rem;
    box-shadow: var(--ui-bayang-lg);
}

.kartu-masuk .card-body { padding: 2rem; }

.petunjuk-tes {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--tes-redup);
}

.petunjuk-tes li { margin-bottom: .4rem; }

/* ---------------------------------------------------------------------
   Halaman hasil
   ---------------------------------------------------------------------

   Isi halaman ini ditulis admin lewat CKEditor dan ada 49 varian berbeda
   di 493 tes. Karena itu TIDAK ADA satu pun aturan di bawah yang
   mengandaikan struktur tertentu — yang diberikan cuma wadah, jarak, dan
   tipografi untuk apa pun yang ada di dalamnya.
   --------------------------------------------------------------------- */

/* Lebih lapang daripada .container-tight yang dipakai kotak password,
   tapi tetap terbatas : baris teks yang terlalu panjang melelahkan mata.
   ~62 karakter per baris pada ukuran huruf ini. */
.container-hasil {
    width: 100%;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.kartu-hasil {
    border: 0;
    border-radius: 1rem;
    box-shadow: var(--ui-bayang-lg);
}

.kartu-hasil .card-body { padding: 2rem; }

@media (max-width: 575.98px) {
    .container-hasil    { padding-left: .75rem; padding-right: .75rem; }
    .kartu-hasil        { border-radius: .75rem; }
    .kartu-hasil .card-body { padding: 1.25rem; }
}

/* ---------------------------------------------------------------------
   Kartu sertifikat publik
   ---------------------------------------------------------------------
   Halaman yang dituju QR yang sudah tercetak, dan yang paling sering
   dibuka justru dari ponsel. Isinya delapan baris <p> yang di layar 390px
   berdesakan tanpa jeda antar bagian.

   Yang diatur di sini HANYA jarak, ukuran, dan sudut — tidak satu kata pun
   berubah. Angkanya sengaja disamakan dengan .kartu-hasil di atas: peserta
   yang baru selesai ujian melihat kartu hasil, lalu membuka sertifikatnya.
   Dua kartu itu harus terasa satu keluarga.
   --------------------------------------------------------------------- */
.kartu-sertifikat {
    border: 0;
    border-radius: 1rem;
    box-shadow: var(--ui-bayang-lg);
}

.kartu-sertifikat .card-body { padding: 2rem; }

/* Jeda antar baris data. Tanpa ini <p> memakai margin bawaan Tabler
   (1rem penuh) yang terasa renggang di desktop tapi tetap berdesakan di
   ponsel karena barisnya membungkus. */
.kartu-sertifikat p              { margin-bottom: .85rem; line-height: 1.6; }
.kartu-sertifikat p:last-child   { margin-bottom: 0; }

/* Catatan kaki merek dagang : panjang, dan tidak perlu selebar isi utama */
.kartu-sertifikat small { line-height: 1.5; }

@media (max-width: 575.98px) {
    .kartu-sertifikat            { border-radius: .75rem; }
    .kartu-sertifikat .card-body { padding: 1.15rem 1rem; }
    .kartu-sertifikat p          { margin-bottom: .7rem; }
}

/* Tipografi untuk HTML bebas dari CKEditor. Yang paling terasa: deretan
   <br> pada blok data diri selama ini menempel rapat sehingga terbaca
   sebagai satu gumpalan. */
.hasil-pesan {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ui-navy-2);
}

.hasil-pesan p { margin-bottom: 1.15rem; }
.hasil-pesan p:last-child { margin-bottom: 0; }

.hasil-pesan br { line-height: 2.1; }

.hasil-pesan b,
.hasil-pesan strong { font-weight: 600; color: var(--ui-navy); }

.hasil-pesan a { color: var(--ui-aksen); text-decoration: underline; }
.hasil-pesan a:hover { color: var(--ui-aksen-2); }

/* Isian yang kelewat lebar (tabel atau tautan panjang yang ditempel
   admin) harus menyelesaikan urusannya sendiri, bukan menggulirkan
   seluruh halaman ke samping. */
.hasil-pesan { overflow-wrap: anywhere; }
.hasil-pesan img { max-width: 100%; height: auto; }
.hasil-pesan table { display: block; max-width: 100%; overflow-x: auto; }

/* Tombol pesan sertifikat — isi token $link. Tautannya tetap sama,
   bentuknya saja yang naik jadi tombol. Ditulis sebagai blok supaya
   tidak terjepit di tengah kalimat. */
.btn-sertifikat {
    display: block;
    width: 100%;
    margin-top: .75rem;
    min-height: 48px;
    padding: .7rem 1rem;
    font-weight: 600;
    text-decoration: none !important;
    color: #fff !important;
}

/* --------------------------------------------------------------
   Kartu skor — hanya muncul bila admin memakai token $kartu_skor
   -------------------------------------------------------------- */

.kartu-skor { margin: 1.25rem 0; }

.skor-total {
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: var(--ui-radius);
    background: var(--ui-navy);
    color: #fff;
}

.skor-total-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.skor-total-angka {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Tiga kartu sesi. Grid, bukan flex : di ponsel jadi satu kolom penuh
   tanpa perlu aturan tambahan. */
.skor-sesi-baris {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-top: .75rem;
}

@media (max-width: 575.98px) {
    .skor-sesi-baris { grid-template-columns: 1fr; }
    .skor-total-angka { font-size: 2.5rem; }
}

.skor-sesi {
    text-align: center;
    padding: .9rem .6rem;
    border: 1px solid var(--ui-garis);
    border-radius: var(--ui-radius);
    background: var(--ui-permukaan);
}

.skor-sesi-angka {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ui-aksen);
    font-variant-numeric: tabular-nums;
}

.skor-sesi-nama {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ui-navy-2);
}

.skor-sesi-ket {
    font-size: .7rem;
    line-height: 1.35;
    color: var(--ui-redup);
    margin-top: .15rem;
}

/* --------------------------------------------------------------
   Kartu identitas — token $kartu_identitas
   -------------------------------------------------------------- */

.kartu-identitas {
    margin: 1.25rem 0;
    padding: .25rem 1rem;
    border: 1px solid var(--ui-garis);
    border-radius: var(--ui-radius);
    background: #f8fafc;
}

.identitas-baris {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: .5rem 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--ui-garis);
}

.identitas-baris:last-child { border-bottom: 0; }

/* Di ponsel label ditumpuk di atas nilainya : dua kolom pada layar
   sempit membuat alamat panjang terjepit jadi satu huruf per baris. */
@media (max-width: 575.98px) {
    .identitas-baris { grid-template-columns: 1fr; gap: .1rem; }
}

.identitas-label {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ui-redup);
}

.identitas-nilai {
    margin: 0;
    color: var(--ui-navy-2);
    overflow-wrap: anywhere;
}

/* Dua tautan promo di kaki halaman : dipisahkan garis tipis supaya
   terbaca sebagai tambahan, bukan bagian dari hasil tesnya. */
.hasil-promo {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ui-garis);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ui-redup);
}

.hasil-promo p:last-child { margin-bottom: 0; }
.hasil-promo a { color: var(--ui-aksen); }

/* ---------------------------------------------------------------------
   Banner & tombol ajakan pada halaman hasil
   --------------------------------------------------------------------- */

.cta-hasil {
    margin: 1rem 0;
}

.banner-hasil {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .5rem;
    margin-bottom: .85rem;
}

/* Embed sering berupa iframe berukuran tetap (YouTube menyarankan
   560x315). Tanpa aturan ini, di ponsel ia melebar melewati kartu dan
   membuat seluruh halaman bisa digulir mendatar. */
.banner-hasil-embed {
    position: relative;
    width: 100%;
    margin-bottom: .85rem;
    overflow: hidden;
    border-radius: .5rem;
}

.banner-hasil-embed iframe,
.banner-hasil-embed video,
.banner-hasil-embed embed,
.banner-hasil-embed object {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

.banner-hasil-embed img {
    display: block;
    width: 100%;
    height: auto;
}

.btn-cta-hasil {
    min-height: 48px;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Anti-cheat
   --------------------------------------------------------------------- */

/* Tirai layar penuh. z-index di bawah SweetAlert (1060+) supaya dialog
   peringatan tetap terbaca di atasnya. */
.tirai-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(28, 36, 52, .97);
}

.tirai-isi {
    max-width: 30rem;
    text-align: center;
    color: #fff;
}

.tirai-judul {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.tirai-teks {
    color: #c8d0dc;
    margin-bottom: 1.25rem;
}

.tirai-fullscreen .btn { min-height: 48px; }

/* Watermark identitas.
   pointer-events WAJIB none : tanpa itu ia menelan klik pada pilihan
   jawaban yang kebetulan berada di bawahnya, dan peserta tidak bisa
   menjawab sama sekali di tempat itu.

   user-select none juga wajib, kalau tidak ia ikut tersalin saat peserta
   menyeleksi soal di atasnya. */
.watermark-tes {
    position: fixed;
    top: 30%;
    left: 25%;
    z-index: 1000;
    pointer-events: none;
    user-select: none;
    transform: rotate(-24deg);
    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
    color: rgba(32, 107, 196, .16);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
    transition: top .6s ease, left .6s ease;
}

@media print {
    /* Yang paling mungkin dibagikan justru hasil cetaknya */
    .watermark-tes { color: rgba(0, 0, 0, .28); }
}

/* ---------------------------------------------------------------------
   Cek audio sebelum mulai
   --------------------------------------------------------------------- */

.cek-audio-ajakan {
    color: var(--tes-redup);
    margin-bottom: .75rem;
}

/* Pemutar mengikuti bentuk .audio-kartu di halaman ujian : tombol besar
   di tengah, batang kemajuan tipis di bawahnya. Peserta melihat pemutar
   yang sama persis nanti di sesi Listening. */
.cek-audio-pemutar {
    text-align: center;
    max-width: 28rem;
    margin: 1rem auto .25rem;
}

.cek-audio-tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 14rem;
    min-height: 48px;
    font-size: 1rem;
    font-weight: 600;
}

/* currentColor : ikon ikut memutih bersama teks tombolnya. Jaraknya
   diatur `gap` di atas, bukan margin pada ikon. */
.cek-audio-ikon {
    color: currentColor;
    flex: 0 0 auto;
}

.cek-audio-progres {
    display: block;
    width: 100%;
    height: 8px;
    margin: .75rem 0 0;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--ui-garis);
}

/* Batang kemajuan butuh tiga penulisan berbeda : Firefox, Chrome/Safari,
   dan latar dasarnya sendiri. Tanpa ketiganya, warnanya jatuh ke bawaan
   peramban yang berbeda-beda. */
.cek-audio-progres::-webkit-progress-bar   { background: var(--ui-garis); }
.cek-audio-progres::-webkit-progress-value { background: var(--ui-aksen); }
.cek-audio-progres::-moz-progress-bar      { background: var(--ui-aksen); }

@media (max-width: 575.98px) {
    .cek-audio-pemutar  { max-width: none; }
    .cek-audio-tombol   { width: 100%; min-width: 0; }
}

.cek-audio-tanya {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--tes-garis);
}

.cek-audio-tanya .btn { min-height: 44px; }

.cek-audio-bantuan,
.cek-audio-gagal,
.cek-audio-siap {
    margin-top: 1rem;
    padding: .75rem .9rem;
    border-radius: .5rem;
    font-size: .9rem;
}

.cek-audio-bantuan {
    background: #fff8e6;
    border: 1px solid #f2d99b;
}

.cek-audio-bantuan ul {
    margin: 0;
    padding-left: 1.1rem;
}

.cek-audio-gagal {
    background: #fdf0ef;
    border: 1px solid #f0c2be;
}

.cek-audio-siap {
    background: #eef8f1;
    border: 1px solid #b8dfc5;
    color: #1c6b3a;
}

/* Tombol Next yang masih terkunci harus terlihat terkunci, bukan sekadar
   tidak bereaksi saat ditekan. */
.btnMulai:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Tombol melanjutkan tes dibuat menonjol : peserta yang koneksinya
   terputus datang ke halaman ini dalam keadaan panik, dan inilah yang
   mereka cari. */
.btn-lanjut {
    min-height: 48px;
    font-size: 1.05rem;
    font-weight: 600;
}