/* =============================================================
   << GLOBAL STYLES >>    (Berlaku untuk SEMUA halaman)
================================================================*/
h1 {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 30px;
}

.accordion {
  background-color: #002147;          /* navy */
  color: #fff;
  padding: 18px;
  margin: 12px 0 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease;
}

/* Hover & aktif — biru branding */
.accordion:hover,
.accordion.active {
  background-color: #004aad;          /* biru */
  color: #ffffff;
}

.panel {
  padding: 0 18px;
  background: #ffffff;
  display: none;
  overflow: hidden;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 8px 8px;
  margin-bottom: 15px;
}

.panel ul { list-style: disc; margin-left: 20px; padding-bottom: 15px; color: #333; }
.panel li { margin-bottom: 8px; }

/* =============================================================
   << HALAMAN  PROSEDUR  >>   (Spesifik jika suatu saat diperlukan)
================================================================*/
#prosedur-pendaftaran {
  font-family: 'Poppins', sans-serif;
  background-color: #f4f6fb;
  padding: 40px 20px;
  color: #002147;
}

/* =============================================================
   << HALAMAN  PERSYARATAN >> (Spesifik jika suatu saat diperlukan)
================================================================*/
#persyaratan-pendaftaran {
  font-family: 'Poppins', sans-serif;
  background-color: #f4f6fb;
  padding: 40px 20px;
  color: #002147;
}

/* =============================================================
   << FLIP BOOK RENSTRA
================================================================*/
/* === Publuu Flipbook styling === */
#renstra-sps iframe:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}

/* =============================================================
/* ==== PERAPIHAN BOX MILESTONE ====
================================================================*/

/* === MILESTONE TIMELINE STYLE === */
#milestone-sps {
  padding: 50px 20px;
  background: #f4f6fb;
}

#milestone-sps h2 {
  text-align: center;
  color: #002147;
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 50px;
}

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: #002147;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
}

.milestone {
  padding: 20px 0;
  position: relative;
  width: 50%;
}

.milestone.left {
  left: 0;
  text-align: right;
}

.milestone.right {
  left: 50%;
  text-align: left;
}

.card {
  background-color: white;
  position: relative;
  border-radius: 6px;
  padding: 20px;
  border-left: 5px solid #004aad;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: inline-block;
  max-width: 90%;
}

.milestone.left .card {
  float: right;
}

.milestone.right .card {
  float: left;
}

.year {
  position: absolute;
  top: 20px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background-color: #004aad;
  padding: 6px 14px;
  border-radius: 30px;
}

.milestone.left .year {
  right: -80px;
}

.milestone.right .year {
  left: -80px;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .timeline::after {
    left: 20px;
  }

  .milestone {
    width: 100%;
    padding-left: 60px;
    padding-right: 20px;
  }

  .milestone.left,
  .milestone.right {
    left: 0;
    text-align: left;
  }

  .milestone .card {
    float: none !important;
    max-width: 100%;
  }

  .year {
    position: relative;
    left: 0 !important;
    right: 0 !important;
    display: inline-block;
    margin-bottom: 10px;
  }
}
/* ==== FIX CONTAINER TERPOTONG / OVERFLOW TIMELINE ==== */
#milestone-sps,
      /* khusus jika dibungkus oleh Joomla */
/* #.item-page,            /* class default Joomla untuk artikel */
/* .t3-content {           */ */
  /* position: relative;
  overflow: visible !important; */
/* } */
#milestone-sps,
#milestone-sps .timeline{
  position: relative;
  overflow: visible !important;
}
#milestone-sps {
  min-height: 800px;
}

#milestone-sps {
  position: relative; /* memastikan posisi absolute mengacu ke container ini */
}

.watermark {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.05; /* transparansi watermark */
  width: auto;
  height: 80%; /* mengikuti tinggi container */
  max-height: 700px; /* batasi tinggi maksimal */
  z-index: 0;     /* pastikan berada di belakang konten */
  pointer-events: none; /* agar tidak mengganggu interaksi user */
}


/* =============================================================
   FAQ PMB PASCA – Elegant Card Style (FONT BESAR)
================================================================*/
#faq-sps {
  background: #f4f6fb;
  padding: 60px 20px 80px;
  font-family: 'Poppins', sans-serif;
  color: #002147;
}

#faq-sps h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 14px;
}

#faq-sps .subtitle {
  text-align: center;
  margin-bottom: 42px;
  font-size: 17px;
  opacity: 0.8;
}

/* tombol */
.faq-accordion {
  width: 100%;
  background: #ffffff;
  border: none;
  padding: 24px 28px;
  margin: 12px 0;
  font-size: 18px;               /* Ukuran diperbesar */
  font-weight: 600;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
  transition: all .3s;
  position: relative;
  color: #002147;
}

.faq-accordion::after {
  content: '+';
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: #004aad;
  transition: transform .3s;
}

.faq-accordion:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .09);
}

.faq-accordion.active {
  background: #004aad;
  color: #ffffff;
}

.faq-accordion.active::after {
  content: '−';
  color: #ffffff;
  transform: translateY(-50%) rotate(180deg);
}

/* panel */
.faq-panel {
  max-height: 0;
  overflow: hidden;
  background: #ffffff;
  border-left: 4px solid #004aad;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
  margin-top: -6px;
  padding: 0 28px;
  transition: max-height .45s ease, padding .35s ease;
  font-size: 17px;               /* Ukuran jawaban diperbesar */
  line-height: 1.7;
}

.faq-panel p {
  margin: 0 0 10px;
}

.faq-panel a {
  color: #004aad;
  font-weight: 600;
  text-decoration: none;
}

/* panel aktif */
.faq-accordion.active + .faq-panel {
  padding: 22px 28px 28px;
  max-height: 600px;
}

/* mobile */
@media (max-width: 768px) {
  .faq-accordion {
    font-size: 16px;
    padding: 20px;
  }

  .faq-accordion::after {
    right: 18px;
  }

  #faq-sps h2 {
    font-size: 26px;
  }

  .faq-panel {
    font-size: 16px;
  }
}

