/* =====================================================================
   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;
}

/* keterangan keadaan pemutar : memuat, berpindah ke cadangan, gagal */
.audio-status {
    margin-top: .4rem;
    font-size: .85rem;
    color: #475569;
}
.audio-status--gagal { color: #b91c1c; font-weight: 600; }

/* overlay "Menyiapkan audio" sebelum halaman ujian dimulai */
.audio-siap-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
}
.audio-siap-kotak {
    width: 100%;
    max-width: 420px;
    padding: 1.25rem 1.5rem;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .3);
    text-align: center;
}
.audio-siap-judul { font-size: 1.1rem; font-weight: 700; margin-bottom: .25rem; }
.audio-siap-ket   { font-size: .85rem; color: #475569; margin-bottom: .75rem; }
.audio-siap-progres { width: 100%; height: 10px; }
.audio-siap-angka { margin-top: .4rem; font-size: .85rem; color: #475569; }

.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; }
}

/* 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;
}

/* =====================================================================
   MEMBER AREA v2 (kelas / LMS)
   =====================================================================

   Satu bahasa desain untuk landing, masuk, beranda, video, histori, dan
   pengumuman. Mobile-first; titik lebar mengikuti Tabler : < 768 ponsel,
   768–991 tablet, >= 992 (lg) desktop.

   Prinsip :
   - kartu lembut : radius 1rem, border hampir tak terlihat, bayangan
     halus, naik 2px saat hover (hanya perangkat berpointer halus);
   - TIDAK ADA garis aksen di sisi kiri/atas kartu — jenis materi dibedakan
     lewat pil dan warna sampul;
   - semua sasaran sentuh >= 44px; input form masuk >= 16px (anti-zoom iOS);
   - hero memakai overlay gelap supaya teks putih tetap terbaca di atas
     gambar terang; kontras dijaga >= 4.5:1.
   ===================================================================== */

:root {
    --m-radius:     1rem;
    --m-radius-sm:  .75rem;
    --m-tint-biru:  #eaf1ff;
    --m-tint-ungu:  #f1ecff;
    --m-tint-abu:   #f1f5f9;
    --m-tint-hijau: #dcfce7;
    --m-ungu:       #7c3aed;
    --m-ungu-2:     #a78bfa;
    --m-hijau:      #059669;
    --m-garis:      rgba(15, 23, 42, .06);
    --m-bayang:     0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .06);
    --m-bayang-lg:  0 8px 30px rgba(15, 23, 42, .12);
}

.page-member { min-height: 100vh; }

@media (max-width: 991.98px) {
    .page-member { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* Tema per kelas : token --k-* dipasang server pada atribut style pembungkus
   (.page-member / .landing-m). Setiap pemakaian memberi nilai cadangan biru,
   jadi kelas tanpa tema tampil persis seperti bawaan. */
.page-member :focus-visible,
.landing-m :focus-visible { outline: 3px solid rgba(var(--k-1-rgb, 37, 99, 235), .45); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .page-member *, .landing-m * { transition: none !important; animation: none !important; }
}

/* ---- kartu dasar ------------------------------------------------- */

.kartu-m {
    background: var(--ui-permukaan);
    border: 1px solid var(--m-garis);
    border-radius: var(--m-radius);
    box-shadow: var(--m-bayang);
    margin-bottom: 1rem;
    overflow: hidden;
}

.kartu-m-kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem .5rem;
}

.kartu-m-judul {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ui-navy-2);
}

.kartu-m-badan { padding: .75rem 1.25rem 1.25rem; }

.judul-halaman-m {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin: .25rem 0 1rem;
}

.judul-halaman-m-teks { font-size: 1.5rem; font-weight: 700; margin: 0; }

.tautan-m { color: var(--ui-aksen); font-weight: 600; text-decoration: none; }
.tautan-m:hover { text-decoration: underline; }
.tautan-m--kembali { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: .25rem; }

/* ---- pil & tombol ------------------------------------------------ */

.pil {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
}

