/* =========================================================
   CSS KHUSUS HALAMAN "PROGRAM KEAHLIAN"
   Sama seperti page-profil.css: layout & komponen khusus halaman
   ini, tapi warna tetap ambil dari variabel :root di
   assets/css/muspla-design.css (jangan hardcode kode warna baru).
   Prefix class "pk-" dipakai supaya tidak bentrok dengan class
   halaman lain.
   ========================================================= */

/* ================= HERO ================= */
.pk-hero{
  position:relative; overflow:hidden; background:var(--blue-deep); color:#fff;
  padding:64px 0 64px;
}
.pk-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%);
}
.pk-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%);
}
.pk-hero-wrap{ position:relative; z-index:1; }
.pk-hero-text{ max-width:680px; }
.pk-hero h1{ font-size:clamp(30px,4vw,46px); font-weight:800; line-height:1.15; }
.pk-hero-lede{ margin-top:16px; font-size:16px; color:rgba(255,255,255,.78); max-width:560px; }

/* Kartu statistik yang "menggantung" di batas bawah hero — pola sama
   dengan halaman Profil, supaya identitas antar halaman konsisten. */
.pk-stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:rgba(255,255,255,.14); border-radius:var(--radius-md) var(--radius-md) 0 0;
  margin-top:48px; overflow:hidden; transform:translateY(40px);
  box-shadow:var(--shadow);
}
.pk-stat-card{ background:var(--white); padding:26px 18px; text-align:center; }
.pk-stat-num{ font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(22px,2.6vw,32px); font-weight:800; color:var(--blue-deep); }
.pk-stat-label{ margin-top:4px; font-size:12.5px; color:var(--ink-soft); font-weight:600; }

/* ================= QUICK NAV (loncat antar jurusan) ================= */
.pk-quicknav{
  position:sticky; top:84px; z-index:30; background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--blue-light);
  box-shadow:var(--shadow-sm);
}
.pk-quicknav-wrap{
  display:flex; align-items:center; gap:10px; overflow-x:auto;
  padding:14px 32px; scrollbar-width:thin;
}
.pk-quicknav-wrap::-webkit-scrollbar{ height:5px; }
.pk-quicknav-wrap::-webkit-scrollbar-thumb{ background:var(--blue-light); border-radius:10px; }
.pk-quicknav-pill{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:13.5px; font-weight:700; color:var(--ink); background:var(--cream);
  border:1.5px solid transparent; border-radius:100px; padding:8px 16px 8px 8px;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.pk-quicknav-pill:hover{ border-color:var(--blue); color:var(--blue-deep); background:var(--blue-light); }
.pk-quicknav-pill .kode{
  display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:24px;
  padding:0 8px; border-radius:100px; background:var(--blue-deep); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.02em;
}

/* ================= KENAPA PROGRAM KEAHLIAN (reuses .value-card) ================= */
.pk-why-grid{ grid-template-columns:repeat(4,1fr); }

/* ================= DAFTAR PROGRAM (baris selang-seling gambar/teks) ================= */
/* PENTING SOAL OVERFLOW DI HP: item grid/flex secara default punya
   "min-width:auto", artinya browser TIDAK akan menyusutkannya lebih
   kecil dari lebar konten terlebarnya (mis. teks "Kompetensi yang
   Dipelajari" atau daftar chip) — walau kolomnya sudah diset 1fr/100%.
   Ini penyebab utama kartu foto/teks "membocorkan" lebar ke luar layar
   di HP walau sudah dikasih max-width & margin:auto. Makanya SEMUA
   elemen di rantai flex/grid ini (list -> row -> media/body) wajib
   diberi min-width:0, supaya benar2 bisa menyusut mengikuti layar. */
.pk-jurusan-list{ display:flex; flex-direction:column; gap:56px; min-width:0; }

.pk-jurusan-row{
  display:grid; grid-template-columns:minmax(260px,380px) 1fr; gap:44px; align-items:center;
  scroll-margin-top:150px; /* supaya quick-nav sticky tidak menutupi judul saat di-klik */
  min-width:0; max-width:100%;
}
.pk-jurusan-row.is-reverse{ grid-template-columns:1fr minmax(260px,380px); }
.pk-jurusan-row.is-reverse .pk-jurusan-media{ order:2; }
.pk-jurusan-row.is-reverse .pk-jurusan-body{ order:1; }

.pk-jurusan-media{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
  min-width:0; max-width:100%;
}
.pk-jurusan-media .ph{ aspect-ratio:4/3; width:100%; }
.pk-jurusan-kode{
  position:absolute; top:16px; left:16px; background:var(--yellow); color:var(--blue-deep);
  font-weight:800; font-size:13px; letter-spacing:.03em; padding:6px 14px; border-radius:100px;
  box-shadow:var(--shadow-sm);
}

.pk-jurusan-body{
  background:var(--white); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-sm);
  border:1px solid var(--blue-light); min-width:0; max-width:100%;
}
.pk-jurusan-body h3{ font-size:clamp(20px,2.2vw,26px); font-weight:800; color:var(--blue-deep); margin:10px 0 12px; }
.pk-jurusan-desc{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:24px; }