/* ============================================================
   PROGRAM STUDI  –  Sekolah Pascasarjana Unand
   warna utama #004aad, navy #002147, aksen soft
============================================================ */
#program-sps{
  background:#f4f6fb;
  padding:70px 20px 90px;
  font-family:'Poppins',sans-serif;
}
#program-sps .prg-title{
  text-align:center;
  font-size:32px;
  font-weight:700;
  color:#002147;
  margin-bottom:48px;
}

/* FILTERS -------------------------------------------------- */
.prg-filters{
  display:flex; flex-wrap:wrap; gap:15px;
  justify-content:center;
  margin-bottom:50px;
}
.prg-select,
.prg-search{
  padding:13px 16px;
  min-width:180px;
  font-size:15px;
  border:1px solid #c9d4e0;
  border-radius:8px;
  background:#fff;
  color:#002147;
  outline:none;
  transition:border-color .25s;
}
.prg-select:focus,
.prg-search:focus{border-color:#004aad;}

/* CARDS ---------------------------------------------------- */
.prg-cards{
  display:flex; flex-wrap:wrap;
  gap:32px; justify-content:center;
}
.prg-card{
  width:300px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  overflow:hidden;
  position:relative;
  transition:transform .3s;
}
.prg-card:hover{transform:translateY(-6px);}
.prg-card img{width:100%;height:180px;object-fit:cover;}
.prg-label{
  position:absolute; top:14px; left:14px;
  background:#004aad; color:#fff;
  font-size:12px; padding:5px 12px;
  border-radius:20px; letter-spacing:.3px;
}
.prg-card h3{
  font-size:20px; color:#004aad;
  margin:18px 20px 8px;
  min-height:48px;
}
.prg-desc{font-size:15px;padding:0 20px;color:#444;}
.prg-tags{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:12px 20px 0;
}
.prg-tags span{
  font-size:12px;
  background:#e6f0ff;
  color:#004aad;
  padding:6px 10px;
  border-radius:14px;
}
.prg-mode{
  font-size:13px;font-weight:600;
  color:#555;padding:16px 20px 0;
}
.prg-btn{
  display:block;text-align:center;
  background:#004aad;color:#fff;
  margin:18px 24px 24px;
  padding:10px 0;border-radius:8px;
  text-decoration:none;font-weight:600;
}
@media(max-width:768px){
  .prg-select,.prg-search{flex:1 1 45%;}
  .prg-card{width:92%;}
}

/* ============================================================
   SPS Now
============================================================ */
.sps-now-wrapper {
  padding: 40px 30px;
  background-color: #f4f6fb;
  border-left: 6px solid #004aad;
  border-radius: 12px;
  margin: 50px auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  text-align: center;
  max-width: 2000px;
}

.sps-now-title {
  font-size: 30px;
  color: #004aad;
  font-weight: 700;
  margin-bottom: 35px;
  font-family: 'Helvetica Neue', sans-serif;
}

/* ============================================================
   Sasaran Section - No Container
============================================================ */

.sasaran-section {
    position: relative;
    width: 100%;
    background-color: #f8fafc;
    padding: 60px 20px;
    overflow: hidden;
    text-align: center;
}

.sasaran-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: url('https://pasca.unand.ac.id/new/images/Logo%20Unand%20PTNBH.png') center/contain no-repeat;
    opacity: 0.06;
    z-index: 0;
}

.sasaran-section h2 {
    color: #003366;
    font-family: "Verdana", "Varta", Geneva, sans-serif;
    font-size: 30px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.sasaran-section ol {
    display: inline-block;
    text-align: left;
    font-family: "Verdana", "Varta", Geneva, sans-serif;
    font-size: 20px;
    color: #333;
    line-height: 1.8;
    padding-left: 25px;
    margin: 0;
    position: relative;
    z-index: 1;
}

.sasaran-section ol li {
    margin-bottom: 10px;
}

/* ============================================================
   Visi Misi Tujuan Sasaran - Unified Elegant Layout
============================================================ */

.vmts-section {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    padding: 80px 20px;
    overflow: hidden;
    text-align: center;
}

.vmts-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: url('https://pasca.unand.ac.id/new/images/Logo%20Unand%20PTNBH.png') center/contain no-repeat;
    opacity: 0.05;
    z-index: 0;
}

.vmts-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.vmts-block {
    background: rgba(255, 255, 255, 0.95);
    padding: 50px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 60px;
}

.vmts-block h2 {
    color: #003366;
    font-family: "Verdana", "Varta", Geneva, sans-serif;
    font-size: 36px;
    margin-bottom: 30px;
    position: relative;
}

.vmts-block h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background-color: #FDB813; /* Emas Unand */
    margin: 15px auto 0;
    border-radius: 2px;
}

.vmts-block p,
.vmts-block li {
    font-family: "Verdana", "Varta", Geneva, sans-serif;
    font-size: 20px;
    color: #333333;
    line-height: 1.8;
    margin: 0 0 15px;
    text-align: left;
}

.vmts-block ol {
    padding-left: 25px;
    margin: 0;
}

/* ============================================================
   Profil Prodi 
============================================================ */
 .ps-koordinator-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 50px 20px;
    background-color: #ffffff;
  }

  .ps-koordinator-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 20px;
    width: 280px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.06);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .ps-koordinator-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  }

  .ps-koordinator-card img {
    width: 100%;
    height: auto;
    max-height: 270px;
    object-fit: cover;
    border-radius: 12px;
    border: 4px solid #004aad;
    background-color: #e9f0fb;
    margin-bottom: 15px;
  }

  .ps-koordinator-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: #004aad;
    margin-bottom: 5px;
  }

  .ps-koordinator-card .jabatan {
    font-size: 14px;
    color: #333;
  }

  @media (max-width: 768px) {
    .ps-koordinator-card {
      width: 90%;
    }
  }