.pil-video      { background: #fee2e2; color: #b91c1c; }
.pil-tes        { background: rgba(var(--k-1-rgb, 37, 99, 235), .12); color: var(--k-gelap, var(--ui-aksen)); }
.pil-tautan     { background: var(--m-tint-abu); color: var(--ui-navy-2); }
.pil-zoom       { background: var(--m-tint-ungu); color: var(--m-ungu); }
.pil-berkas     { background: var(--m-tint-hijau); color: var(--m-hijau); }
.pil-selesai    { background: var(--m-tint-hijau); color: var(--m-hijau); }
.pil-baru       { background: var(--ui-aksen); color: #fff; }
.pil-pin        { background: #fef3c7; color: #b45309; }
.pil-live       { background: #dc2626; color: #fff; animation: denyut-m 1.6s ease-in-out infinite; }
.pil-peringatan { background: #fef3c7; color: #b45309; }
.pil-kaca       { background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }

@keyframes denyut-m { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.tombol-m {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    min-height: 44px;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}

.tombol-m:hover { text-decoration: none; }
.tombol-m--utama { background: var(--k-1, var(--ui-aksen)); color: #fff; box-shadow: 0 4px 14px rgba(var(--k-1-rgb, 37, 99, 235), .25); }
.tombol-m--utama:hover, .tombol-m--utama:focus { background: var(--k-gelap, var(--ui-aksen-2)); color: #fff; }
.tombol-m--ghost { background: var(--ui-permukaan); color: var(--ui-navy-2); border-color: #dbe2ea; }
.tombol-m--ghost:hover { background: var(--m-tint-abu); color: var(--ui-navy-2); }
.tombol-m--kaca { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .4); backdrop-filter: blur(6px); }
.tombol-m--kaca:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.tombol-m--kecil { min-height: 36px; padding: .35rem .8rem; font-size: .8rem; }
.tombol-m--besar { min-height: 52px; padding: .7rem 1.6rem; font-size: 1rem; }
.tombol-m.nonaktif { opacity: .55; cursor: not-allowed; box-shadow: none; pointer-events: auto; }
.tombol-m.redup { opacity: .7; }

/* varian warna menu tautan (mengikuti nama warna Tabler) */
.tombol-m--primary { background: var(--ui-aksen); color: #fff; }
.tombol-m--success { background: var(--ui-sukses); color: #fff; }
.tombol-m--warning { background: var(--ui-peringatan); color: #fff; }
.tombol-m--danger  { background: var(--ui-bahaya); color: #fff; }
.tombol-m--info    { background: #0ea5e9; color: #fff; }
.tombol-m--dark    { background: var(--ui-navy); color: #fff; }
.tombol-m--primary:hover, .tombol-m--success:hover, .tombol-m--warning:hover,
.tombol-m--danger:hover, .tombol-m--info:hover, .tombol-m--dark:hover { color: #fff; filter: brightness(1.08); }

.pil-tombol {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #dbe2ea;
    background: var(--ui-permukaan);
    color: var(--ui-navy-2);
}

.pil-tombol:hover { background: var(--m-tint-abu); color: var(--ui-navy-2); text-decoration: none; }
.pil-tombol--success { color: var(--m-hijau); border-color: #bbf7d0; background: #f0fdf4; }
.pil-tombol--danger  { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.pil-tombol--warning { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.pil-tombol--info    { color: #0369a1; border-color: #bae6fd; background: #f0f9ff; }
.pil-tombol--dark    { color: #fff; background: var(--ui-navy); border-color: var(--ui-navy); }
.pil-tombol--primary { color: var(--ui-aksen); border-color: #bfdbfe; background: var(--m-tint-biru); }

/* ---- bilah progres ------------------------------------------------ */

.progres-m {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    overflow: hidden;
}

.progres-m > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--k-1, var(--ui-aksen)), var(--k-2, var(--ui-aksen-2)));
    transition: width .4s ease;
}

.progres-m--tipis { height: 4px; margin-top: .4rem; }
.progres-m--hero  { height: 10px; background: rgba(255, 255, 255, .22); }
.progres-m--hero > span { background: #fff; }

/* ---- bilah atas ---------------------------------------------------- */

.bilah-m {
    position: relative;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--m-garis);
}

/* garis tema 3px di tepi atas bilah : ciri kelas ikut ke header */
.bilah-m::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--k-1, var(--ui-aksen)), var(--k-2, var(--ui-aksen-2)));
}

.bilah-m-isi {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 60px;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.bilah-m-logo img { height: 30px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.bilah-m-logo--klien img { height: 34px; }

.bilah-m-judul { flex: 1 1 auto; min-width: 0; }
.bilah-m-kelas { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bilah-m-tab { gap: .25rem; }

.bilah-m-taba {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .4rem .9rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ui-redup);
    text-decoration: none;
}

.bilah-m-taba:hover { color: var(--ui-navy-2); background: var(--m-tint-abu); text-decoration: none; }
.bilah-m-taba.aktif { color: var(--k-gelap, var(--ui-aksen)); background: rgba(var(--k-1-rgb, 37, 99, 235), .12); }

.bilah-m-menu { gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

.bilah-m-akun { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

.avatar-m {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--k-1, var(--ui-aksen)), var(--k-2, var(--m-ungu)));
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .02em;
}

.bilah-m-keluar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--ui-redup);
}

.bilah-m-keluar:hover { background: var(--m-tint-abu); color: var(--ui-bahaya); }

/* ---- bilah bawah (< lg) ----------------------------------------- */

.bilah-bawah {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--m-garis);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, .06);
}

.bilah-bawah-butir {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ui-redup);
    text-decoration: none;
}

.bilah-bawah-butir span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bilah-bawah-butir.aktif { color: var(--k-gelap, var(--ui-aksen)); background: rgba(var(--k-1-rgb, 37, 99, 235), .12); }
.bilah-bawah-butir:hover, .bilah-bawah-butir:focus { color: var(--ui-aksen); text-decoration: none; }
.bilah-bawah-butir.warna-success { color: var(--m-hijau); }
.bilah-bawah-butir.warna-warning { color: #b45309; }
.bilah-bawah-butir.warna-danger  { color: #b91c1c; }
.bilah-bawah-butir.warna-dark    { color: var(--ui-navy); }
.bilah-bawah-butir.warna-info    { color: #0369a1; }

/* ---- hero kelas (beranda) ----------------------------------------- */

.hero-m {
    position: relative;
    border-radius: var(--m-radius);
    margin-bottom: 1rem;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(var(--k-arah, 135deg), var(--k-1, var(--ui-aksen)) 0%, var(--k-2, #1e3a8a) 100%);
    box-shadow: var(--m-bayang-lg);
}

/* warna tema terang tanpa gambar : teks & kendali hero jadi gelap */
.hero-m--terang { color: var(--k-teks-hero, #0f172a); }
.hero-m--terang .hero-m-judul { color: inherit; }
.hero-m--terang .tombol-m--kaca { color: inherit; background: rgba(255, 255, 255, .4); border-color: rgba(15, 23, 42, .2); }
.hero-m--terang .progres-m--hero { background: rgba(15, 23, 42, .15); }
.hero-m--terang .progres-m--hero > span { background: var(--k-gelap, var(--ui-navy)); }

.hero-m-kanan { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.hero-m-logo { align-items: center; padding: 6px 10px; border-radius: 10px; background: #fff; }
.hero-m-logo img { height: 36px; width: auto; max-width: 160px; object-fit: contain; display: block; }

.hero-m--gambar { background-image: var(--hero-gambar); background-size: cover; background-position: center; }

.hero-m--gambar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .55) 0%, rgba(15, 23, 42, .78) 100%);
}

.hero-m-isi { position: relative; padding: 1.25rem; }

.hero-m-atas { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.hero-m-halo  { font-size: .85rem; opacity: .85; margin-bottom: .15rem; }
.hero-m-judul { font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin: 0 0 .5rem; color: #fff; letter-spacing: -.01em; }

.hero-m-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .85rem; opacity: .92; }
.hero-m-meta span { display: inline-flex; align-items: center; }

.hero-m-progres { margin-top: 1.25rem; }
.hero-m-progres-teks { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; margin-bottom: .4rem; }
.hero-m-persen { font-size: 1.15rem; font-weight: 800; }

@media (min-width: 768px) {
    .hero-m-isi { padding: 2rem; }
    .hero-m-judul { font-size: 2rem; }
}

/* ---- sorotan : lanjutkan & Zoom berikutnya ------------------------ */

/* kartu sertifikat kelulusan (beranda member) */
.sertifikat-m { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.sertifikat-m-ikon { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--m-tint-abu); color: var(--ui-navy-2); }
.sertifikat-m--terbit .sertifikat-m-ikon { background: var(--m-tint-hijau); color: var(--m-hijau); }
.sertifikat-m-judul { font-weight: 700; color: var(--ui-navy-2); }
.sertifikat-m-ket { font-size: .9rem; color: var(--ui-teks-2, #475569); margin-top: .15rem; }
.sertifikat-m-aksi { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

.sorot-m { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
.sorot-m-label { display: flex; align-items: center; font-size: .85rem; font-weight: 700; color: var(--ui-navy-2); margin-bottom: .5rem; }
.sorot-m .kartu-materi { margin-bottom: 0; }

@media (min-width: 768px) {
    .sorot-m { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sorot-m-kolom:only-child { grid-column: 1 / -1; max-width: 560px; }
}

/* ---- pengumuman --------------------------------------------------- */

.pengumuman-m-daftar { padding: 0 1.25rem 1rem; }

.pengumuman-m-butir { padding: .75rem 0; border-top: 1px solid var(--m-garis); }
.pengumuman-m-butir:first-child { border-top: 0; }

.pengumuman-m-atas { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .5rem; margin-bottom: .25rem; }
.pengumuman-m-judul { font-weight: 700; color: var(--ui-navy-2); }
.pengumuman-m-judul--besar { font-size: 1.1rem; }
.pengumuman-m-tgl { margin-left: auto; font-size: .78rem; color: var(--ui-redup); white-space: nowrap; }
.pengumuman-m-isi { font-size: .9rem; color: var(--ui-redup); line-height: 1.55; }
.pengumuman-m-kartu { padding: 1.1rem 1.25rem; }
.pengumuman-m-kartu--pin { background: linear-gradient(0deg, #fffdf5, #fff); }
.pengumuman-m-isi-penuh { line-height: 1.7; color: var(--ui-navy-2); }

/* ---- bagian sesi ------------------------------------------------- */

.bagian-daftar { margin-bottom: 1rem; }

.bagian-m {
    background: var(--ui-permukaan);
    border: 1px solid var(--m-garis);
    border-radius: var(--m-radius);
    box-shadow: var(--m-bayang);
    margin-bottom: .75rem;
    overflow: hidden;
}

.bagian-m-kepala {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    min-height: 64px;
    padding: .85rem 1rem;
    background: transparent;
    border: 0;
    text-align: left;
    color: var(--ui-navy-2);
    cursor: pointer;
}

.bagian-m-kepala:hover { background: #f8fafc; }

.bagian-m-nomor {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--m-tint-biru);
    color: var(--ui-aksen);
}

.bagian-m--selesai .bagian-m-nomor { background: var(--m-tint-hijau); color: var(--m-hijau); }

.bagian-m-teks { flex: 1 1 auto; min-width: 0; }
.bagian-m-judul { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bagian-m-sub { display: block; font-size: .8rem; color: var(--ui-redup); }

.bagian-m-panah { flex: 0 0 auto; color: var(--ui-redup); transition: transform .2s ease; }
.bagian-m-kepala.collapsed .bagian-m-panah { transform: rotate(-90deg); }

.bagian-m-isi { padding: 0 1rem 1rem; }
.bagian-m-deskripsi { color: var(--ui-redup); margin: 0 0 .75rem; }

/* ---- kartu materi ------------------------------------------------- */

.daftar-materi { display: grid; grid-template-columns: 1fr; gap: .85rem; align-items: stretch; }

@media (min-width: 768px) { .daftar-materi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .daftar-materi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kartu-materi {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ui-permukaan);
    border: 1px solid var(--m-garis);
    border-radius: var(--m-radius);
    box-shadow: var(--m-bayang);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .kartu-materi:hover { transform: translateY(-2px); box-shadow: var(--m-bayang-lg); }
}

.kartu-materi .sampul {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    text-decoration: none;
}

.kartu-materi .sampul img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sampul--video { background: var(--ui-navy); }

.sampul-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.sampul-play svg {
    width: 56px;
    height: 56px;
    padding: 15px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    transition: transform .15s ease;
}

.kartu-materi:hover .sampul-play svg { transform: scale(1.06); }

.sampul-progres { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .35); }
.sampul-progres > span { display: block; height: 100%; background: #ef4444; }

.sampul--tes    { background: linear-gradient(135deg, rgba(var(--k-1-rgb, 37, 99, 235), .14) 0%, rgba(var(--k-1-rgb, 37, 99, 235), .32) 100%); color: var(--k-gelap, var(--ui-aksen)); }

/* sampul non-video kini tautan : ikon merespons hover seperti tombol putar video */
.sampul-ikon { transition: transform .15s ease; }
a.sampul:hover .sampul-ikon { transform: scale(1.06); }
.sampul.nonaktif { pointer-events: none; }
.sampul--tautan { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 60%, #cbd5e1 100%); color: var(--ui-navy-2); }
.sampul--zoom   { background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 55%, #c4b5fd 100%); color: var(--m-ungu); }
.sampul--berkas { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 55%, #a7f3d0 100%); color: var(--m-hijau); }

.sampul-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .1);
}

.sampul-pil { position: absolute; top: .6rem; left: .6rem; z-index: 2; box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }

/* sampul bergambar (gambar sampul admin, migrasi #29) : ikon jenis mengecil ke pojok */
.sampul--gambar { background: var(--ui-navy-2); }
.sampul--gambar .sampul-ikon--kecil {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .9);
    color: var(--ui-navy-2);
}
.sampul--gambar.sampul--terkunci img { filter: grayscale(.6) brightness(.7); }
.sampul-status { position: absolute; top: .6rem; right: .6rem; z-index: 2; }

.centang-m {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--m-hijau);
    color: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .2);
}

.kartu-materi.selesai .sampul--video img { opacity: .82; }

.kartu-materi .isi {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .9rem 1rem 1rem;
}

.kartu-materi .judul { font-weight: 700; line-height: 1.35; color: var(--ui-navy-2); }
.kartu-materi .meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .8rem; color: var(--ui-redup); }
.kartu-materi .meta span { display: inline-flex; align-items: center; }
.zoom-hitung { font-weight: 600; color: var(--m-ungu); }
.zoom-live .zoom-hitung { color: #dc2626; }

.kartu-materi .deskripsi {
    font-size: .875rem;
    color: var(--ui-redup);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.skor-ringkas { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .25rem; font-size: .8rem; color: var(--ui-navy-2); text-decoration: none; }
a.skor-ringkas:hover { color: var(--ui-aksen); text-decoration: none; }

.kartu-materi .tombol-m { margin-top: auto; align-self: stretch; }

@media (min-width: 768px) {
    .kartu-materi .tombol-m { align-self: flex-start; }
}

/* ---- kosong ------------------------------------------------------- */

.kosong-m { padding: 2.5rem 1.25rem; text-align: center; }
.kosong-m-ikon { color: #cbd5e1; margin-bottom: .5rem; }
.kosong-m-judul { font-weight: 700; font-size: 1.1rem; margin-bottom: .25rem; }

/* ---- menu tautan (up-selling) ------------------------------------- */

.menu-upsell-daftar { display: grid; grid-template-columns: 1fr; gap: .6rem; padding: .25rem 1.25rem 1.25rem; }
.menu-upsell-daftar .tombol-m { min-height: 48px; }

@media (min-width: 768px) {
    .menu-upsell-daftar { display: flex; flex-wrap: wrap; }
    .menu-upsell-daftar .tombol-m { flex: 0 1 auto; min-width: 220px; max-width: 360px; justify-content: flex-start; }
}

/* ---- landing & masuk ---------------------------------------------- */

.landing-m { min-height: 100vh; background: var(--ui-latar); }

.hero-landing {
    position: relative;
    padding: 1.5rem 0 2.5rem;
    color: #fff;
    background: linear-gradient(var(--k-arah, 135deg), var(--k-1, var(--ui-aksen)) 0%, var(--k-2, #1e3a8a) 100%);
    min-height: 100vh;
}

.hero-landing--terang { color: var(--k-teks-hero, #0f172a); }
.hero-landing--terang .hero-landing-judul { color: inherit; }
.hero-landing--terang .pil-kaca { color: inherit; border-color: rgba(15, 23, 42, .25); background: rgba(255, 255, 255, .35); }
.hero-landing--terang .hero-landing-catatan { background: rgba(255, 255, 255, .45); border-color: rgba(15, 23, 42, .15); }

.hero-landing--gambar { background-image: var(--hero-gambar); background-size: cover; background-position: center; }

.hero-landing--gambar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .62) 0%, rgba(15, 23, 42, .84) 100%);
}

.hero-landing .container-xl, .hero-landing .container-tight { position: relative; }
.hero-landing--tengah { display: flex; align-items: center; }

.hero-landing-logo { margin-bottom: 1.25rem; }
.hero-landing-logo img { height: 40px; width: auto; max-width: 200px; object-fit: contain; background: #fff; padding: 6px 10px; border-radius: 10px; }

.hero-landing-judul { font-size: 1.75rem; font-weight: 800; line-height: 1.2; margin: .6rem 0 .75rem; color: #fff; letter-spacing: -.01em; }
.hero-landing-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .9rem; opacity: .92; }
.hero-landing-meta span { display: inline-flex; align-items: center; }
.hero-landing-catatan { margin-top: 1rem; padding: .75rem 1rem; border-radius: var(--m-radius-sm); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-size: .9rem; }
.hero-landing-deskripsi { margin-top: 1rem; line-height: 1.7; opacity: .95; max-width: 60ch; }

@media (min-width: 768px) {
    .hero-landing { padding: 2.5rem 0 4rem; }
    .hero-landing-judul { font-size: 2.4rem; }
}

.kartu-masuk-m {
    background: var(--ui-permukaan);
    color: var(--ui-navy-2);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: var(--m-bayang-lg);
}

.kartu-masuk-m-judul { font-size: 1.35rem; font-weight: 800; margin: 0 0 .25rem; }

@media (min-width: 768px) { .kartu-masuk-m { padding: 2rem; } }

.form-masuk .form-control { font-size: 1rem; min-height: 48px; border-radius: var(--m-radius-sm); }
.form-masuk .btn-lg { min-height: 48px; border-radius: 999px; font-weight: 700; }
.form-masuk .form-label { font-weight: 600; }

.pic-kelas .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }

/* ---- pendaftaran tes (soal/id : kartu Data Diri) -------------------
   Grid dua kolom di >= 768px, satu kolom di ponsel. Medan data-lebar=
   "penuh" membentang dua kolom. Kontrak JS (name, .required, .number,
   #sesi-0, #formDaftar, .btnMulai) tidak disentuh gaya ini. */

.kartu-daftar {
    border: 1px solid var(--ui-garis);
    border-radius: 1rem;
    box-shadow: var(--ui-bayang-lg);
    overflow: hidden;
}

.kartu-daftar-kepala {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1.1rem 1.25rem;
    background: var(--ui-permukaan);
}

.kartu-daftar-ikon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, .1);
    color: var(--ui-aksen);
}

.kartu-daftar .card-title { font-size: 1.15rem; font-weight: 700; }
.kartu-daftar-ket { font-size: .875rem; color: var(--ui-redup); margin-top: .15rem; }
.kartu-daftar .card-body { padding: 1.25rem; }

.daftar-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.medan-daftar[data-lebar="penuh"] { grid-column: 1 / -1; }

@media (min-width: 768px) {
    .kartu-daftar-kepala { padding: 1.25rem 1.75rem; }
    .kartu-daftar .card-body { padding: 1.5rem 1.75rem 1.75rem; }
    .daftar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
}

/* medan : tinggi seragam 3.4rem (16px teks mencegah zoom iOS), label
   mengambang redup, fokus memakai aksen */
.daftar-grid .form-floating > .form-control,
.daftar-grid .form-floating > .form-select {
    min-height: 3.4rem;
    height: 3.4rem;
    font-size: 1rem;
    border-radius: var(--m-radius-sm, .75rem);
    padding-left: .9rem;
}

.daftar-grid .form-floating > label { padding-left: .9rem; color: var(--ui-redup); }
.daftar-grid .form-floating > .form-control:focus,
.daftar-grid .form-floating > .form-select:focus { border-color: var(--ui-aksen); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.daftar-grid .form-floating > .form-control[readonly] { background: #f8fafc; color: var(--ui-redup); }
.daftar-grid .form-floating > textarea.medan-alamat { height: 5.5rem; min-height: 5.5rem; resize: vertical; }

/* medan tanggal : label tetap di atas supaya placeholder dd/mm/yyyy peramban tidak menumpuk */
.daftar-grid .form-floating > input[type="date"] { padding-top: 1.55rem; padding-bottom: .4rem; }
.daftar-grid .form-floating > input[type="date"] ~ label { opacity: .65; transform: scale(.85) translateY(-.5rem) translateX(.15rem); }

.medan-daftar-bantuan { font-size: .78rem; color: var(--ui-redup); margin: .3rem .25rem 0; }

/* kolom yang belum diisi (function.js required()) : tepi merah, bukan hanya latar */
.daftar-grid .form-control.bg-red-lt,
.daftar-grid .form-select.bg-red-lt { border-color: var(--ui-bahaya); background-color: #fef2f2 !important; }

.daftar-aksi {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.daftar-aksi .btnMulai {
    min-height: 3rem;
    width: 100%;
    border-radius: 999px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.daftar-aksi-ket { font-size: .85rem; }

@media (min-width: 576px) {
    .daftar-aksi { flex-direction: row; align-items: center; justify-content: space-between; }
    .daftar-aksi .btnMulai { width: auto; min-width: 12rem; padding-left: 1.5rem; padding-right: 1.25rem; }
}

@media (max-width: 399.98px) {
    .kartu-daftar-kepala, .kartu-daftar .card-body { padding-left: 1rem; padding-right: 1rem; }
}

/* ---- pemutar khusus ----------------------------------------------- */

.pemutar-kartu { margin-bottom: 1rem; }

.pemutar-m {
    position: relative;
    background: #000;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.pemutar-m iframe { border: 0; }

.pemutar-m:fullscreen, .pemutar-m:-webkit-full-screen { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.pemutar-m:fullscreen .ratio, .pemutar-m:-webkit-full-screen .ratio { flex: 0 0 auto; }

.pemutar-lapis {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
    -webkit-touch-callout: none;
}

.pemutar-tirai {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(180deg, rgba(15, 23, 42, .55), rgba(15, 23, 42, .85)), var(--poster);
    background-size: cover;
    background-position: center;
}

.pemutar-tirai-isi { max-width: 32rem; }
.pemutar-tirai-judul { font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; }
.pemutar-tirai-ket { font-size: .85rem; opacity: .85; min-height: 1.2em; margin-bottom: .9rem; }
.pemutar-tirai-tombol { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.pemutar-tirai-cadangan { margin-top: 1rem; font-size: .85rem; }
.pemutar-tirai-cadangan a { color: #fff; text-decoration: underline; }

@media (max-width: 575.98px) {
    .pemutar-tirai-judul { font-size: .95rem; }
    .tombol-m--besar { min-height: 46px; padding: .5rem 1.2rem; font-size: .9rem; }
}

.pemutar-kontrol {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: .25rem .6rem .5rem;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, .85));
    color: #fff;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.pemutar-m.kontrol-tampil .pemutar-kontrol { opacity: 1; transform: none; pointer-events: auto; }
.pemutar-m.cadangan .pemutar-kontrol, .pemutar-m.cadangan .pemutar-lapis { display: none; }

.pemutar-seek {
    width: 100%;
    height: 24px;
    margin: 0;
    accent-color: #ef4444;
    cursor: pointer;
}

.pemutar-kontrol-baris { display: flex; align-items: center; gap: .15rem; }
.pk-spasi { flex: 1 1 auto; }

.pk-tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .5rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
}

.pk-tombol:hover { background: rgba(255, 255, 255, .14); }
.pk-tombol.aktif { color: #fca5a5; }
.pk-waktu { font-size: .8rem; font-variant-numeric: tabular-nums; padding: 0 .4rem; white-space: nowrap; }
.pk-ikon-jeda { display: none; }
.pemutar-m.memutar .pk-ikon-jeda { display: inline; }
.pemutar-m.memutar .pk-ikon-putar { display: none; }

.pemutar-badan { padding: 1rem 1.25rem 1.25rem; }
.pemutar-status { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.pemutar-judul { font-size: 1.25rem; font-weight: 800; margin: 0 0 .5rem; }
.pemutar-deskripsi { color: var(--ui-navy-2); line-height: 1.65; }
.pemutar-nav { display: flex; gap: .5rem; justify-content: space-between; margin-top: 1rem; }
.pemutar-nav .tombol-m { flex: 1 1 0; min-width: 0; }
.pemutar-nav-teks { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 399.98px) { .pemutar-nav { flex-direction: column; } }

.daftar-putar-isi { max-height: 70vh; overflow-y: auto; }

.daftar-putar-butir {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 60px;
    padding: .5rem 1rem;
    border-top: 1px solid var(--m-garis);
    color: var(--ui-navy-2);
    text-decoration: none;
}

.daftar-putar-butir:hover { background: #f8fafc; color: var(--ui-navy-2); text-decoration: none; }
.daftar-putar-butir.aktif { background: var(--m-tint-biru); }
.daftar-putar-thumb { position: relative; flex: 0 0 auto; width: 72px; height: 40px; border-radius: .4rem; overflow: hidden; }
.daftar-putar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.daftar-putar-centang { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--m-hijau); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.daftar-putar-teks { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.daftar-putar-judul { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daftar-putar-butir.selesai .daftar-putar-judul { color: var(--ui-redup); }

/* ---- histori skor -------------------------------------------------- */

.ringkas-skor { display: flex; gap: .75rem; flex-wrap: wrap; }

.ringkas-skor-butir {
    flex: 1 1 100px;
    padding: .6rem .9rem;
    border-radius: var(--m-radius-sm);
    background: var(--m-tint-abu);
}

.ringkas-skor-butir--utama { background: rgba(var(--k-1-rgb, 37, 99, 235), .12); color: var(--k-gelap, var(--ui-aksen)); }
.ringkas-skor-label { font-size: .72rem; color: var(--ui-redup); text-transform: uppercase; letter-spacing: .04em; }
.ringkas-skor-butir--utama .ringkas-skor-label { color: var(--ui-aksen); opacity: .8; }
.ringkas-skor-angka { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }

.tabel-histori { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabel-histori table { min-width: 520px; }
.tabel-histori th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-redup); }

.skor-badge {
    display: inline-block;
    min-width: 3rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-weight: 700;
    background: var(--m-tint-abu);
    color: var(--ui-navy-2);
}

.skor-badge--terbaik { background: rgba(var(--k-1-rgb, 37, 99, 235), .12); color: var(--k-gelap, var(--ui-aksen)); }

/* ---- materi terkunci (jadwal buka masih di depan) ------------------ */
.kartu-materi.terkunci { opacity: .9; }
.kartu-materi.terkunci .sampul { cursor: default; filter: grayscale(.55); }
.kartu-materi.terkunci .sampul--video img { opacity: .55; }
.sampul--terkunci { display: block; position: relative; }

.sampul-kunci {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .6);
    color: #fff;
    backdrop-filter: blur(4px);
}

.meta-kunci { color: var(--ui-redup); font-weight: 600; }
.pil-kunci  { background: var(--m-tint-abu, #e2e8f0); color: var(--ui-navy-2, #1e293b); }
.tombol-terkunci { cursor: not-allowed; }

/* ---- chat AI (migrasi #30) ----------------------------------------
   Gelembung .chat-ai-fab di kanan bawah (di atas .bilah-bawah 1030,
   di bawah .tirai-fullscreen 1050). Panel : layar penuh di < lg,
   kartu 400px di kanan bawah pada >= lg. Warna ikut token --k-* kelas
   dengan cadangan biru. */

.chat-ai-fab {
    position: fixed;
    right: 1rem;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: 1035;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 56px;
    min-width: 56px;
    padding: 0 1.1rem 0 .9rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(var(--k-arah, 135deg), var(--k-1, var(--ui-aksen)) 0%, var(--k-2, #1e3a8a) 100%);
    color: var(--k-teks-hero, #fff);
    font-weight: 700;
    font-size: .95rem;
    box-shadow: 0 8px 24px rgba(var(--k-1-rgb, 37, 99, 235), .35);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.chat-ai-fab:hover, .chat-ai-fab:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--k-1-rgb, 37, 99, 235), .4); color: var(--k-teks-hero, #fff); }
.chat-ai-fab svg { flex: 0 0 auto; }
.chat-ai-fab[aria-expanded="true"] { display: none; }

@media (max-width: 575.98px) {
    .chat-ai-fab { padding: 0; }
    .chat-ai-fab-label { display: none; }
}
@media (min-width: 992px) {
    .chat-ai-fab { right: 1.5rem; bottom: 1.5rem; }
}

.chat-ai-panel {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    background: var(--ui-permukaan, #fff);
    color: var(--ui-huruf, #0f172a);
    overscroll-behavior: contain;
}
.chat-ai-panel[hidden] { display: none; }

@media (max-width: 991.98px) {
    body.chat-ai-terbuka { overflow: hidden; }
}
@media (min-width: 992px) {
    .chat-ai-panel {
        inset: auto 1.5rem 1.5rem auto;
        width: min(400px, calc(100vw - 3rem));
        height: min(600px, calc(100vh - 3rem));
        border-radius: var(--m-radius);
        border: 1px solid var(--m-garis);
        box-shadow: var(--m-bayang-lg);
        overflow: hidden;
    }
}

.chat-ai-kepala {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem .5rem .75rem 1rem;
    padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
    background: linear-gradient(var(--k-arah, 135deg), var(--k-1, var(--ui-aksen)) 0%, var(--k-2, #1e3a8a) 100%);
    color: var(--k-teks-hero, #fff);
    flex: 0 0 auto;
}
.chat-ai-kepala-ikon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}
.chat-ai-kepala-teks { flex: 1 1 auto; min-width: 0; }
.chat-ai-judul { font-weight: 700; line-height: 1.2; }
.chat-ai-sub   { font-size: .78rem; opacity: .88; }
/* indikator jatah hampir habis (mulai batas − 5) : api oranye berdenyut */
.chat-ai-api {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #ffb347;
    animation: chat-ai-api 1.4s ease-in-out infinite;
}
.chat-ai-api[hidden] { display: none; }
@keyframes chat-ai-api {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(255, 179, 71, 0)); }
    50%      { transform: scale(1.15); filter: drop-shadow(0 0 6px rgba(255, 179, 71, .8)); }
}
/* jatah habis : form diredupkan, hanya pesan "Sistem sedang sibuk" */
.chat-ai-habis .chat-ai-form { opacity: .55; }
.chat-ai-habis .chat-ai-input { background: var(--m-tint-abu); cursor: not-allowed; }

.chat-ai-ikon-tombol {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.chat-ai-ikon-tombol:hover, .chat-ai-ikon-tombol:focus-visible { background: rgba(255, 255, 255, .18); color: inherit; }

.chat-ai-pesan {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem;
    background: var(--m-tint-abu);
}

.chat-ai-gelembung {
    max-width: 88%;
    padding: .6rem .85rem;
    border-radius: 16px;
    font-size: .92rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.chat-ai-gelembung--saya { align-self: flex-end; background: var(--k-1, var(--ui-aksen)); color: var(--k-teks-hero, #fff); border-bottom-right-radius: 4px; }
.chat-ai-gelembung--ai   { align-self: flex-start; background: var(--ui-permukaan, #fff); border: 1px solid var(--m-garis); border-bottom-left-radius: 4px; }
.chat-ai-gelembung--sistem { align-self: center; max-width: 95%; background: #fef3c7; color: #92400e; font-size: .82rem; text-align: center; }
/* penolakan luar topik (server mengganti jawaban #LUAR dengan teks baku) */
.chat-ai-gelembung--tolak { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
/* jawaban yang masih mengalir : kursor berkedip di ujung */
.chat-ai-mengalir > :last-child::after { content: "▍"; margin-left: 1px; color: var(--k-1, var(--ui-aksen)); animation: chat-ai-kedip 1s steps(2) infinite; }
@keyframes chat-ai-kedip { 50% { opacity: 0; } }
.chat-ai-cap { margin-top: .25rem; font-size: .7rem; color: var(--ui-redup); }
.chat-ai-gelembung p { margin: 0 0 .5rem; }
.chat-ai-gelembung p:last-child { margin-bottom: 0; }
.chat-ai-gelembung ul, .chat-ai-gelembung ol { margin: .25rem 0 .5rem; padding-left: 1.25rem; }
.chat-ai-gelembung li { margin-bottom: .15rem; }
.chat-ai-gelembung code { font-size: .85em; padding: .05em .3em; border-radius: 4px; background: rgba(15, 23, 42, .06); }
.chat-ai-gelembung pre { margin: .35rem 0; padding: .5rem .6rem; border-radius: 8px; background: rgba(15, 23, 42, .06); font-size: .82em; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-ai-gelembung pre code { padding: 0; background: transparent; }
.chat-ai-gelembung blockquote { margin: .35rem 0; padding: .1rem .6rem; border-left: 3px solid rgba(var(--k-1-rgb, 37, 99, 235), .4); color: var(--ui-redup); }
.chat-ai-gelembung hr { border: 0; border-top: 1px solid var(--m-garis); margin: .5rem 0; }
.chat-ai-gelembung table { width: 100%; border-collapse: collapse; margin: .35rem 0; font-size: .85em; }
.chat-ai-gelembung th, .chat-ai-gelembung td { border: 1px solid var(--m-garis); padding: .2rem .4rem; text-align: left; vertical-align: top; }
.chat-ai-gelembung th { background: var(--m-tint-abu); }
.chat-ai-gelembung ul ul, .chat-ai-gelembung ol ol, .chat-ai-gelembung ul ol, .chat-ai-gelembung ol ul { margin: .15rem 0 .15rem; }
.chat-ai-gelembung a { color: var(--k-gelap, var(--ui-aksen)); text-decoration: underline; }
.chat-ai-gelembung--saya code { background: rgba(255, 255, 255, .22); color: inherit; }

.chat-ai-ketik span {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 2px;
    border-radius: 50%;
    background: var(--ui-redup);
    animation: chat-ai-ketik 1s infinite ease-in-out;
}
.chat-ai-ketik span:nth-child(2) { animation-delay: .15s; }
.chat-ai-ketik span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-ai-ketik {
    0%, 80%, 100% { transform: translateY(0); opacity: .4; }
    40%           { transform: translateY(-4px); opacity: 1; }
}

.chat-ai-catatan {
    flex: 0 0 auto;
    padding: .35rem 1rem;
    border-top: 1px solid var(--m-garis);
    background: var(--ui-permukaan, #fff);
    color: var(--ui-redup);
    font-size: .72rem;
    text-align: center;
}

.chat-ai-form {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--ui-permukaan, #fff);
}
.chat-ai-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    max-height: 120px;
    padding: .6rem .85rem;
    border: 1px solid #dbe2ea;
    border-radius: 14px;
    background: var(--ui-permukaan, #fff);
    color: inherit;
    font-size: 16px;   /* anti-zoom iOS */
    line-height: 1.4;
    resize: none;
}
.chat-ai-input:focus {
    outline: none;
    border-color: var(--k-1, var(--ui-aksen));
    box-shadow: 0 0 0 3px rgba(var(--k-1-rgb, 37, 99, 235), .15);
}
.chat-ai-kirim {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--k-1, var(--ui-aksen));
    color: var(--k-teks-hero, #fff);
    cursor: pointer;
}
.chat-ai-kirim:hover { background: var(--k-gelap, var(--ui-aksen-2)); }
.chat-ai-kirim:disabled { opacity: .5; cursor: default; }