/* patch-2.4.0.css — katalog lomba bersampul, kompetisi saya, daftar ujian, akun lomba,
   portal orang tua/wali, pengumuman, voucher, dan kwitansi. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.t-right { text-align: right; }
[hidden] { display: none !important; }

/* ---------- Kartu kompetisi bersampul ---------- */
.olk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-bottom: 22px; }
.olk-grid-saya { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.olk-grid > div[data-hapus-bila-lepas] { display: flex; }
.olk-grid > div[data-hapus-bila-lepas] > .olk-kartu { flex: 1; }
.olk-kartu { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e9f0; border-radius: 12px;
  overflow: hidden; transition: box-shadow .18s, transform .18s; }
.olk-kartu:hover { box-shadow: 0 8px 22px rgba(20,45,80,.10); transform: translateY(-2px); }
.olk-sampul { position: relative; display: block; aspect-ratio: 16 / 9; background: #0f2a4d; overflow: hidden; }
.olk-sampul img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.olk-kartu:hover .olk-sampul img { transform: scale(1.03); }
.olk-status { position: absolute; left: 10px; bottom: 10px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  letter-spacing: .02em; background: rgba(15,31,46,.78); color: #fff; }
.olk-lingkup { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 4px; background: #1B4F91; color: #fff;
  margin-right: 4px; vertical-align: 1px; letter-spacing: .05em; }
.olk-st-buka { background: #1f8a4c; }
.olk-st-segera { background: #c77a12; }
.olk-st-berlangsung { background: #1B4F91; }
.olk-st-selesai, .olk-st-tutup { background: rgba(60,70,80,.85); }
.olk-simpan-f { position: absolute; top: 8px; right: 8px; margin: 0; z-index: 2; }
.olk-simpan { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); color: #1B4F91; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .12s; }
.olk-simpan svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.olk-simpan.aktif svg path { fill: currentColor; }
.olk-simpan:hover { transform: scale(1.08); }
.olk-simpan:focus-visible { outline: 3px solid #f4b400; outline-offset: 2px; }
.olk-isi { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.olk-isi h3 { margin: 0; font-size: 16px; line-height: 1.35; }
.olk-isi h3 a { color: inherit; text-decoration: none; }
.olk-isi h3 a:hover { color: #1B4F91; }
.olk-penyelenggara { margin: 0; font-size: 12px; color: #6b7a86; text-transform: uppercase; letter-spacing: .04em; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.olk-bidang { display: flex; flex-wrap: wrap; gap: 5px; }
.olk-bidang span { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: #eaf1fb; color: #1B4F91; font-weight: 600; }
.olk-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.olk-info li { display: flex; justify-content: space-between; gap: 10px; }
.olk-info span { color: #6b7a86; white-space: nowrap; }
.olk-info b { text-align: right; font-weight: 600; }
.olk-mepet { color: #b3261e; }
.olk-aksi { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.olk-kartu-datar .olk-isi { gap: 6px; }

/* ---------- Beranda peserta ---------- */
.olk-sambut { background: linear-gradient(120deg, #123a6d 0%, #1B4F91 55%, #2d6cc0 100%); }
.olk-ringkas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.olk-angka { background: #fff; border: 1px solid #e3e9f0; border-radius: 12px; padding: 14px 16px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 2px; transition: border-color .15s; }
.olk-angka:hover { border-color: #1B4F91; }
.olk-angka b { font-size: 26px; color: #1B4F91; line-height: 1.1; }
.olk-angka span { font-size: 12.5px; color: #6b7a86; }
@media (max-width: 760px) { .olk-ringkas { grid-template-columns: repeat(2, 1fr); } }
.olk-lengkap-atas { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.olk-lengkap-atas p { margin: 4px 0 0; }
.olk-lengkap-aksi { display: flex; gap: 8px; flex-wrap: wrap; }
.olk-bilah { height: 10px; border-radius: 999px; background: #edf1f6; overflow: hidden; margin: 10px 0 6px; }
.olk-bilah span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2d6cc0, #1f8a4c); }
.olk-judul-baris { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.olk-judul-baris a { font-size: 13.5px; }
.olk-ujian-aktif { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.olk-ujian-baris { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e3e9f0; border-left: 4px solid #1f8a4c;
  border-radius: 10px; padding: 10px 14px; flex-wrap: wrap; }
.olk-ujian-baris .grow { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.olk-berita-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 20px; }
.olk-berita { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #e3e9f0; border-radius: 10px; padding: 12px 14px;
  text-decoration: none; color: inherit; }
.olk-berita:hover { border-color: #1B4F91; }
.olk-berita-jenis { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.olk-bj-berita { background: #eaf1fb; color: #1B4F91; }
.olk-bj-acara { background: #fdf0dc; color: #9a5b00; }

/* ---------- Saringan katalog ---------- */
.olk-saring { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px; margin-bottom: 10px; }
.olk-saring select, .olk-ujian-alat select { width: auto; min-width: 150px; flex: 0 1 auto; }
.olk-saring .btn { flex: none; }
.olk-cari { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.olk-cari svg { position: absolute; left: 10px; color: #8795a1; pointer-events: none; }
.olk-cari input { width: 100%; padding-left: 34px; }
.olk-bidang-pintas { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.olk-bidang-pintas a { font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid #cfd8e2; text-decoration: none; color: inherit; background: #fff; }
.olk-bidang-pintas a:hover { border-color: #1B4F91; color: #1B4F91; }
.olk-bidang-pintas a.aktif { background: #1B4F91; border-color: #1B4F91; color: #fff; }
.olk-tab { display: flex; gap: 4px; border-bottom: 1px solid #dfe5ec; margin-bottom: 16px; flex-wrap: wrap; }
.olk-tab a { padding: 9px 14px; text-decoration: none; color: #54646f; border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 600; }
.olk-tab a span { font-size: 11.5px; background: #edf1f6; color: #54646f; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.olk-tab a.aktif { color: #1B4F91; border-bottom-color: #1B4F91; }
.olk-tab a.aktif span { background: #1B4F91; color: #fff; }

/* ---------- Daftar ujian lomba ---------- */
.olk-kartu-peserta .panel-body { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.olk-kartu-peserta dl { flex: 1; min-width: 240px; }
.olk-kartu-peserta-cat { flex-basis: 100%; margin: 0; }
.olk-avatar { width: 58px; height: 58px; border-radius: 50%; background: #1B4F91; color: #fff; font-size: 24px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.olk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.olk-ujian-alat { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 8px; }
.olk-ujian-alat .check { white-space: nowrap; }
.olk-chip-status { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.olk-chip-status button { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid #cfd8e2; background: #fff; cursor: pointer; }
.olk-chip-status button span { color: #6b7a86; font-size: 11.5px; }
.olk-chip-status button.aktif { background: #1B4F91; border-color: #1B4F91; color: #fff; }
.olk-chip-status button.aktif span { color: rgba(255,255,255,.8); }
.olk-ujian-daftar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.olk-ujian { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid #e3e9f0; border-radius: 12px; padding: 12px; }
.olk-ujian-sampul { width: 160px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 8px; flex: none; }
.olk-ujian-isi { flex: 1; min-width: 0; }
.olk-ujian-kepala { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.olk-ujian-kepala h3 { margin: 0 0 6px; font-size: 15.5px; }
.olk-ujian-rinci { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; }
.olk-ujian-rinci span { color: #6b7a86; margin-right: 5px; }
.olk-ujian-aksi { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; min-width: 150px; text-align: right; }
.olk-ujst { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: #edf1f6; color: #54646f; }
.olk-ujst-dibuka { background: #e3f4ea; color: #16713d; }
.olk-ujst-ruang { background: #fdf0dc; color: #9a5b00; }
.olk-ujst-dikerjakan { background: #eaf1fb; color: #1B4F91; }
.olk-ujst-selesai { background: #edf1f6; color: #3d4b56; }
.olk-ujst-terlambat { background: #fbe7e6; color: #a32a22; }
@media (max-width: 720px) {
  .olk-ujian { flex-direction: column; align-items: stretch; }
  .olk-ujian-sampul { width: 100%; }
  .olk-ujian-aksi { align-items: stretch; text-align: left; }
}

/* ---------- Profil, dokumen, keluarga, voucher ---------- */
.olk-foto-profil { display: flex; gap: 14px; align-items: center; }
.olk-foto-profil .olk-avatar { width: 72px; height: 72px; font-size: 28px; }
.olk-minat { display: flex; flex-wrap: wrap; gap: 6px; }
.olk-subjudul { margin: 6px 0 0; font-size: 14px; color: #3d4b56; }
.olk-dok-cek { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.olk-dok-cek li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: #f7f9fc; }
.olk-dok-cek .grow { flex: 1; }
.olk-dok-tanda { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cfd8e2; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex: none; }
.ada-diterima .olk-dok-tanda { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
.ada-menunggu .olk-dok-tanda { background: #fdf0dc; border-color: #e0a54a; color: #9a5b00; }
.ada-ditolak .olk-dok-tanda { background: #fbe7e6; border-color: #d9534f; color: #a32a22; }
.olk-aksi-baris form { display: inline-flex; gap: 6px; }
.olk-pin-tampil b { font-size: 24px; letter-spacing: .3em; margin: 0 8px; }
.olk-pin { font-size: 22px; letter-spacing: .4em; text-align: center; max-width: 220px; font-variant-numeric: tabular-nums; }
.olk-baris { display: flex; gap: 8px; flex-wrap: wrap; }
.olk-baris input { flex: 1 1 200px; }
.olk-voucher .panel-body { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
.olk-voucher-saldo { display: flex; flex-direction: column; gap: 2px; min-width: 220px; }
.olk-voucher-saldo b { font-size: 28px; color: #1f8a4c; }
.olk-voucher-form { flex: 1 1 320px; }
.olk-voucher-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.olk-redup td { opacity: .55; }
.olk-rincian { display: flex; justify-content: space-between; font-size: 13.5px; color: #54646f; margin-top: 4px; }

/* ---------- Pengumuman & pencapaian ---------- */
.olk-pengumuman { display: flex; flex-direction: column; gap: 12px; }
.olk-peng h2 { margin: 6px 0; font-size: 18px; }
.olk-peng-kepala { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.olk-peng-isi { line-height: 1.65; }
.olk-peng-waktu { background: #fdf6ea; border-left: 3px solid #e0a54a; padding: 6px 10px; border-radius: 0 6px 6px 0; }
.olk-peng:target { box-shadow: 0 0 0 3px rgba(27,79,145,.35); }
.olk-capai { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.olk-capai-kartu { display: flex; gap: 14px; background: #fff; border: 1px solid #e3e9f0; border-radius: 12px; padding: 14px; color: #5B6B78; }
.olk-capai-ikon { flex: none; width: 56px; height: 56px; border-radius: 14px; background: currentColor; display: flex; align-items: center; justify-content: center; }
.olk-capai-ikon svg { color: #fff; }
.olk-capai-ikon svg circle, .olk-capai-ikon svg path:first-child { fill: rgba(255,255,255,.35); }
.olk-capai-isi { color: #1d2b36; flex: 1; min-width: 0; }
.olk-capai-isi h3 { margin: 2px 0 4px; font-size: 15px; }
.olk-capai-isi p { margin: 0; }
.olk-m-emas { color: #C9A227; border-color: #ecd98c; background: linear-gradient(180deg, #fffaf0, #fff); }
.olk-m-perak { color: #8E9AA6; }
.olk-m-perunggu { color: #B06A3B; }
.olk-m-harapan { color: #2E7D6B; }

/* ---------- Ruang tunggu: token ---------- */
.olk-token { margin-top: 12px; padding: 12px; border: 1px dashed #b9c6d4; border-radius: 10px; background: #f7f9fc; }
.olk-token label { font-weight: 700; display: block; margin-bottom: 6px; }
.olk-token input { font-size: 18px; letter-spacing: .25em; max-width: 220px; }
.olk-token-ok { color: #1f8a4c; font-weight: 700; margin: 8px 0 4px; }

/* ---------- Pendaftaran & halaman publik ---------- */
.olk-sampul-lebar { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px 10px 0 0; }
.olk-sampul-hero { display: block; width: 100%; max-height: 360px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; margin: 6px 0 14px; }
.olk-lalu img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 8px; filter: saturate(.75); }

/* ---------- Pengelola ---------- */
.olk-sel-sampul { display: flex; gap: 10px; align-items: center; }
.olk-sel-sampul img { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; flex: none; }
.olk-admin-atas { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.olk-admin-sampul { width: 320px; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.olk-admin-info { flex: 1; min-width: 260px; display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.olk-admin-info dl { flex: 1 1 260px; }
.olk-token-admin { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #e3e9f0; border-radius: 10px; padding: 12px 14px; min-width: 200px; }
.olk-token-besar { font-size: 28px; letter-spacing: .25em; color: #1B4F91; font-family: ui-monospace, Menlo, Consolas, monospace; }
.olk-pilih-sampul { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.olk-pilih-sampul label { position: relative; display: flex; flex-direction: column; gap: 3px; cursor: pointer; font-size: 12px; }
.olk-pilih-sampul input { position: absolute; opacity: 0; }
.olk-pilih-sampul img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 3px solid transparent; }
.olk-pilih-sampul input:checked + img { border-color: #1B4F91; box-shadow: 0 0 0 2px rgba(27,79,145,.25); }
.olk-pilih-sampul input:focus-visible + img { outline: 3px solid #f4b400; }
.olk-unggah-sampul { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.olk-unggah-sampul > img { width: 240px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.olk-unggah-sampul > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.olk-daftar-admin { list-style: none; margin: 0; padding: 0; }
.olk-daftar-admin li { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-top: 1px solid #edf1f6; }
.olk-daftar-admin li:first-child { border-top: 0; }
.olk-daftar-admin .grow { flex: 1; min-width: 0; }
.olk-daftar-admin form { margin: 0; }
.olk-kode-baru textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; }
.olk-periksa { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.olk-periksa input { min-width: 160px; font-size: 12.5px; }

/* ---------- Portal orang tua/wali ---------- */
.olk-anak-kepala { display: flex; gap: 12px; align-items: center; }
.olk-anak-kepala h3 { margin: 0; }
.olk-dalam { padding: 14px; margin: 0; }
.olk-tagihan-wali { border-top: 1px solid #edf1f6; }
.olk-tagihan-atas { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.olk-tagihan-nilai { display: flex; gap: 8px; align-items: center; }
.olk-tagihan-nilai b { font-size: 18px; color: #1B4F91; }
.olk-bayar-wali { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; align-items: flex-start; }
.olk-bayar-wali img { border: 1px solid #e3e9f0; border-radius: 8px; }
.olk-bayar-wali form { flex: 1; min-width: 240px; }
.olk-token .olk-baris { justify-content: center; }
.olk-token input::placeholder, .olk-pin::placeholder { letter-spacing: normal; font-size: 14px; }
form > .olim-form-grid { grid-auto-flow: dense; }