.mathead-wrapper {
  background-color: #10153c; /* Warna biru tua sesuai tampilan */
  padding: 60px 20px;
  margin-bottom: 40px;
}

.mathead-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

.mathead-title {
  color: #ffffff;
  font-size: 36px;
  font-weight: 700;
  font-family: "Verdana", "Varta", Geneva, sans-serif;
  margin: 0;
}
/* ============================================================
   Button Download Accordion
============================================================ */

  .hover-download-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #131e3c;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
  }

  .hover-download-btn:hover {
    background-color: #0a58ca;
    color: white;
  }


/* ============================================================
  Kerjasama
============================================================ */
/* ====== THEME VARS ====== */
:root{
  --sps-blue:#004aad;
  --sps-bg:#f4f6fb;
  --partner-gap:12px;        /* jarak antar logo: 10–16px ideal */
  --partner-w:200px;         /* kartu seragam */
  --partner-h:120px;
}

/* ====== SECTION FULL WIDTH ====== */
.sps-fullbleed{
  position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw; background:var(--sps-bg); padding:40px 0;
}
.sps-fullbleed .container{ max-width:1280px; margin:0 auto; padding:0 24px; }

.partners-title{
  margin:0 0 16px; text-align:center;
  color:var(--sps-blue); font-weight:800; letter-spacing:.2px;
}

/* rail: kontainer isi full layar + napas sisi */
.partners-rail{
  width:100vw;
  margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);
  padding:0 16px; box-sizing:border-box;
}

/* ====== GRID (INTERNASIONAL) ====== */
.partners-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--partner-w), 1fr));
  gap: var(--partner-gap);
  align-items:center; justify-items:center;
  max-width: 1600px;          /* agar tidak terlalu renggang di ultra-wide */
  margin: 0 auto;
}

/* ====== KARTU LOGO (dipakai grid & carousel) ====== */
.partners-carousel .partner,
.partners-grid .partner{
  width:var(--partner-w); height:var(--partner-h);
  background:#fff; border-radius:12px;
  border:2px solid color-mix(in srgb, var(--sps-blue) 10%, transparent);
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  padding:10px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.partners-carousel .partner:hover,
.partners-grid .partner:hover{
  transform: translateY(-3px);
  border-color: var(--sps-blue);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

/* logo */
.partners-carousel .partner img,
.partners-grid .partner img{
  max-width:100%; max-height:100%;
  object-fit:contain; transition:transform .2s;
}
.partners-carousel .partner:hover img,
.partners-grid .partner:hover img{ transform:scale(1.05); }

/* ====== CAROUSEL (NASIONAL) ====== */
.partners-carousel .owl-item{ padding:0 !important; }
.partners-carousel .owl-stage{ margin:0 !important; }

.partner-nav{
  font-size:28px; font-weight:700; line-height:1;
  color:var(--sps-blue); cursor:pointer;
  padding:4px 10px; border-radius:50%;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.partner-nav:hover{ background:var(--sps-blue); color:#fff; }

.owl-carousel .owl-nav{ position:relative; margin-top:8px; }
@media (min-width:768px){
  .owl-carousel .owl-nav{
    position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);
    display:flex; justify-content:space-between; align-items:center;
    pointer-events:none;
  }
  .owl-carousel .owl-nav button{ pointer-events:auto; background:transparent; border:0; }
}

/* ====== RESPONSIVE ====== */
@media (max-width:576px){
  :root{ --partner-w:160px; --partner-h:100px; --partner-gap:10px; }
}
/* ============================================================
  Detail Kerjasama
============================================================ */
:root {
  --sps-blue: #004aad;
  --sps-gold: #f7b500;
  --sps-bg:   #f4f6fb;
}

.sps-stats {
  background: var(--sps-bg);
  padding: 60px 20px;
}
.stats-title {
  text-align: center;
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--sps-blue);
  margin-bottom: .5rem;
}
.stats-desc {
  text-align: center;
  color: #444;
  font-size: 1rem;
  margin-bottom: 2.5rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.stat-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 20px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}
.stat-icon {
  font-size: 2rem;
  margin-bottom: .5rem;
}
.stat-heading {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sps-blue);
  margin-bottom: .5rem;
}
.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--sps-blue);
  margin: .5rem 0;
}
.stat-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--sps-gold);
}
.stats-flyer {
  margin-top: 40px;
  text-align: center;
}

.stats-flyer img {
  max-width: 320px;  /* responsive, bisa lebih besar kalau perlu */
  width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.stats-flyer img:hover {
  transform: scale(1.03);
}

.stats-flyer figcaption {
  font-size: 0.9rem;
  color: #555;
  margin-top: 8px;
}


/* ============================================================
PPID
============================================================ */
/* === PPID 3-Card Grid === */
.ppid-tiles .ppid-tile{
  background:#fff;
  border-radius:2rem;                         /* sudut besar seperti mockup */
  padding:2.25rem 2rem;
  box-shadow:0 12px 40px rgba(0,0,0,.07);     /* shadow lembut */
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
  outline:none;
}
.ppid-tiles .ppid-tile:hover{
  transform: translateY(-2px);
  box-shadow:0 18px 56px rgba(0,0,0,.09);
}
.ppid-tiles .ppid-tile:focus-visible{
  box-shadow:0 0 0 3px rgba(13,110,253,.35), 0 12px 40px rgba(0,0,0,.07);
}
.ppid-tiles .ppid-icon{
  width:96px; height:96px; object-fit:contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.08));
}
.ppid-tiles h3{
  letter-spacing:.2px;
}
.ppid-tiles .btn{
  font-weight:700; letter-spacing:.3px;
}
@media (max-width: 575.98px){
  .ppid-tiles .ppid-tile{ border-radius:1.5rem; padding:1.75rem 1.5rem; }
}

