/* =========================================================
   CSS KHUSUS HALAMAN "BKK MENTARI"
   Warna tetap dari variabel :root di muspla-design.css.
   Prefix class "bkk-" biar tidak bentrok dengan halaman lain.
   ========================================================= */

/* ================= HERO ================= */
.bkk-hero{
  position:relative; overflow:hidden; background:var(--blue-deep); color:#fff;
  padding:56px 0 64px;
}
.bkk-hero-blob-1{
  top:-140px; right:-100px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,197,24,.28) 0%, transparent 70%);
}
.bkk-hero-blob-2{
  bottom:-160px; left:-120px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(227,227,245,.14) 0%, transparent 70%);
}
.bkk-hero-wrap{ position:relative; z-index:1; max-width:720px; }
.bkk-eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:var(--yellow); color:var(--blue-deep);
  font-size:12.5px; font-weight:800; padding:7px 16px; border-radius:100px; margin:14px 0 14px;
}
.bkk-hero h1{ font-size:clamp(30px,4vw,46px); font-weight:800; line-height:1.15; }
.bkk-hero-lede{ margin-top:16px; font-size:16px; color:rgba(255,255,255,.78); max-width:580px; line-height:1.7; }

.bkk-hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:rgba(255,255,255,.14); border-radius:var(--radius-md) var(--radius-md) 0 0;
  margin-top:44px; overflow:hidden; transform:translateY(36px); box-shadow:var(--shadow); max-width:620px;
}
.bkk-hero-stat{
  background:var(--white); padding:24px 16px; text-align:center;
  min-width:0; /* penting: biar grid item boleh menyusut, tidak dipaksa lebar oleh teks panjang */
}
.bkk-hero-stat .num{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(20px,2.4vw,28px); font-weight:800; color:var(--blue-deep);
  overflow-wrap:break-word; word-break:break-word; hyphens:auto; line-height:1.15;
}
.bkk-hero-stat .lbl{
  margin-top:4px; font-size:12px; color:var(--ink-soft); font-weight:600;
  overflow-wrap:break-word; word-break:break-word;
}

/* ================= CAKUPAN PENYALURAN (Tentang) ================= */
.bkk-cakupan-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.bkk-cakupan-item{
  display:flex; align-items:center; gap:10px; background:var(--blue-light); color:var(--blue-deep);
  padding:10px 16px; border-radius:100px; font-size:13px; font-weight:700;
}
.bkk-cakupan-item .ic{ display:flex; }

/* ================= FILTER PILL (Alumni & Loker) ================= */
.bkk-filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.bkk-filter-pill{
  border:1.5px solid var(--blue-light); background:var(--white); color:var(--ink-soft);
  font-size:13px; font-weight:700; padding:9px 18px; border-radius:100px; cursor:pointer;
  transition:all .15s ease;
}
.bkk-filter-pill:hover{ border-color:var(--blue); color:var(--blue-deep); }
.bkk-filter-pill.is-active{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }

.bkk-empty{ text-align:center; color:var(--ink-soft); padding:40px 0; font-size:14.5px; }

/* ================= GRID PROFIL ALUMNI ================= */
.bkk-alumni-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:22px;
  justify-content:center;
}
.bkk-alumni-card{
  background:var(--white); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.bkk-alumni-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.bkk-alumni-photo{
  aspect-ratio:4/3.4; background-size:cover; background-position:center;
}
.bkk-alumni-photo svg{ width:32%; height:32%; opacity:.5; }
.bkk-alumni-body{ padding:16px 18px 18px; }
.bkk-alumni-kategori{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  background:var(--yellow-light); color:var(--blue-deep); padding:3px 10px; border-radius:100px; margin-bottom:10px;
}
.bkk-alumni-body h4{ font-size:15px; font-weight:800; color:var(--blue-deep); margin-bottom:6px; }
.bkk-alumni-body p{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; }

/* ================= DAFTAR LOWONGAN KERJA ================= */
.bkk-loker-list{ display:flex; flex-direction:column; gap:16px; }
.bkk-loker-card{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--white); border-radius:var(--radius-md); padding:24px 26px; box-shadow:var(--shadow-sm);
  border-left:4px solid var(--blue-deep);
}
.bkk-loker-logo{
  flex:0 0 auto; width:52px; height:52px; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--white); border:1px solid var(--blue-light); display:flex; align-items:center; justify-content:center;
}
.bkk-loker-logo img{ width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box; }
.bkk-loker-main{ flex:1; min-width:240px; }
.bkk-loker-kategori{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  background:var(--blue-light); color:var(--blue-deep); padding:3px 10px; border-radius:100px; margin-bottom:10px;
}
.bkk-loker-main h4{ font-size:16.5px; font-weight:800; color:var(--blue-deep); margin-bottom:6px; }
.bkk-loker-perusahaan{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:8px;
}
.bkk-loker-main p{ font-size:13px; color:var(--ink-soft); line-height:1.65; margin:0; }
.bkk-loker-main p p{ margin:0 0 6px; }
.bkk-loker-action{ flex-shrink:0; }
.bkk-loker-nolink{ font-size:12.5px; color:var(--ink-soft); font-style:italic; }

