/* =========================================================
   CSS KHUSUS HALAMAN "PENGUMUMAN KELULUSAN"
   Sama seperti page-kesiswaan.css: layout & komponen khusus halaman ini,
   warna tetap ambil dari variabel :root di assets/css/muspla-design.css.
   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 56px;
}
.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:-170px; left:-120px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(227,227,245,.14) 0%, transparent 70%);
}
.pk-hero-top{ position:relative; z-index:1; max-width:680px; margin-bottom:36px; }
.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:580px; }

/* Slider hero di halaman ini dipasang agak lebih pendek & dengan sudut
   melengkung penuh (beda dari slider homepage yang edge-to-edge), supaya
   tetap rapi di dalam .wrap seperti komponen lain di halaman internal. */
.pk-slider-shell{
  position:relative; z-index:1; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow);
}
.pk-slider-shell .hero-slider{ height:340px; }
.pk-slider-shell .hero-slide{ height:100%; }
.pk-slider-shell .ph{ height:100%; }

/* ================= UCAPAN SELAMAT ================= */
.pk-ucapan{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center; }
.pk-ucapan-photo{ position:relative; }
.pk-ucapan-photo .ph{ height:380px; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.pk-ucapan-photo .ring{
  position:absolute; inset:-14px; border:2px dashed var(--yellow); border-radius:calc(var(--radius-lg) + 14px);
  z-index:-1;
}
.pk-ucapan-text h3{ font-size:26px; font-weight:800; color:var(--blue-deep); margin-bottom:16px; }
.pk-ucapan-text p{ color:var(--ink-soft); font-size:15px; margin-bottom:14px; }

/* ================= KARTU PILIH ANGKATAN + CTA ================= */
.pk-cta-card{
  position:relative; overflow:hidden; background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:48px 44px; max-width:880px; margin:0 auto;
  border:1px solid rgba(0,0,61,.06);
}
.pk-cta-top{ text-align:center; max-width:560px; margin:0 auto 30px; }
.pk-cta-top h2{ font-size:clamp(24px,2.8vw,32px); font-weight:800; color:var(--blue-deep); margin-top:12px; }
.pk-cta-top p{ color:var(--ink-soft); font-size:14.5px; margin-top:10px; }

/* Pill pilihan angkatan */
.pk-angkatan-pills{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:34px;
}
.pk-pill{
  font-family:'Inter',sans-serif; font-weight:700; font-size:14.5px; color:var(--blue);
  background:var(--blue-light); border:2px solid transparent; border-radius:100px;
  padding:11px 26px; cursor:pointer; transition:all .18s ease;
}
.pk-pill:hover{ border-color:var(--blue); }
.pk-pill.is-active{
  background:var(--blue-deep); color:#fff; box-shadow:var(--shadow-sm);
}

/* Kotak tombol + info login */
.pk-cta-box{
  display:flex; flex-direction:column; align-items:center; gap:26px;
  padding-top:8px; border-top:1px solid rgba(0,0,61,.08);
}
.pk-cta-button{
  display:inline-flex; align-items:center; gap:10px; font-size:15.5px; padding:0 30px;
  height:56px; border-radius:100px !important;
}
.pk-cta-button #pk-cta-tahun,
.pk-cta-button span#pk-cta-tahun{
  font-weight:600; font-size:13px; background:rgba(255,255,255,.18); border-radius:100px;
  padding:4px 12px; margin-left:2px;
}

.pk-login-info{
  width:100%; max-width:420px; background:var(--cream); border-radius:var(--radius-md);
  padding:20px 24px; border:1px solid rgba(0,0,61,.06);
}
.pk-login-row{
  display:flex; align-items:center; justify-content:space-between; padding:7px 0;
}
.pk-login-row + .pk-login-row{ border-top:1px dashed rgba(0,0,61,.12); }
.pk-login-key{ font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.pk-login-val{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:14px; color:var(--blue-deep);
  background:var(--yellow-light); border:1.5px solid var(--yellow-deep); border-radius:8px;
  padding:2px 12px;
}
.pk-login-note{
  margin-top:12px; font-size:12.5px; color:var(--ink-soft); line-height:1.5; text-align:center;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  .pk-ucapan{ grid-template-columns:1fr; gap:36px; }
  .pk-ucapan-photo .ph{ height:280px; }
  .pk-cta-card{ padding:36px 22px; }
}
@media (max-width: 640px){
  .pk-ucapan-photo .ph{ height:220px; }
  .pk-slider-shell .hero-slider{ height:220px; }
  /* Tombol dibuat full-width & dibatasi max-width:100% supaya tidak
     "menghitung lebar" dari isi yang belum dibungkus (ikon + teks +
     label tahun sebaris) lalu meluber ke luar layar. Dengan width:100%
     browser dipaksa membatasi lebarnya ke lebar layar dulu, baru
     flex-wrap membungkus isinya ke baris berikutnya kalau perlu. */
  /* Tombol dibuat full-width & dibatasi max-width:100% supaya tidak
     "menghitung lebar" dari isi yang belum dibungkus (ikon + teks +
     label tahun sebaris) lalu meluber ke luar layar. Dengan width:100%
     browser dipaksa membatasi lebarnya ke lebar layar dulu, baru
     flex-wrap membungkus isinya ke baris berikutnya kalau perlu.
     !important dipakai supaya pasti menang lawan aturan ".btn" umum
     (display:inline-flex, height:44px) yang juga berlaku di halaman ini. */
  .pk-cta-box .pk-cta-button,
  a.pk-cta-button{
    display:flex !important; flex-wrap:wrap !important; justify-content:center !important;
    align-items:center !important; width:100% !important; max-width:100% !important;
    box-sizing:border-box !important; height:auto !important; min-height:0 !important;
    padding:10px 16px !important; text-align:center !important;
    white-space:normal !important; word-break:break-word !important;
    font-size:12.5px !important; line-height:1.3 !important; gap:4px !important;
  }
  .pk-cta-box .pk-cta-button svg,
  a.pk-cta-button svg{ width:14px !important; height:14px !important; flex-shrink:0; }
  .pk-cta-box .pk-cta-button #pk-cta-tahun,
  a.pk-cta-button #pk-cta-tahun{
    margin-left:0 !important; margin-top:0 !important; font-size:10px !important; padding:2px 9px !important;
  }
}