/* ============================================================
Berita 
============================================================ */
/* === Grid 3 kolom rapi, kartu sama tinggi === */
.blog .items-row{
  display:grid; gap:28px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
@media (max-width:1024px){ .blog .items-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){  .blog .items-row{ grid-template-columns:1fr; } }

/* Pastikan wrapper kolom ikut fleksibel */
.blog .items-row > div{ display:flex; }

/* Kartu artikel */
.blog .items-row article,
.blog .items-row .item,
.blog .items-row .article-intro{
  display:flex; flex-direction:column; width:100%; height:100%;
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 10px 22px rgba(2,8,20,.06);
  transition:transform .2s, box-shadow .2s;
}
.blog .items-row article:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(2,8,20,.09); }

/* Gambar intro wajib proporsional */
.blog .item .item-image,
.blog .article-intro .intro-image{ aspect-ratio:16/9; overflow:hidden; }
.blog .item .item-image img,
.blog .article-intro .intro-image img{ width:100%; height:100%; object-fit:cover; }

/* Judul, meta, teaser */
.blog .item .item-title{ margin:12px 18px; font-size:1.12rem; line-height:1.4; }
.blog .item .article-info{ margin:0 18px 8px; }

/* Batasi teaser agar tinggi seragam */
.blog .item .item-introtext,
.blog .article-intro .item-introtext{
  margin:0 18px 18px;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
/* Hilangkan heading yang kadang nyangkut di intro */
.blog .item .item-introtext h1,
.blog .item .item-introtext h2,
.blog .item .item-introtext h3{ display:none; }

/* Singkirkan embed di ringkasan */
.blog .item .item-introtext iframe,
.blog .item .item-introtext embed,
.blog .item .item-introtext script{ display:none !important; }

/* Read more nempel ke bawah kartu */
.blog .item .readmore{ margin: auto 18px 18px; }

/* ==== Tombol Read More: warna + hover + icon ==== */
:root{
  /* Pakai warna Bootstrap kalau ada; fallback ke biru elegan */
  --sps-primary: var(--bs-primary, #1e3a8a);
  --sps-primary-hover: #152b6a;
}

.blog .readmore a,
.article .readmore a,
.readmore a.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.58rem .9rem; font-size:.95rem; font-weight:600;
  background:var(--sps-primary); color:#fff!important;
  color:#fff !important;
  border:0; border-radius:9999px;
  font-weight:600; letter-spacing:.2px;
  text-decoration:none !important;
  border-radius:9999px; text-decoration:none!important;
  box-shadow:0 6px 16px rgba(0,0,0,.10);  
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* icon panah */
.blog .readmore a::after{ content:"↗"; font-size:.95em; }
.blog .readmore a:hover{ background:var(--sps-primary-hover); transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.16); }.article .readmore a::after { content:"↗"; font-size:0.95em; line-height:1; }

/* hover & focus */
.blog .readmore a:hover,
.article .readmore a:hover,
.blog .readmore a:focus,
.article .readmore a:focus {
  background:var(--sps-primary-hover);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.16), 0 0 0 3px rgba(30,58,138,.16);
  outline:none;
}

/* supaya nempel di dasar kartu (sesuai setup sebelumnya) */
.blog .item .readmore,
.blog .article .readmore { margin:auto 18px 18px; }