/* ================= KONTAK PENANGGUNG JAWAB ================= */
.bkk-kontak-card{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  background:var(--white); border-radius:var(--radius-lg); padding:40px 44px; box-shadow:var(--shadow);
}
.bkk-kontak-info h3{ font-size:24px; font-weight:800; color:var(--blue-deep); margin:8px 0 4px; }
.bkk-kontak-info > p{ font-size:14px; color:var(--ink-soft); margin-bottom:14px; }
.bkk-kontak-nomor{
  display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:800; color:var(--blue-deep);
}
.bkk-kontak-belum{ font-size:12.5px; color:var(--ink-soft); font-style:italic; max-width:360px; }
.bkk-kontak-cta{ flex-shrink:0; }

/* ================= RESPONSIVE ================= */
@media(max-width:980px){
  .bkk-alumni-grid{ grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
  .bkk-hero-stats{ grid-template-columns:repeat(3,1fr); }
  .bkk-kontak-card{ flex-direction:column; align-items:flex-start; text-align:left; }
}
@media(max-width:640px){
  .bkk-hero{ padding-bottom:40px; }
  .bkk-hero-stats{ transform:translateY(24px); }
  /* Kotak statistik tetap 3 kolom tapi mengecil menyesuaikan layar HP:
     padding & font diperkecil supaya angka/label panjang tidak meluber. */
  .bkk-hero-stat{ padding:16px 8px; }
  .bkk-hero-stat .num{ font-size:clamp(15px,4.2vw,22px); }
  .bkk-hero-stat .lbl{ font-size:10.5px; line-height:1.35; }
  /* Mengikuti lebar layar HP: 2 kolom kalau masih muat nyaman, turun ke
     1 kolom di layar sangat sempit supaya kartu tidak jadi kotak tinggi
     dan kurus (lonjong vertikal). */
  .bkk-alumni-grid{ grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:14px; }
  .bkk-alumni-photo{ aspect-ratio:4/3; }
  .bkk-cakupan-row{ flex-direction:column; align-items:flex-start; }
  .bkk-loker-card{ flex-direction:column; align-items:flex-start; }
  .bkk-kontak-card{ padding:28px 24px; }
}
@media(max-width:380px){
  /* Layar HP paling sempit (mis. 360-375px): kolom makin rapat, jadi
     font & padding diperkecil sekali lagi supaya teks placeholder
     panjang seperti "[PERLU DIISI MANUAL]" tetap muat rapi 2 baris
     tanpa keluar dari kotak. */
  .bkk-hero-stat{ padding:14px 6px; }
  .bkk-hero-stat .num{ font-size:clamp(12px,4vw,18px); }
  .bkk-hero-stat .lbl{ font-size:9.5px; }
}
@media(max-width:420px){
  /* Di layar HP paling sempit, satu kolom penuh biar proporsi kartu
     tetap wajar (tidak lonjong) dan otomatis rata tengah. */
  .bkk-alumni-grid{ grid-template-columns:minmax(0,360px); justify-content:center; }
  .bkk-alumni-photo{ aspect-ratio:16/9; }
}