.pk-jurusan-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:26px; min-width:0; }
.pk-jurusan-col{ min-width:0; }
.pk-jurusan-col h5{
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--blue); margin-bottom:12px;
}
.pk-chip-list{ display:flex; flex-direction:column; gap:9px; }
.pk-chip-list li{
  position:relative; padding-left:22px; font-size:13.5px; color:var(--ink-soft); line-height:1.5;
}
.pk-chip-list li::before{
  content:''; position:absolute; left:0; top:6px; width:9px; height:9px; border-radius:3px;
  background:var(--blue-light); border:1.5px solid var(--blue);
}
.pk-chip-list.alt li::before{ background:var(--yellow-light); border-color:var(--yellow-deep); }

.pk-jurusan-cta{ display:inline-flex; }

/* ================= RESPONSIVE ================= */
@media(max-width:980px){
  .pk-stat-grid{ grid-template-columns:repeat(2,1fr); }
  /* .pk-why-grid ("Kenapa Muspla" / satu standar untuk semua program
     keahlian) sengaja TIDAK di-override di sini, supaya tetap memakai
     mode scroll-horizontal bawaan .value-grid dari muspla-design.css. */
  .pk-jurusan-row,
  .pk-jurusan-row.is-reverse{ grid-template-columns:1fr; }
  .pk-jurusan-row .pk-jurusan-media,
  .pk-jurusan-row.is-reverse .pk-jurusan-media{ order:1; }
  .pk-jurusan-row .pk-jurusan-body,
  .pk-jurusan-row.is-reverse .pk-jurusan-body{ order:2; }
  .pk-jurusan-media .ph{ aspect-ratio:16/9; }
  .pk-quicknav{ top:0; }

  /* Bagian "5 Jalur Keahlian" (foto Praktik + tombol "Selengkapnya"):
     begitu masuk 1 kolom (termasuk tablet/HP landscape), foto & kartu
     teksnya dibuat rata tengah dan lebarnya mengikuti/menyesuaikan
     ukuran layar (pakai clamp, bukan angka tetap), supaya tidak nempel
     ke tepi tapi juga tidak kaku di satu ukuran saja. */
  .pk-jurusan-row{ width:100%; max-width:100%; margin:0 auto; text-align:center; }
  .pk-jurusan-media{
    width:100%; max-width:clamp(280px, 86vw, 460px); margin:0 auto; box-sizing:border-box;
  }
  .pk-jurusan-media .ph{ width:100%; }
  .pk-jurusan-kode{ left:50%; transform:translateX(-50%); }
  .pk-jurusan-body{
    width:100%; max-width:clamp(280px, 86vw, 460px); margin:0 auto; box-sizing:border-box;
    text-align:center;
  }
  .pk-jurusan-body .partner-tag{ margin-left:auto; margin-right:auto; }

  /* Susunan mulai 1 kolom (tablet & HP): foto -> deskripsi -> (Kompetensi
     & Prospek) di-scroll horizontal SATU KARTU PENUH per geser (bukan
     nampilin 2 kartu sempit sekaligus), supaya kartu jurusan tidak jadi
     panjang ke bawah. Lebar kartu = 100% dari area konten .pk-jurusan-body
     (yang sudah punya padding), jadi otomatis ada jarak dari tepi kiri-
     kanan dan tidak mentok ke pinggir. */
  .pk-jurusan-cols{
    display:flex; grid-template-columns:unset; flex-wrap:nowrap;
    overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; gap:0; margin:0 0 22px; padding:2px 0 10px;
  }
  .pk-jurusan-cols::-webkit-scrollbar{ height:5px; }
  .pk-jurusan-cols::-webkit-scrollbar-thumb{ background:var(--blue-light); border-radius:10px; }
  .pk-jurusan-col{
    flex:0 0 100%; width:100%; max-width:100%; scroll-snap-align:start; scroll-snap-stop:always;
    text-align:left; background:var(--blue-light); border-radius:var(--radius-md);
    padding:16px 18px 6px; box-sizing:border-box;
  }

  /* Tombol "Selengkapnya": paksa hug-content + benar2 center (override
     kalau ada CSS tema induk yang bikin tombol jadi lebar penuh dengan
     isi rata kiri), dan bentuknya dibuat lebih ringkas (bukan pil
     penuh 100px) supaya proporsinya tidak "memanjang". */
  .pk-jurusan-cta{
    display:inline-flex !important; width:auto !important; max-width:100%;
    justify-content:center !important; align-items:center !important;
    border-radius:var(--radius-md) !important; font-size:12.5px; padding:0 20px; height:44px;
    white-space:normal; text-align:center; line-height:1.25; gap:6px;
  }
}
@media(max-width:640px){
  .pk-stat-grid{
    grid-template-columns:repeat(auto-fit, minmax(130px,1fr));
    transform:translateY(24px); justify-content:center;
  }
  .pk-hero{ padding-bottom:40px; }
  /* Di lebar HP, foto dibuat rasio 4:3 lagi (lebih pas utk portrait)
     dan padding kartu teks sedikit diperkecil supaya tetap lega. */
  .pk-jurusan-list{ gap:36px; }
  .pk-jurusan-media .ph{ aspect-ratio:4/3; }
  .pk-jurusan-body{ padding:clamp(20px, 6vw, 26px) clamp(16px, 5vw, 22px); }
}
@media(max-width:420px){
  /* Layar HP paling sempit: kartu statistik tetap 1 kolom rata tengah;
     foto & keterangan jalur keahlian ikut menyusut mengikuti lebar
     layar (lewat clamp di atas) sampai nyaris penuh, tapi tetap ada
     jarak dari tepi lewat padding .wrap. */
  .pk-stat-grid{ grid-template-columns:minmax(0,320px); }
  .pk-jurusan-media,
  .pk-jurusan-body{ max-width:100%; }
}