.blog .readmore a{
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ============================================================
TEMPLATE BERITA
============================================================ */
/* Grid blog: samakan rasio gambar & potong teks agar rapi */
.blog-items .items-row .item .intro-image img { 
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;       /* butuh browser modern */
  object-fit: cover;
  border-radius: 10px;
}

.blog-items .items-row .item .intro { 
  display: -webkit-box;
  -webkit-line-clamp: 4;    /* tampilkan max 4 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-items .items-row .item {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* ===== Body copy nyaman dibaca ===== */
.article-details, .item-page { font-size:1.05rem; line-height:1.8; }
.item-page p { margin:0 0 1rem; }
.item-page .lede { font-size:1.15rem; font-weight:600; color:#222; }

/* ===== Gambar hero + caption ===== */
.article-hero{ margin:1rem 0 1.25rem; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 22px rgba(2,8,20,.06); }
.article-hero img{ width:100%; height:auto; display:block; }
.article-hero figcaption{ font-size:.9rem; color:#606770; background:#f7f8fa; padding:.6rem .9rem; }

/* ===== Pullquote ===== */
.pull{ margin:1rem 0; padding:1rem 1.25rem; border-left:4px solid #1e3a8a;
  background:#f6f8ff; color:#1e3a8a; font-style:italic; border-radius:8px; }

/* ===== Daftar poin rapi ===== */
.item-page ul.dots{ list-style:disc; padding-left:1.25rem; }
.item-page ul.dots li{ margin:.35rem 0; }

/* ===== Box info/kontak ===== */
.info-box{ margin:1rem 0; padding:1rem 1.25rem; border-radius:12px;
  background:linear-gradient(180deg,#f7fafc,#eef2ff); border:1px solid #e2e8f0; }
.info-box strong{ color:#1e3a8a; }

/* ===== Video/iframe responsif ===== */
.ratio{ position:relative; width:100%; }
.ratio-16x9{ padding-top:56.25%; }
.ratio > iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ===== Netralisir justify inline dari copy-paste ===== */
.item-page [style*="text-align: justify"]{ text-align:unset !important; }

/* ===== Batasi lebar konten agar nyaman ===== */
.item-page .content{ max-width:860px; margin-inline:auto; }

/* ===========================
   BERITA & KEGIATAN – Category Blog
   (pakai struktur T4: .blog-items)
   =========================== */

/* 3 kolom rapi (otomatis 2 & 1 kolom di layar kecil) */
.t4-content .blog-items .items-row{
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 1024px){
  .t4-content .blog-items .items-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .t4-content .blog-items .items-row{ grid-template-columns: 1fr; }
}

/* kolom fleksibel supaya kartu sama tinggi */
.t4-content .blog-items .items-row > div{ display: flex; }

/* kartu artikel */
.t4-content .blog-items article.item{
  display: flex; flex-direction: column; width: 100%; height: 100%;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 22px rgba(2,8,20,.06);
  transition: transform .2s, box-shadow .2s;
}
.t4-content .blog-items article.item:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(2,8,20,.09);
}

/* thumbnail seragam (crop cantik) */
.t4-content .blog-items .item-image,
.t4-content .blog-items .img-intro,
.t4-content .blog-items .intro-image{
  aspect-ratio: 16/9; overflow: hidden;
}
.t4-content .blog-items .item-image img,
.t4-content .blog-items .img-intro img,
.t4-content .blog-items .intro-image img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* teaser diseragamkan tingginya */
.t4-content .blog-items .item-introtext{
  margin: 0 18px 18px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.t4-content .blog-items .item-title{ margin: 12px 18px; line-height: 1.4; }
.t4-content .blog-items .article-info{ margin: 0 18px 8px; }

/* sembunyikan embed/iframe di ringkasan (category blog) */
.t4-content .blog-items .item-introtext iframe,
.t4-content .blog-items .item-introtext embed,
.t4-content .blog-items .item-introtext script{
  display: none !important;
}

/* tombol read more di dasar kartu */
.t4-content .blog-items .readmore{ margin: auto 18px 18px; }

/* style tombol read more (punyamu sudah ok, ini memastikan hover) */
:root{
  --sps-primary: var(--bs-primary, #1e3a8a);
  --sps-primary-hover: #152b6a;
}
.t4-content .blog-items .readmore a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.58rem .9rem; font-size:.95rem; font-weight:600;
  background:var(--sps-primary); color:#fff !important;
  border:0; border-radius:9999px; text-decoration:none !important;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  transition:background .18s, transform .18s, box-shadow .18s;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.t4-content .blog-items .readmore a::after{ content:"↗"; font-size:.95em; }
.t4-content .blog-items .readmore a:hover{
  background:var(--sps-primary-hover);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}

/* ===========================
   Single Article utilities
   =========================== */

/* batas lebar konten artikel */
.item-page .content{ max-width: 860px; margin-inline: auto; }

/* pullquote, info box, dll (punyamu sudah bagus) tetap dipertahankan */

/* ===========================
   IFRAME RESPONSIF – override inline width/height
   (ini yang mematikan konflik embed)
   =========================== */
.ratio{ position:relative; width:100%; }
.ratio-16x9{ padding-top:56.25%; }
.ratio > iframe{
  position:absolute; inset:0;
  width:100% !important;   /* kunci – menimpa inline style */
  height:100% !important;  /* kunci – menimpa inline style */
  border:0;
}

/* jaga kata panjang supaya tidak dorong grid */
.t4-content .blog-items .item-introtext,
.item-page .content{ overflow-wrap:anywhere; }


/* ============================================================
Prodi SPS
============================================================ */
/* ============================================================
   SPS — Program Studi Premium
============================================================ */
:root{
  --sps2-primary: #014aad;   /* navy */
  --sps2-accent:  #ffa500;   /* ORANGE CTA  */
  --sps2-accentD: #e69500;   /* hover darker */
  --sps2-bg:      #f6f8fc;
  --sps2-card:    #ffffff;
  --sps2-text:    rgba(2,6,23,.86);
  --sps2-muted:   rgba(2,6,23,.62);
  --sps2-border:  rgba(15,23,42,.10);
  --sps2-shadow:  0 12px 28px rgba(2,8,20,.06);
  --sps2-shadowH: 0 25px 58px rgba(2,8,20,.12);
}

/* FULL PAGE FEEL */
.sps-prodi2{
  background:
    radial-gradient(1200px 540px at 50% -50px, rgba(255,165,0,.18), transparent 60%),
    radial-gradient(900px 420px at 10% 10%, rgba(15,44,92,.08), transparent 60%),
    var(--sps2-bg);
  padding: clamp(56px, 6vw, 86px) 0;
}

.sps-prodi2__container{
  max-width: 1280px;        /* lebih lebar */
  margin: 0 auto;
  text-align: center;
}

/* TYPOGRAPHY lebih “tegas” */
.sps-prodi2__eyebrow{
  margin: 0 0 12px;
  font-size: .92rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(2,6,23,.58);
}

.sps-prodi2__title{
  margin: 0 0 16px;
  font-weight: 950;
  color: var(--sps2-primary);
  letter-spacing: -0.04em;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.06;
}

.sps-prodi2__subtitle{
  margin: 0 auto 20px;
  max-width: 980px;
  color: var(--sps2-muted);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.8;
}

/* PILLS lebih berisi */
.sps-prodi2__highlights{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 26px;
}

.sps-pill{
  padding: 12px 16px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid rgba(15,44,92,.14);
  box-shadow: 0 10px 24px rgba(2,8,20,.06);
  color: var(--sps2-text);
  font-weight: 850;
  font-size: 1rem;
}

/* CTA ORANGE, LEBIH BESAR, INTERAKTIF */
.sps-prodi2__cta{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 10px 0 34px;
}

.sps-btn2{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 54px;          /* lebih tinggi */
  padding: 14px 22px;        /* lebih besar */
  border-radius: 9999px;
  font-weight: 950;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    filter .16s ease;
  will-change: transform;
}

/* kedua CTA sama-sama ORANGE */
.sps-btn2--primary,
.sps-btn2--ghost{
  background: var(--sps2-accent);
  color: #ffffff !important;
  border-color: rgba(0,0,0,.02);
  box-shadow: 0 14px 34px rgba(255,165,0,.26);
}

.sps-btn2--primary:hover,
.sps-btn2--ghost:hover{
  background: var(--sps2-accentD);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(255,165,0,.34);
  filter: saturate(1.02);
}

.sps-btn2--primary:active,
.sps-btn2--ghost:active{
  transform: translateY(0);
  box-shadow: 0 12px 26px rgba(255,165,0,.22);
}

.sps-btn2:focus-visible{
  outline: 3px solid rgba(255,165,0,.45);
  outline-offset: 3px;
}

/* GRID LEBIH BESAR & FULL */
.sps-prodi2__grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* row 1 = 5 */
  gap: 20px;                      /* lebih lega */
  margin-top: 10px;
}

/* CARD LEBIH BESAR, NAMA LEBIH TERBACA */
.sps-prodi2__card{
  height: 150px;                  /* naik dari 120 → 150 */
  padding: 16px 16px;
  border-radius: 18px;
  background: var(--sps2-card);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--sps2-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sps-prodi2__card:hover{
  transform: translateY(-4px);
  box-shadow: var(--sps2-shadowH);
  border-color: rgba(255,165,0,.45);
}

.sps-prodi2__card img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Responsif tetap rapi */
@media (max-width: 1200px){
  .sps-prodi2__container{ max-width: 1120px; }
  .sps-prodi2__grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .sps-prodi2__card{ height: 144px; }
}
@media (max-width: 992px){
  .sps-prodi2__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sps-prodi2__card{ height: 136px; }
}
@media (max-width: 640px){
  .sps-prodi2__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sps-btn2{ min-height: 52px; width: 100%; max-width: 360px; }
  .sps-prodi2__card{ height: 128px; }
}
/* === INTERACTIVE HIGHLIGHT PILLS (LINK) === */
.sps-pill--link {
  text-decoration: none;
  cursor: pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

/* Hover / */
.sps-pill--link:hover,
.sps-pill--link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* Active click  */
.sps-pill--link:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}



  /* =========================
     FIX OVERFLOW MOBILE/TABLET
     ========================= */
  html, body {
    overflow-x: hidden !important;
    max-width: 100%;
  }

  /* Default JotForm feedback link kadang bikin scroll horizontal karena rotate/fixed */
  a.jotform-feedback-link {
    max-width: 100vw !important;
  }

  /* =========================
     MOBILE/TABLET: sembunyikan 6 tombol vertikal,
     nanti diganti dengan 1 tombol floating via JS
     ========================= */
  @media (max-width: 1024px) {
    a.jotform-feedback-link {
      display: none !important;
    }
  }

  /* =========================
     Floating Survey Button (mobile/tablet)
     ========================= */
  .sps-survey-fab {
    position: fixed;
    right: 14px;
    bottom: 84px;
    z-index: 99999;
    background: #ffa500;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 14px;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
    cursor: pointer;
    display: none; /* akan diaktifkan JS di layar kecil */
  }
  .sps-survey-fab:hover { filter: brightness(.96); transform: translateY(-1px); }

  .sps-survey-sheet {
    position: fixed;
    right: 14px;
    bottom: 140px;
    z-index: 99999;
    width: min(320px, calc(100vw - 28px));
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    padding: 10px;
    display: none;
  }
  .sps-survey-sheet a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: #0f172a;
    font-weight: 700;
  }
  .sps-survey-sheet a:hover { background: rgba(255,165,0,.10); }
  .sps-survey-sheet small { font-weight: 600; opacity: .75; }


/* ===========================
   SPS ADMISSION CATALOG – Scoped Styles
=========================== */
.sps-adm-catalog{
  background: #f6f8fc;
  padding: 56px 0 44px;
}

.sps-adm-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
  text-align: center;
}

.sps-adm-eyebrow{
  margin: 0 0 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(14,32,66,.65);
}

.sps-adm-title{
  margin: 0 0 10px;
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 1.08;
  font-weight: 800;
  color: #0f2c49;
}

.sps-adm-subtitle{
  margin: 0 auto 18px;
  max-width: 860px;
  color: rgba(14,32,66,.75);
  font-size: 16px;
  line-height: 1.7;
}

.sps-adm-stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 860px;
  margin: 18px auto 22px;
}

.sps-adm-stat{
  background: #fff;
  border: 1px solid rgba(15,44,73,.08);
  border-radius: 14px;
  padding: 12px 10px;
  box-shadow: 0 10px 24px rgba(15,44,73,.06);
}
.sps-adm-stat__num{
  display:block;
  font-size: 22px;
  font-weight: 900;
  color:#0f2c49;
  line-height: 1.2;
}
.sps-adm-stat__label{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(14,32,66,.6);
}

.sps-adm-controls{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto 18px;
}

.sps-adm-search{
  display:flex;
  justify-content:center;
}

.sps-adm-input{
  width: min(860px, 100%);
  background: #fff;
  border: 1px solid rgba(15,44,73,.14);
  border-radius: 999px;
  padding: 14px 18px;
  font-size: 14px;
  outline: none;
  box-shadow: 0 12px 26px rgba(15,44,73,.06);
}
.sps-adm-input:focus{
  border-color: rgba(255,174,66,.8);
  box-shadow: 0 16px 34px rgba(15,44,73,.08);
}

.sps-adm-levels{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.sps-adm-tab{
  appearance:none;
  border:1px solid rgba(15,44,73,.16);
  background:#fff;
  color:#0f2c49;
  border-radius:999px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.sps-adm-tab:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15,44,73,.08);
}
.sps-adm-tab.is-active{
  background:#FFAE42;
  border-color:#FFAE42;
  color:#0f2c49;
}

.sps-adm-cards{
  margin: 16px auto 22px;
  display: grid;
  gap: 14px;
}

/* Faculty accordion card */
.sps-adm-fac{
  background: #fff;
  border: 1px solid rgba(15,44,73,.10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(15,44,73,.06);
  text-align: left;
}

.sps-adm-fac__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  cursor:pointer;
  user-select:none;
}
.sps-adm-fac__title{
  margin:0;
  font-size: 15px;
  font-weight: 900;
  color:#0f2c49;
}
.sps-adm-fac__meta{
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(14,32,66,.65);
}
.sps-adm-fac__right{
  display:flex;
  align-items:center;
  gap: 10px;
}
.sps-adm-badge{
  background: rgba(255,174,66,.18);
  color:#0f2c49;
  border: 1px solid rgba(255,174,66,.5);
  font-weight: 800;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}
.sps-adm-chevron{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(15,44,73,.12);
  display:grid;
  place-items:center;
  color:#0f2c49;
  background:#fff;
}

/* Body */
.sps-adm-fac__body{
  padding: 0 16px 16px;
  display:none;
}
.sps-adm-fac.is-open .sps-adm-fac__body{
  display:block;
}

.sps-adm-prodiGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 12px;
}

/* Prodi link item (clickable, elegant) */
.sps-adm-prodi{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,44,73,.10);
  background: #fff;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sps-adm-prodi:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15,44,73,.10);
  border-color: rgba(255,174,66,.7);
}
.sps-adm-prodi__dot{
  margin-top: 4px;
  width: 10px; height: 10px;
  border-radius: 999px;
  background:#FFAE42;
  flex: 0 0 10px;
}
.sps-adm-prodi__name{
  font-weight: 800;
  color:#0f2c49;
  font-size: 13px;
  line-height: 1.25;
}
.sps-adm-prodi__note{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(14,32,66,.65);
}

/* CTA band */
.sps-adm-ctaBand{
  margin: 22px auto 14px;
  background: #0f2c49;
  border-radius: 18px;
  padding: 20px 18px;
  display:flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 18px 40px rgba(15,44,73,.18);
  text-align: left;
}
.sps-adm-ctaBand__title{
  margin:0 0 6px;
  color:#fff;
  font-weight: 900;
  font-size: 18px;
}
.sps-adm-ctaBand__desc{
  margin:0;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  font-size: 14px;
  max-width: 680px;
}

.sps-adm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 900;
  text-decoration:none;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
  white-space: nowrap;
}
.sps-adm-btn--primary{
  background:#FFAE42;
  border-color:#FFAE42;
  color:#0f2c49;
  box-shadow: 0 18px 36px rgba(255,174,66,.28);
}
.sps-adm-btn--primary:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: 0 22px 44px rgba(255,174,66,.34);
}
.sps-adm-btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.55);
  color:#fff;
}
.sps-adm-btn--ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

