/* ===== Program Keahlian ===== */

.prog-hero{
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1.4fr .9fr; gap:18px; padding:18px; align-items:center; margin:18px 0 10px;
}
.prog-hero .hero-text h1{ margin:0 0 6px; font-size:28px; }
.prog-hero .hero-text p{ margin:0; color:#44546b; }
.prog-hero img{ width:100%; height:220px; object-fit:cover; border-radius:10px; }

.prog-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin:12px 0 6px;
}
.prog-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.prog-card .thumb{ height:140px; background:#eef4fb center/cover no-repeat; }
.prog-card .pad{ padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.prog-card .title{ margin:0; font-size:18px; }
.prog-card .desc{ margin:0; color:#334057; min-height:48px; }
.btn-primary{
  display:inline-block; background:#2f76ff; color:#fff; padding:10px 12px; border-radius:10px; text-decoration:none; font-weight:700;
}
.btn-primary:hover{ background:#1e63ec; }
.btn-outline{
  display:inline-block; background:#fff; color:#1f2a44; border:1px solid var(--line); padding:8px 10px; border-radius:10px; text-decoration:none; font-weight:600;
}
.btn-outline:hover{ border-color:#cbd8ee; }

/* Detail section */
.prog-detail{ margin:26px 0 18px; }
.prog-detail .detail-head{ display:flex; gap:16px; align-items:center; }
.prog-detail .avatar{ width:160px; height:120px; border-radius:12px; background:#eef4fb center/cover no-repeat; border:1px solid var(--line); }
.prog-detail h2{ margin:0 0 6px; }
.prog-detail .lead{ margin:0 0 6px; color:#44546b; }

.detail-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:14px; margin-top:10px;
}
.detail-grid .box{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; box-shadow:var(--shadow);
}
.detail-grid .box h3{ margin:0 0 8px; }
.detail-grid .box ul{ margin:0; padding-left:18px; }

.backtop{ margin-top:8px; }
.backtop a{ color:#2f76ff; text-decoration:none; }
.backtop a:hover{ text-decoration:underline; }

.ppdb-cta{
  background:#0b1b3a; color:#d7e6ff; border-radius:14px; padding:18px; text-align:center; margin:24px 0 8px;
}
.ppdb-cta .btn-primary{ margin-top:8px; }

@media (max-width: 900px){
  .prog-hero{ grid-template-columns:1fr; }
  .prog-hero img{ height:180px; }
  .prog-detail .detail-head{ flex-direction:column; align-items:flex-start; }
  .prog-detail .avatar{ width:100%; height:180px; }
}