/* SMK Darul Mukminin — BKK dan data lulusan (halaman /bkk dan ringkasan di Beranda).
   Warna mengikuti biru.css; semua isi diisi admin, tidak ada angka contoh. */

/* ---------- Warna kategori (cukup kontras di atas putih; arti juga ditulis sebagai teks, bukan hanya warna) ---------- */
.bkk-sg-bekerja { --sg: #1e4d7b; }
.bkk-sg-wirausaha { --sg: #2b7a78; }
.bkk-sg-kuliah { --sg: #8a5a00; }
.bkk-sg-mencari { --sg: #7a3b3b; }
.bkk-sg-belum { --sg: #8896a3; }

/* ---------- Angka besar ---------- */
.bkk-besar { display: flex; flex-direction: column; gap: 4px; }
.bkk-besar-label { font-weight: 600; color: var(--biru-muda, #3a7ab5); letter-spacing: .02em; }
.bkk-besar-angka { font-family: Literata, Georgia, serif; font-size: clamp(3rem, 14vw, 5rem); line-height: 1; color: var(--biru-tua, #143554); }
.bkk-besar-ket { color: var(--teks-redup, #4c5f70); max-width: 34ch; }

/* ---------- Halaman /bkk: kartu angkatan terbaru ---------- */
.bkk-lulusan-atas { display: grid; gap: 28px; padding: clamp(20px, 4vw, 32px); background: #fff; border: var(--bu-garis, 1px solid rgba(20,53,84,.14)); border-radius: 18px; box-shadow: var(--bu-bayang, none); }
.bkk-sebaran { display: flex; flex-direction: column; gap: 16px; justify-content: center; min-width: 0; }
.bkk-bilah { display: flex; width: 100%; height: 22px; border-radius: 999px; overflow: hidden; background: #e8f1f8; }
.bkk-bagian { display: block; height: 100%; background: var(--sg, #1e4d7b); min-width: 3px; }
.bkk-bagian + .bkk-bagian { border-left: 2px solid #fff; }
.bkk-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bkk-legenda-butir { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--teks, #10202e); }
.bkk-titik { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--sg, #1e4d7b); align-self: center; }
.bkk-legenda-label { min-width: 7.5em; }
.bkk-legenda-persen { color: var(--teks-redup, #4c5f70); }

/* ---------- Tabel semua angkatan ---------- */
.bkk-tabel-bungkus { margin-top: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--bu-garis, 1px solid rgba(20,53,84,.14)); border-radius: 14px; background: #fff; }
.bkk-tabel { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; }
.bkk-tabel caption { text-align: left; padding: 12px 14px; font-weight: 600; color: var(--biru-tua, #143554); }
.bkk-tabel th, .bkk-tabel td { padding: 10px 14px; text-align: right; border-top: 1px solid rgba(20,53,84,.1); white-space: nowrap; }
.bkk-tabel thead th { background: var(--biru-soft, #e8f1f8); color: var(--biru-tua, #143554); font-weight: 600; }
.bkk-tabel th[scope="row"], .bkk-tabel thead th:first-child { text-align: left; }
.bkk-tabel-sorot { font-weight: 700; color: var(--biru-tua, #143554); }
.bkk-sumber { margin-top: 14px; font-size: .9rem; color: var(--teks-redup, #4c5f70); }

/* ---------- Ringkasan di Beranda ---------- */
.bkk-ringkas-kartu { display: grid; gap: 24px; align-items: center; padding: clamp(20px, 4vw, 32px); background: #fff; border: var(--bu-garis, 1px solid rgba(20,53,84,.14)); border-radius: 18px; box-shadow: var(--bu-bayang, none); }
.bkk-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bkk-mini-butir { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 12px; background: var(--biru-pucat, #f4f8fc); border-left: 4px solid var(--sg, #1e4d7b); }
.bkk-mini-butir strong { font-size: 1.5rem; line-height: 1.1; color: var(--biru-tua, #143554); }
.bkk-mini-butir span { color: var(--teks-redup, #4c5f70); font-size: .92rem; }

/* ---------- Rincian per jurusan ---------- */
.bkk-jurusan { margin-top: 32px; }
.bkk-jurusan-judul { margin: 0 0 14px; color: var(--biru-tua, #143554); font-size: 1.3rem; }
.bkk-jurusan-blok { margin-top: 18px; min-width: 0; }
.bkk-jurusan-tahun { margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; color: var(--biru-tua, #143554); }
details.bkk-jurusan-blok { padding: 12px 16px; background: #fff; border: var(--bu-garis, 1px solid rgba(20,53,84,.14)); border-radius: 14px; }
details.bkk-jurusan-blok > summary { cursor: pointer; margin: 0; }
details.bkk-jurusan-blok[open] > summary { margin-bottom: 12px; }
.bkk-jurusan-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.bkk-jurusan-kartu { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: #fff; border: var(--bu-garis, 1px solid rgba(20,53,84,.14)); border-radius: 16px; box-shadow: var(--bu-bayang, none); min-width: 0; }
.bkk-jurusan-kepala { display: flex; flex-direction: column; gap: 2px; }
.bkk-jurusan-nama { margin: 0; font-family: Literata, Georgia, serif; font-size: 1.25rem; color: var(--biru-tua, #143554); overflow-wrap: anywhere; }
.bkk-jurusan-lengkap { color: var(--teks-redup, #4c5f70); font-size: .9rem; overflow-wrap: anywhere; }
.bkk-jurusan-angka { margin: 0; color: var(--teks-redup, #4c5f70); }
.bkk-jurusan-angka strong { font-family: Literata, Georgia, serif; font-size: 2rem; line-height: 1; color: var(--biru-tua, #143554); }
.bkk-bilah-kecil { height: 14px; }
.bkk-jurusan-rinci { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bkk-jurusan-butir { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .95rem; color: var(--teks, #10202e); }
.bkk-jurusan-label { min-width: 6.5em; }
@media (min-width: 720px) { .bkk-jurusan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .bkk-jurusan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Kisah lulusan ---------- */
.bkk-alumni-grid, .bkk-lowongan-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.bkk-alumni { display: flex; gap: 14px; padding: 18px; background: #fff; border: var(--bu-garis, 1px solid rgba(20,53,84,.14)); border-radius: 16px; box-shadow: var(--bu-bayang, none); }
.bkk-alumni-foto, .bkk-lowongan-logo { flex: none; display: grid; place-items: center; overflow: hidden; background: var(--biru-soft, #e8f1f8); color: var(--biru-tua, #143554); }
.bkk-alumni-foto { width: 64px; height: 64px; border-radius: 50%; }
.bkk-alumni-foto img, .bkk-lowongan-logo img { width: 100%; height: 100%; object-fit: cover; }
.bkk-lowongan-logo img { object-fit: contain; padding: 6px; background: #fff; }
.bkk-inisial { font-weight: 700; font-size: 1.15rem; }
.bkk-alumni-isi { min-width: 0; }
.bkk-alumni-isi h3 { margin: 0; color: var(--biru-tua, #143554); font-size: 1.1rem; }
.bkk-alumni-sub { margin: 2px 0 0; color: var(--teks-redup, #4c5f70); font-size: .92rem; }
.bkk-alumni-kerja { margin: 8px 0 0; font-weight: 600; color: var(--teks, #10202e); overflow-wrap: anywhere; }
.bkk-alumni-cerita { margin: 10px 0 0; padding: 0 0 0 12px; border-left: 3px solid var(--biru-muda, #3a7ab5); color: var(--teks, #10202e); }

/* ---------- Lowongan ---------- */
.bkk-lowongan { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #fff; border: var(--bu-garis, 1px solid rgba(20,53,84,.14)); border-radius: 16px; box-shadow: var(--bu-bayang, none); min-width: 0; }
.bkk-lowongan-kepala { display: flex; gap: 14px; align-items: center; }
.bkk-lowongan-logo { width: 56px; height: 56px; border-radius: 12px; border: 1px solid rgba(20,53,84,.12); }
.bkk-lowongan-judul { min-width: 0; }
.bkk-lowongan-judul h3 { margin: 0; color: var(--biru-tua, #143554); font-size: 1.1rem; overflow-wrap: anywhere; }
.bkk-lowongan-pt { margin: 2px 0 0; color: var(--teks-redup, #4c5f70); overflow-wrap: anywhere; }
.bkk-chip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bkk-chip li { padding: 4px 10px; border-radius: 999px; background: var(--biru-soft, #e8f1f8); color: var(--biru-tua, #143554); font-size: .86rem; font-weight: 600; }
.bkk-lowongan-desk, .bkk-cara { margin: 0; color: var(--teks, #10202e); overflow-wrap: anywhere; }
.bkk-lowongan-sub { margin: 4px 0 0; font-size: .95rem; color: var(--biru-tua, #143554); }
.bkk-batas { margin: 0; font-weight: 600; color: var(--teks, #10202e); }
.bkk-batas.segera { color: #8a3b00; }
.bkk-lamar { align-self: flex-start; margin-top: 4px; }
.bkk-lowongan-kosong { padding: 18px; background: #fff; border: 1px dashed rgba(20,53,84,.3); border-radius: 14px; color: var(--teks-redup, #4c5f70); }

/* ---------- Profil BKK dan kontak ---------- */
.bkk-pengantar { max-width: 70ch; margin-bottom: 22px; }
.bkk-pengantar p { margin: 0 0 12px; }
.bkk-kolom { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.bkk-blok { padding: 20px; background: #fff; border: var(--bu-garis, 1px solid rgba(20,53,84,.14)); border-radius: 16px; box-shadow: var(--bu-bayang, none); min-width: 0; }
.bkk-blok h3 { margin: 0 0 12px; color: var(--biru-tua, #143554); }
.bkk-daftar-centang { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bkk-daftar-centang li { position: relative; padding-left: 26px; overflow-wrap: anywhere; }
.bkk-daftar-centang li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e4d7b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.bkk-langkah { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.bkk-langkah li { padding-left: 4px; overflow-wrap: anywhere; }
.bkk-kontak-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bkk-kontak-daftar li { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.bkk-kontak-label { font-size: .85rem; color: var(--teks-redup, #4c5f70); }
.bkk-kontak-daftar a { color: var(--biru, #1e4d7b); font-weight: 600; }

/* ---------- Layar lebar ---------- */
@media (min-width: 720px) {
  .bkk-lulusan-atas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .bkk-ringkas-kartu { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .bkk-alumni-grid, .bkk-lowongan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bkk-kolom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .bkk-alumni-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bkk-kolom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media print { .bkk-lamar { display: none; } }