/* Bottom */
.sps-adm-bottom{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  margin-top: 14px;
  text-align:left;
}
.sps-adm-download,
.sps-adm-contact{
  background:#fff;
  border: 1px solid rgba(15,44,73,.10);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(15,44,73,.06);
}
.sps-adm-bottom__title{
  margin:0 0 6px;
  font-weight: 900;
  color:#0f2c49;
  font-size: 16px;
}
.sps-adm-bottom__desc{
  margin:0 0 12px;
  color: rgba(14,32,66,.72);
  line-height: 1.6;
  font-size: 14px;
}
.sps-adm-contact__list{
  margin:0;
  padding-left: 18px;
  color: rgba(14,32,66,.78);
}
.sps-adm-contact__list a{
  color:#0f2c49;
  font-weight: 800;
  text-decoration: none;
}
.sps-adm-contact__list a:hover{
  text-decoration: underline;
}

/* A11y helper */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Responsive */
@media (max-width: 992px){
  .sps-adm-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sps-adm-prodiGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sps-adm-ctaBand{ flex-direction: column; align-items: flex-start; }
  .sps-adm-ctaBand__actions{ width:100%; display:flex; gap:10px; flex-wrap:wrap; }
  .sps-adm-bottom{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .sps-adm-prodiGrid{ grid-template-columns: 1fr; }
  .sps-adm-btn{ width:100%; }
}

/* ===========================
   SPS ADMISSION – SYNC LAYOUT
   Scope: .sps-adm-page
=========================== */
/* =========================================
   SPS ADMISSION — MASTER TABS (GO LIVE)
   Scoped: .sps-adm-tabs (aman, tidak ganggu global)
========================================= */
.sps-adm-tabs{
  background:#f6f8fb;
  padding: 54px 0 58px;
}

.sps-adm-tabs__container{ max-width: 1200px; }

.sps-adm-tabs__head{ text-align:center; margin-bottom: 18px; }
.sps-adm-tabs__eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  color:rgba(15,44,73,.65);
  margin:0 0 12px;
}
.sps-adm-tabs__title{
  font-size:clamp(30px,4.2vw,52px);
  line-height:1.05;
  font-weight:900;
  color:#0f2c49;
  margin:0 0 14px;
}
.sps-adm-tabs__subtitle{
  max-width: 860px;
  margin:0 auto;
  font-size:16px;
  line-height:1.6;
  color:rgba(15,44,73,.75);
}

/* NAV tabs */
.sps-adm-tabs__nav{
  margin: 26px auto 26px;
  max-width: 1040px;
  background:#fff;
  border:1px solid rgba(15,44,73,.10);
  border-radius: 18px;
  padding:10px;
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  box-shadow: 0 12px 28px rgba(15,44,73,.08);
}

.sps-adm-tab{
  appearance:none;
  border:1px solid rgba(15,44,73,.12);
  background:#fff;
  color:rgba(15,44,73,.90);
  font-weight:900;
  border-radius:14px;
  padding: 12px 18px;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  min-width: 170px;
  text-align:center;
}
.sps-adm-tab:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15,44,73,.10);
  border-color: rgba(255,174,66,.55);
}
.sps-adm-tab.is-active{
  background:#FFAE42;
  border-color:#FFAE42;
  color:#0f2c49;
  box-shadow: 0 12px 26px rgba(255,174,66,.35);
}

/* CTA */
.sps-adm-tabs__cta{
  margin-left:auto;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  padding:12px 18px;
  font-weight:900;
  background:#0f2c49;
  color:#fff;
  border:1px solid rgba(15,44,73,.20);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.sps-adm-tabs__cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15,44,73,.18);
  background:#0c243c;
}

/* Panels */
.sps-adm-panel{ display:none; }
.sps-adm-panel.is-active{ display:block; }

/* Metrics */
.sps-adm-metrics{
  margin: 8px auto 18px;
  max-width: 880px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.sps-adm-metric{
  background:#fff;
  border:1px solid rgba(15,44,73,.10);
  border-radius:16px;
  padding: 14px 12px;
  text-align:center;
  box-shadow: 0 12px 26px rgba(15,44,73,.06);
}
.sps-adm-metric__num{
  font-weight: 950;
  color:#0f2c49;
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
}
.sps-adm-metric__label{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(15,44,73,.60);
}

/* Search */
.sps-adm-searchWrap{
  max-width: 880px;
  margin: 10px auto 12px;
}
.sps-adm-search{
  width:100%;
  background:#fff;
  border:1px solid rgba(15,44,73,.12);
  border-radius: 999px;
  padding: 14px 18px;
  outline: none;
  box-shadow: 0 12px 26px rgba(15,44,73,.06);
}
.sps-adm-search:focus{
  border-color: rgba(255,174,66,.75);
  box-shadow: 0 14px 28px rgba(255,174,66,.22);
}

/* Level tabs */
.sps-adm-levelTabs{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 18px;
}
.sps-adm-level{
  border:1px solid rgba(15,44,73,.12);
  background:#fff;
  color: rgba(15,44,73,.88);
  font-weight: 900;
  border-radius: 999px;
  padding: 10px 14px;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.sps-adm-level:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15,44,73,.10);
  border-color: rgba(255,174,66,.55);
}
.sps-adm-level.is-active{
  background:#FFAE42;
  border-color:#FFAE42;
  color:#0f2c49;
  box-shadow: 0 12px 26px rgba(255,174,66,.30);
}

/* Catalog */
.sps-adm-catalog{
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

/* Faculty card */
.sps-adm-fac{
  background:#fff;
  border:1px solid rgba(15,44,73,.10);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 12px 28px rgba(15,44,73,.06);
}

.sps-adm-fac__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor:pointer;
}

.sps-adm-fac__title{
  margin:0;
  font-size: 16px;
  font-weight: 950;
  color:#0f2c49;
}
.sps-adm-fac__meta{
  margin:6px 0 0;
  font-size: 13px;
  color: rgba(15,44,73,.62);
}
.sps-adm-fac__meta a{ color:#0f2c49; font-weight: 950; text-decoration:none; }
.sps-adm-fac__meta a:hover{ text-decoration: underline; }

.sps-adm-fac__right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-shrink:0;
}

.sps-adm-badge{
  border:1px solid rgba(255,174,66,.55);
  background: rgba(255,174,66,.12);
  color:#0f2c49;
  font-weight: 950;
  font-size: 12px;
  border-radius: 999px;
  padding: 6px 10px;
}

.sps-adm-chevron{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,44,73,.10);
  color:#0f2c49;
  font-weight: 950;
}

/* body collapse */
.sps-adm-fac__body{
  display:none;
  border-top:1px solid rgba(15,44,73,.08);
  padding: 14px 18px 18px;
}
.sps-adm-fac.is-open .sps-adm-fac__body{ display:block; }

/* prodi grid */
.sps-adm-prodiGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.sps-adm-prodi{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  text-decoration:none;
  border:1px solid rgba(15,44,73,.08);
  border-radius: 14px;
  padding: 12px 12px;
  background:#fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sps-adm-prodi:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15,44,73,.10);
  border-color: rgba(255,174,66,.55);
}
.sps-adm-prodi__dot{
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background:#FFAE42;
  margin-top: 6px;
  flex-shrink:0;
}
.sps-adm-prodi__name{
  font-weight: 950;
  color:#0f2c49;
  line-height: 1.2;
}
.sps-adm-prodi__note{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(15,44,73,.62);
}

/* Tools */
.sps-adm-tools{
  max-width: 1040px;
  margin: 18px auto 0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.sps-adm-toolCard{
  background:#fff;
  border:1px solid rgba(15,44,73,.10);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 28px rgba(15,44,73,.06);
}
.sps-adm-toolCard__title{
  margin:0 0 8px;
  font-weight: 950;
  color:#0f2c49;
}
.sps-adm-toolCard__text{
  margin:0 0 12px;
  color: rgba(15,44,73,.70);
  line-height:1.55;
}
.sps-adm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 950;
  text-decoration:none;
  background:#FFAE42;
  border:1px solid #FFAE42;
  color:#0f2c49;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.sps-adm-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(255,174,66,.32);
  background:#ffa500;
}

/* Contact */
.sps-adm-contact{ margin: 0; padding-left: 18px; }
.sps-adm-contact li{ margin: 8px 0; color: rgba(15,44,73,.82); }
.sps-adm-contact a{ color:#0f2c49; font-weight: 950; text-decoration:none; }
.sps-adm-contact a:hover{ text-decoration: underline; }

/* Responsive */
@media (max-width: 992px){
  .sps-adm-tabs__nav{ flex-wrap:wrap; }
  .sps-adm-tabs__cta{ width:100%; margin-left:0; }
  .sps-adm-tab{ flex: 1 1 160px; min-width:0; }
  .sps-adm-metrics{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sps-adm-prodiGrid{ grid-template-columns: 1fr; }
  .sps-adm-tools{ grid-template-columns: 1fr; }
}

/* ===== SPS Admission Typography Lock  ===== */
.sps-adm-tabs {
  font-size: 16px;
  line-height: 1.6;
}

.sps-adm-tabs__eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sps-adm-tabs__title {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
}

.sps-adm-tabs__subtitle {
  font-size: 16px;
  line-height: 1.7;
  max-width: 820px;
  margin-inline: auto;
}

/* Panel heading inside PDSP card */
#persyaratan-pendaftaran .accordion,
#prosedur-pendaftaran .accordion {
  font-size: 16px; /* selaras button/accordion kamu */
  line-height: 1.4;
}

/* Panel text readability */
#persyaratan-pendaftaran .panel,
#prosedur-pendaftaran .panel {
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 640px) {
  .sps-adm-tabs { font-size: 15px; }
  .sps-adm-tabs__subtitle { font-size: 15px; }
}
/* =============================================================
   POP UP 
================================================================*/