/* MBS FAI — Layout & komponen. Lihat .claude/MBS-FAI-website-spec.md §4-§5 */

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: clip; }
html, body{ max-width: 100%; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--mbs-ink);
  background: var(--mbs-bg);
  font-size: 16px;
  line-height: 1.6;
}
h1, h2, h3, h4{ font-family: var(--font-display); color: var(--mbs-ink); margin: 0; }
p{ margin: 0; color: var(--mbs-muted); }
a{ text-decoration: none; color: inherit; }
img{ max-width: 100%; display: block; }
button{ font-family: inherit; }

/* viewport-fit=cover aktif: di landscape iPhone notch menutup tepi kiri/kanan,
   jadi gutter minimal selebar safe-area. --gx-* juga dipakai elemen full-bleed. */
.container-mbs{
  --gx-l: max(20px, env(safe-area-inset-left));
  --gx-r: max(20px, env(safe-area-inset-right));
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gx-r) 0 var(--gx-l);
}
/* Desktop: lebar penuh layar, bukan kolom 1240px di tengah (dulu menyisakan
   ruang kosong ~340px kiri-kanan di layar 1920px). Gutter ikut lebar layar
   (48px di 1200px, 67px di 1920px). Batas 1920px hanya untuk monitor ultra-lebar
   supaya baris teks dan grid kartu tidak meregang tanpa batas. */
@media (min-width: 1200px){
  .container-mbs{
    --gx-l: max(clamp(32px, 3.5vw, 72px), env(safe-area-inset-left));
    --gx-r: max(clamp(32px, 3.5vw, 72px), env(safe-area-inset-right));
    max-width: 1920px;
  }
}
/* ---------- Util ---------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mbs-teal);
  background: rgba(11, 138, 78, .1);
  padding: 7px 16px;
  border-radius: var(--r-pill);
}
.section-head{ max-width: 680px; margin: 0 auto 46px; text-align: center; }
.section-head h2{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-top: 14px; }
.section-head p{ margin-top: 12px; font-size: 1.05rem; }
/* tautan ke halaman daftar section (Pages) di bawah kepala section beranda */
/* teks "Lihat semua" di kiri, ikon halaman web dalam lingkaran di kanan (space-between) */
.section-more{
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 16px; min-height: 44px; min-width: 176px; padding: 5px 5px 5px 20px;
  border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-sm);
  font-size: .86rem; font-weight: 700; color: var(--mbs-teal);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.section-more-ico{
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mbs-grad-soft); color: var(--mbs-teal); font-size: .95rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.section-more:hover{ background: var(--mbs-grad-main); color: #fff; box-shadow: var(--shadow-blue-hover); }
.section-more:hover .section-more-ico{ background: rgba(255,255,255,.22); color: #fff; }
/* tautan kedua di kepala section (mis. "Tulis Testimoni" di samping "Lihat semua") */
.section-more + .section-more{ margin-left: 10px; }
@media (max-width: 420px){ .section-more + .section-more{ margin-left: 0; } }
.section-pad{ padding: 88px 0; }
@media (max-width: 767.98px){
  .section-pad{ padding: 56px 0; }
  .section-head{ margin-bottom: 32px; }
}

.btn-mbs{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 26px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .95rem;
  border: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-mbs-primary{ background: var(--mbs-grad-main); color: #fff; box-shadow: var(--shadow-md); }
.btn-mbs-primary:hover{ transform: translateY(-3px); box-shadow: var(--shadow-blue-hover); }
.btn-mbs-ghost{ background: #fff; color: var(--mbs-ink); border: 1.5px solid #D9E4E0; }
.btn-mbs-ghost:hover{ transform: translateY(-3px); border-color: var(--mbs-teal); color: var(--mbs-teal); }
.btn-mbs-light{ background: rgba(255,255,255,.18); color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn-mbs-light:hover{ background: rgba(255,255,255,.3); transform: translateY(-3px); }

/* ---------- Util: tautan "lihat selengkapnya" (ikon mata di kanan, space-between) ---------- */
.mbs-view-link{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
}
.mbs-view-ico{
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mbs-grad-soft); color: var(--mbs-teal); font-size: .92rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a:hover .mbs-view-ico, .mbs-view-link:hover .mbs-view-ico{ background: var(--mbs-grad-main); color: #fff; transform: translateX(2px); }

.icon-box{
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--mbs-grad-soft);
  color: var(--mbs-teal);
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.photo-ph{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: var(--mbs-grad-soft);
  color: var(--mbs-teal);
  border-radius: inherit;
  min-height: 100%;
  text-align: center;
  padding: 18px;
}
.photo-ph i{ font-size: 2rem; opacity: .6; }
.photo-ph span{ font-size: .75rem; color: var(--mbs-muted); max-width: 220px; }
/* Foto asli yang diunggah admin selalu mengikuti bentuk kotak induknya
   (jurnal-cover, karya inovasi, kehidupan kampus, dll.), berapa pun rasio
   aslinya - dipotong rapi dengan object-fit, bukan tampil mentah. */
.photo-ph img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Foto utuh tanpa terpotong di bingkai berasio tetap (rasio foto apa pun: 1:1, 3:4, 4:3):
   .foto-isi = foto asli di-contain; .foto-latar = salinan foto yang sama, cover + buram,
   mengisi sisa bingkai supaya tidak ada pita kosong. object-position atas: sisa ruang
   foto lanskap jatuh ke bawah, tempat keterangan menumpang. */
.foto-utuh{ overflow: hidden; }
.foto-utuh img.foto-latar{ transform: scale(1.15); filter: blur(18px) brightness(.8) saturate(1.1); }
.foto-utuh img.foto-isi{ z-index: 1; object-fit: contain; object-position: 50% 0; }

/* ---------- Skip link ---------- */
.skip-link{
  position: absolute; left: -999px; top: 0;
  background: var(--mbs-ink); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) 0; z-index: 2000;
}
.skip-link:focus{ left: 0; }

/* ---------- Topbar ---------- */
/* Gelap (--mbs-dark, warna footer) dengan teks putih, di atas navbar bergradasi.
   Hanya desktop: di bawah 900px topbar disembunyikan (lihat akhir blok ini). */
.mbs-topbar{
  background: var(--mbs-dark);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
  font-size: .82rem;
}
.mbs-topbar .container-mbs{
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; gap: 16px;
}
.topbar-links{ display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
.topbar-links li:first-child{ color: rgba(255, 255, 255, .6); }
/* Ikon (dari admin) sebelum nama menu; hover = warna saja, tanpa garis bawah */
.topbar-links a, .topbar-actions a{ display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.topbar-links a i, .topbar-actions a i{ font-size: .95em; line-height: 1; opacity: .85; transition: opacity var(--dur), transform var(--dur) var(--ease); }
.topbar-links a:hover i, .topbar-actions a:hover i{ opacity: 1; transform: translateY(-1px); }
.topbar-links a{ color: rgba(255, 255, 255, .86); transition: color var(--dur); }
.topbar-links a:hover{ color: var(--mbs-mint); }
.topbar-actions{ display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.topbar-actions a{ font-weight: 600; color: #fff; transition: color var(--dur), background var(--dur); }
.topbar-actions a:hover{ color: var(--mbs-mint); }
/* Tombol aksen: pil hijau MBS, menonjol di atas latar gelap */
.topbar-actions a.is-accent{ padding: 3px 12px; border-radius: var(--r-pill); background: var(--mbs-green); color: #fff; }
.topbar-actions a.is-accent:hover{ background: var(--mbs-green-dark); color: #fff; }
.topbar-actions a.is-accent i{ opacity: 1; }
.mbs-topbar :focus-visible{ outline: 2px solid var(--mbs-mint); outline-offset: 3px; }
/* Pengunjung yang sudah masuk dengan Google: foto + nama depan, tombol Keluar */
.topbar-user{ display: inline-flex; align-items: center; gap: 6px; }
.topbar-user img{ width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.topbar-logout{ margin: 0; }
.topbar-logout button{ border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: #fff; cursor: pointer; }
.topbar-logout button:hover{ color: var(--mbs-mint); }
.mbs-navbar :focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.mbs-navbar .mbs-dropdown :focus-visible{ outline-color: var(--mbs-blue-light); }
@media (max-width: 899.98px){ .mbs-topbar{ display: none; } }

/* ---------- Navbar ---------- */
.mbs-navbar{
  position: sticky; top: 0; z-index: 1030;
  /* inset atas = 0 di Safari biasa, >0 saat dibuka sebagai PWA layar penuh */
  height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex; align-items: center;
  background: var(--mbs-grad-nav);
  color: #fff;
  transition: height var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mbs-navbar.is-scrolled{ height: calc(var(--nav-h-scrolled) + env(safe-area-inset-top)); box-shadow: 0 14px 34px rgba(5, 59, 36, .28); }
.mbs-navbar .container-mbs{ display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.mbs-brand{ display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--mbs-ink); flex-shrink: 0; }
.mbs-brand .brand-mark{
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--mbs-grad-main); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}
.mbs-brand .brand-text small{ display: block; font-size: .72rem; font-weight: 600; color: var(--mbs-muted); }
/* Brand di navbar hijau: teks putih, kotak "M" putih (gradasi hijau-biru tenggelam di latar hijau).
   Brand di panel offcanvas (latar putih) tetap memakai aturan di atas. */
.mbs-navbar .mbs-brand{ color: #fff; }
.mbs-navbar .mbs-brand .brand-mark{ background: #fff; color: var(--mbs-green-dark); }
.mbs-navbar .mbs-brand .brand-text small{ color: rgba(255,255,255,.82); }
/* Kotak brand berisi logo kampus (menu HP, footer): latar putih supaya lambang biru-kuning jelas di atas putih maupun gelap */
.brand-mark.brand-mark--logo{ flex-shrink: 0; width: 44px; height: 44px; padding: 3px; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 2px 8px rgba(13, 43, 54, .12); }
.footer-brand .brand-mark.brand-mark--logo{ background: #fff; }

/* Pita logo di navbar: kartu putih vertikal yang menggantung dari atas navbar
   melewati tepi bawahnya, ujung bawah berbentuk V dengan garis chevron hijau.
   Hanya di navbar; brand di offcanvas dan footer tetap kotak "M" biasa. */
.mbs-navbar .container-mbs{ align-self: stretch; }
.mbs-navbar .mbs-brand{ align-self: stretch; align-items: center; }
.mbs-navbar .brand-pita{
  --pita-v: 14px;
  position: relative; align-self: flex-start; flex-shrink: 0;
  width: 66px; height: calc(var(--nav-h) + 30px);
  padding-top: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pita-v)), 50% 100%, 0 calc(100% - var(--pita-v)));
  filter: drop-shadow(0 8px 14px rgba(5, 59, 36, .22));
  transition: height var(--dur) var(--ease);
}
.mbs-navbar .brand-pita::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  background: var(--mbs-green-dark);
  clip-path: polygon(0 0, 50% 13px, 100% 0, 100% 4px, 50% 17px, 0 4px);
}
.mbs-navbar .brand-pita-logo{ width: 42px; height: 42px; border-radius: 11px; object-fit: cover; }
/* min-content: setiap kata satu baris, jadi tahun selalu di bawah "MILAD" (desktop & HP) */
.mbs-navbar .brand-pita-cap{
  width: min-content; text-align: center; line-height: 1.15;
  font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mbs-green-dark);
}
.mbs-navbar.is-scrolled .brand-pita{ height: calc(var(--nav-h-scrolled) + 26px); }
@media (max-width: 575.98px){
  .mbs-navbar .brand-pita{ width: 54px; height: calc(var(--nav-h) + 22px); padding-top: 9px; gap: 4px; --pita-v: 11px; }
  .mbs-navbar.is-scrolled .brand-pita{ height: calc(var(--nav-h-scrolled) + 20px); }
  .mbs-navbar .brand-pita-logo{ width: 34px; height: 34px; border-radius: 9px; }
  .mbs-navbar .brand-pita-cap{ font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce){ .mbs-navbar .brand-pita{ transition: none; } }

.mbs-menu{ display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.mbs-menu a{ font-weight: 600; font-size: .95rem; color: var(--mbs-ink); position: relative; padding: 6px 0; }
.mbs-menu a::after{
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--mbs-grad-main); transition: width var(--dur) var(--ease);
}
.mbs-menu a:hover::after, .mbs-menu a.is-active::after{ width: 100%; }
.mbs-navbar .mbs-menu > li > a{ color: #fff; }
.mbs-navbar .mbs-menu > li > a::after{ background: var(--mbs-mint); }
/* Beranda = ikon rumah bulat; aktif/hover ditandai latar, bukan garis bawah */
.mbs-navbar .mbs-menu > li > a.mbs-menu-home{
  width: 40px; height: 40px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.12rem; line-height: 1; background: rgba(255,255,255,.12); transition: background var(--dur) var(--ease);
}
.mbs-navbar .mbs-menu > li > a.mbs-menu-home::after{ display: none; }
.mbs-navbar .mbs-menu > li > a.mbs-menu-home:hover, .mbs-navbar .mbs-menu > li > a.mbs-menu-home.is-active{ background: rgba(255,255,255,.26); }
.mbs-navbar .mbs-menu > li > a.mbs-menu-home:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.mbs-menu-home-ic{ margin-inline-end: 10px; color: var(--mbs-teal); }

/* Dropdown menu: popover melayang di navbar desktop, akordeon di offcanvas mobile */
.has-dropdown{ position: relative; }
.mbs-menu-toggle{
  display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .95rem; color: var(--mbs-ink); padding: 6px 0;
}
.mbs-menu-toggle i{ font-size: .62rem; transition: transform var(--dur) var(--ease); }
.has-dropdown.is-open > .mbs-menu-toggle i,
.has-dropdown:hover > .mbs-menu-toggle i{ transform: rotate(180deg); }
.mbs-dropdown{ list-style: none; margin: 0; padding: 0; }
.mbs-dropdown li a::after{ display: none; }

/* --- Popover di navbar desktop --- */
.mbs-navbar .mbs-dropdown{
  position: absolute; top: 100%; left: 50%; min-width: 250px;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 10px; z-index: 1031;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
}
.mbs-navbar .has-dropdown:hover .mbs-dropdown,
.mbs-navbar .has-dropdown.is-open .mbs-dropdown,
.mbs-navbar .has-dropdown:focus-within .mbs-dropdown{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.mbs-navbar .mbs-dropdown li a{
  display: block; padding: 9px 14px; border-radius: var(--r-sm);
  font-size: .87rem; font-weight: 600; color: var(--mbs-ink); white-space: nowrap;
}
.mbs-navbar .mbs-dropdown li a:hover,
.mbs-navbar .mbs-dropdown li a:focus-visible,
.mbs-navbar .mbs-dropdown li a.is-active{ background: var(--mbs-grad-soft); color: var(--mbs-teal); }
.has-dropdown.has-active-child > .mbs-menu-toggle{ color: var(--mbs-teal); }
.mbs-navbar .mbs-menu-toggle{ color: #fff; }
.mbs-navbar .mbs-menu-toggle:hover{ color: var(--mbs-mint); }
/* teks mint di hijau < 4.5:1, jadi menu induk yang aktif ditandai garis bawah mint */
.mbs-navbar .has-dropdown.has-active-child > .mbs-menu-toggle{ color: #fff; box-shadow: inset 0 -2px 0 var(--mbs-mint); }

/* --- Akordeon di panel offcanvas mobile --- */
.mbs-offcanvas-panel .has-dropdown{ width: 100%; }
.mbs-offcanvas-panel .mbs-menu-toggle{ width: 100%; justify-content: space-between; }
.mbs-offcanvas-panel .mbs-dropdown{ max-height: 0; overflow: hidden; transition: max-height 360ms var(--ease); }
.mbs-offcanvas-panel .has-dropdown.is-open .mbs-dropdown{ max-height: 600px; }
.mbs-offcanvas-panel .mbs-dropdown li a{
  display: block; padding: 10px 0 10px 16px; font-size: .88rem; font-weight: 600; color: var(--mbs-muted);
}
.mbs-offcanvas-panel .mbs-dropdown li a:hover,
.mbs-offcanvas-panel .mbs-dropdown li a:focus-visible,
.mbs-offcanvas-panel .mbs-dropdown li a.is-active{ color: var(--mbs-teal); }
@media (prefers-reduced-motion: reduce){
  .mbs-dropdown, .mbs-menu-toggle i{ transition: none; }
}

.mbs-nav-tools{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-icon-btn{
  width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  color: var(--mbs-ink); cursor: pointer; transition: background var(--dur);
}
.nav-icon-btn:hover{ background: rgba(11,138,78,.1); color: var(--mbs-teal); }
.mbs-navbar .nav-icon-btn{ color: #fff; }
.mbs-navbar .nav-icon-btn:hover{ background: rgba(255,255,255,.16); color: #fff; }

.lang-switch{
  display: flex; background: #EDF3F0; border-radius: var(--r-pill); padding: 4px; gap: 2px;
}
.lang-switch button{
  border: none; background: transparent; padding: 6px 12px; border-radius: var(--r-pill);
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; color: var(--mbs-muted); cursor: pointer;
  transition: background var(--dur), color var(--dur);
}
.lang-switch button.is-active{ background: var(--mbs-grad-main); color: #fff; }
/* Di navbar hijau: wadah digelapkan (teks putih tetap kontras di ujung terang), tombol aktif putih */
.mbs-navbar .lang-switch{ background: rgba(0, 0, 0, .2); }
.mbs-navbar .lang-switch button{ color: #fff; }
.mbs-navbar .lang-switch button:hover{ background: rgba(255,255,255,.12); }
.mbs-navbar .lang-switch button.is-active{ background: #fff; color: var(--mbs-green-dark); }

.navbar-toggler-mbs{
  display: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  border: 1.5px solid rgba(255,255,255,.45); background: rgba(0, 0, 0, .12); color: #fff;
  align-items: center; justify-content: center;
  font-size: 1.3rem; cursor: pointer;
}
.navbar-toggler-mbs:hover{ background: rgba(255,255,255,.16); }
/* 992-1279px: 7 menu utama (sejak menu PMB) + alat kanan tidak muat dengan jarak 30px */
@media (min-width: 992px) and (max-width: 1279.98px){ .mbs-navbar .mbs-menu{ gap: 18px; } }
/* 992-1099px: sejak menu Pengumuman, jarak 18px masih meluber ~50px (diukur di 992) */
@media (min-width: 992px) and (max-width: 1099.98px){ .mbs-navbar .mbs-menu{ gap: 12px; } .mbs-navbar .mbs-menu > li > a, .mbs-navbar .mbs-menu-toggle{ font-size: .88rem; } }
@media (max-width: 991.98px){
  /* Hanya menu di navbar atas yang disembunyikan; ".mbs-menu" di dalam
     offcanvas (selector sama) tidak boleh ikut tersembunyi, atau panel
     mobile akan terbuka kosong tanpa daftar menu. */
  .mbs-navbar .mbs-menu{ display: none; }
  .navbar-toggler-mbs{ display: flex; }
}
@media (max-width: 575.98px){
  .mbs-nav-tools .lang-switch{ display: none; }
  .mbs-nav-tools .btn-mbs-primary{ display: none; }
}

/* Offcanvas mobile menu */
.mbs-offcanvas{
  position: fixed; inset: 0; z-index: 1050;
  visibility: hidden; pointer-events: none;
}
.mbs-offcanvas.is-open{ visibility: visible; pointer-events: auto; }
.mbs-offcanvas-backdrop{
  position: absolute; inset: 0; background: rgba(12,46,59,.5);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.mbs-offcanvas.is-open .mbs-offcanvas-backdrop{ opacity: 1; }
.mbs-offcanvas-panel{
  position: absolute; top: 0; right: 0; height: 100%; width: min(84vw, 340px);
  background: #fff; padding: 26px 24px; display: flex; flex-direction: column; gap: 22px;
  transform: translateX(100%); transition: transform var(--dur) var(--ease);
  overflow-y: auto;
}
.mbs-offcanvas.is-open .mbs-offcanvas-panel{ transform: translateX(0); }
.mbs-offcanvas-head{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 18px; border-bottom: 1px solid #E7EDEA; flex-shrink: 0;
}
.mbs-offcanvas-head .mbs-brand{ min-width: 0; }
.mbs-offcanvas-panel .mbs-menu{ flex-direction: column; align-items: flex-start; gap: 18px; }
.mbs-offcanvas-akun{ display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid #E7EDEA; }
.mbs-offcanvas-akun form{ margin: 0; }
.mbs-offcanvas-akun .btn-mbs{ width: 100%; justify-content: center; min-height: 44px; }
.mbs-offcanvas-akun .bi-google{ color: #1A73E8; }
.mbs-offcanvas-close{ flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: none; background: #F1F5F3; color: var(--mbs-ink); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; }

/* ---------- Hero ---------- */
.mbs-hero{
  position: relative;
  overflow: clip;
  background: var(--mbs-grad-soft);
  padding: 76px 0 110px;
}
/* Hanya blob biru kanan-bawah; blob hijau kiri-atas dihapus atas permintaan (gradasi hijau terlalu mencolok). */
.mbs-hero::after{
  content: ""; position: absolute; border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%;
  filter: blur(60px); z-index: 0; pointer-events: none;
  width: 340px; height: 340px; background: var(--mbs-blob-2); bottom: -100px; right: -80px;
  animation: mbsBlob 14s ease-in-out infinite reverse;
}
/* center: blok teks (tanpa timeline, kini di #vs-ms-prodi) seimbang terhadap gambar, tidak menyisakan ruang kosong di bawah tombol */
.mbs-hero-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.mbs-hero-title{
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.12; margin-top: 16px;
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
}
.mbs-hero-title .is-grad{ background: var(--mbs-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mbs-hero-desc{
  margin-top: 18px; font-size: 1.08rem; max-width: 560px;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.mbs-hero-title.is-fading, .mbs-hero-desc.is-fading{ opacity: 0; transform: translateY(8px); }
.mbs-hero-actions{ display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
/* Sketsa garis di belakang teks hero (isolation: z-index -1 tetap di dalam kolom teks, di atas latar hero).
   Menempati bagian ATAS kolom teks dan rata kanan (xMaxYMin), jadi dekat cincin orbit dan menjauhi
   tombol di bawah. Tipis dan pudar: dekorasi, bukan isi. */
.mbs-hero-teks{ position: relative; isolation: isolate; }
.hero-sketsa{
  position: absolute; z-index: -1; top: -56px; right: -32px; width: calc(100% + 32px); height: 68%;
  pointer-events: none; overflow: visible; opacity: .16; color: var(--mbs-teal);
}
.hero-sketsa *{ fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hero-sketsa .sk-jalur{ stroke-dasharray: 3 9; }
.hero-sketsa g{ transform-box: fill-box; transform-origin: center; }
.hero-sketsa .sk-pesawat{ color: var(--mbs-blue); animation: skPesawat 22s linear infinite; }
.hero-sketsa .sk-ekspor{ color: var(--mbs-green); animation: skMelayang 7s ease-in-out infinite reverse; }
.hero-sketsa .sk-usaha{ color: var(--mbs-blue); animation: skMelayang 8s ease-in-out -3s infinite; }
@media (max-width: 767.98px){ .hero-sketsa{ opacity: .12; top: -20px; right: -8px; width: calc(100% + 8px); height: 60%; } }
.mbs-hero-visual{
  position: relative; aspect-ratio: 4/5; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg);
}
.mbs-hero-visual .photo-ph{ background: var(--mbs-grad-main); color: #fff; }
.mbs-hero-visual .photo-ph i{ color: #fff; opacity: .85; }
.mbs-hero-visual .photo-ph span{ color: rgba(255,255,255,.85); }
/* left/bottom di DALAM kotak: .mbs-hero-visual overflow:hidden, nilai negatif dulu memotong sisi kiri badge */
.mbs-hero-badge{
  position: absolute; left: 20px; bottom: 20px; background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: 16px 20px; display: flex; align-items: center; gap: 12px;
  max-width: 230px;
}
.mbs-hero-badge .icon-box{ width: 42px; height: 42px; font-size: 1.1rem; }
.mbs-hero-badge strong{ display: block; font-size: 1.1rem; color: var(--mbs-ink); }
.mbs-hero-badge span{ font-size: .78rem; color: var(--mbs-muted); }

/* Posisi (menjorok 40px ke hero) diatur di blok "Banner foto": bar ini anak grid .mbs-banner. */
.mbs-stats-overlap{ position: relative; z-index: 5; }
/* Desktop: satu baris, kolom sebanyak jumlah statistik (diatur admin, kini 6). HP: 3 / 2 kolom di bawah. */
.mbs-stats{
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px;
  background: var(--mbs-grad-nav); /* sama dengan navbar */
  border-radius: 0; box-shadow: var(--shadow-md); padding: 28px 20px;
}
.stat-item{ text-align: center; }
.stat-item .num{
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: #fff;
}
.stat-item .num::after{ content: attr(data-suffix); }
.stat-item .label{ font-size: .78rem; margin-top: 4px; color: rgba(255,255,255,.85); }

/* ---------- Hero slider mobile: berita gaya 3D Coverflow (Swiper.js) ----------
   Tampil DI ATAS judul hero (bukan menggantikan visual default di bawah -
   keduanya tampil bersamaan). Rule dasar (sembunyi) WAJIB ditulis sebelum
   media query 767.98 di bawah - kalau dibalik, rule tak bersyarat ini
   menang atas media query di urutan sumber biarpun sama-sama cocok
   (spesifisitas sama), jadi slider tidak akan pernah muncul di HP walau
   media query-nya aktif (pernah kejadian, lihat catatan progres). */
.mbs-hero-mslider{ display: none; }

/* 992-1199px tetap dua kolom (laptop kecil/tablet landscape): poster 4:5 di kolom kanan */
.mbs-hero-grid > *{ min-width: 0; }
@media (max-width: 1199.98px){ .mbs-hero-badge{ left: 14px; bottom: 14px; padding: 12px 14px; max-width: 200px; } }
@media (max-width: 991.98px){
  /* minmax(0,1fr), bukan 1fr: kolom 1fr = minmax(auto,1fr), lebar minimumnya
     ikut melar sebesar total lebar slide Swiper di dalamnya, sehingga judul,
     tombol, dan gambar hero ikut lebih lebar dari layar lalu terpotong. */
  .mbs-hero-grid{ grid-template-columns: minmax(0, 1fr); }
  /* Poster potret 4:5 utuh (dulu 16:10 memotong bagian atas poster), lebar dibatasi supaya tidak setinggi layar */
  .mbs-hero-visual{ width: min(100%, 380px); margin: 0 auto; }
  .mbs-hero-badge{ display: none; }
}
@media (max-width: 767.98px){
  .mbs-hero{ padding: 0 0 32px; }
  /* Blob biru terpotong rata oleh overflow:clip tepat di batas bawah hero: itu yang membuat
     batas hero terlihat sebagai garis di layar sempit. */
  .mbs-hero::after{ display: none; }
  /* Di HP statistik tidak lagi ditarik naik menumpuk visual hero: jarak
     visual -> statistik = padding-bawah hero (32px). */
  .mbs-stats-overlap{ margin-top: 0; }
  /* Kartu mengambang, sudut sama dengan kartu visual hero di atasnya */
  .mbs-stats{ grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); row-gap: 22px; padding: 22px 16px; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
  .mbs-stats .stat-item:nth-child(4), .mbs-stats .stat-item:nth-child(5){ grid-column: span 1; }
  .mbs-hero-grid{ gap: 28px; }
  .mbs-hero-mslider{
    display: block;
    /* lepas dari padding .container-mbs supaya slide kiri/kanan ikut
       mengintip sampai tepi layar, bukan terkurung kotak 420px */
    width: auto; margin: 0 calc(-1 * var(--gx-r)) 0 calc(-1 * var(--gx-l));
    /* bawah lebih besar: ruang untuk dots (absolute, milik Swiper) supaya
       tidak menimpa kartu */
    padding: 22px 0 46px;
    background: var(--mbs-dark);
    /* Pagination diatur lewat variabel resmi Swiper, bukan menimpa aturan
       posisinya - .swiper-pagination bawaan sudah absolute, left:0,
       width:100%, text-align:center, jadi otomatis tepat di tengah. */
    --swiper-pagination-bottom: 18px;
    --swiper-pagination-bullet-size: 7px;
    --swiper-pagination-bullet-horizontal-gap: 4px;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: .4;
    --swiper-pagination-color: var(--mbs-mint);
  }
}
/* Lebar slide dibatasi 340px supaya di HP besar / tablet kecil (576-767px)
   kartunya tidak tumbuh terlalu tinggi; rasio 4:5 menjaga tinggi slider
   di bawah separuh layar. */
/* Struktur minimal ditulis sendiri (biasanya dari swiper-bundle.css CDN):
   kalau CDN lambat/gagal, slide tetap satu baris horizontal - bukan 15
   kartu bertumpuk vertikal setinggi ~3800px. */
.mbs-hero-mslider{ position: relative; overflow: hidden; --mslide-w: min(72%, 340px); }
.mbs-hero-mslider .swiper-wrapper{ display: flex; }
.mbs-hero-mslider .swiper-slide{ flex-shrink: 0; position: relative; display: block; } /* slide = <a>: block supaya lebar/rasio berlaku walau CSS Swiper gagal dimuat */
.mbs-hero-mslider .swiper-slide:focus-visible{ outline: 3px solid var(--mbs-mint); outline-offset: -3px; }
/* sebelum Swiper aktif: kartu pertama di tengah (margin % dihitung dari lebar
   wrapper penuh; padding % malah memperkecil dasar lebar slide) */
.mbs-hero-mslider:not(.swiper-initialized) .swiper-wrapper{ gap: 16px; }
.mbs-hero-mslider:not(.swiper-initialized) .swiper-slide:first-child{ margin-left: calc((100% - var(--mslide-w)) / 2); }
.mbs-hero-mslider .swiper-slide{
  width: var(--mslide-w); aspect-ratio: 4 / 5;
  border-radius: var(--r-xl); overflow: hidden;
  transition: opacity 420ms var(--ease), filter 420ms var(--ease);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
/* Peredup hanya setelah Swiper aktif: kelas -active dipasang JS, jadi kalau
   JS belum termuat / diblokir semua slide tetap terang, bukan redup semua. */
.mbs-hero-mslider.swiper-initialized .swiper-slide{ opacity: .55; filter: brightness(.8); }
.mbs-hero-mslider.swiper-initialized .swiper-slide-active{ opacity: 1; filter: none; }
.mbs-hero-mslide .photo-ph{ background: var(--mbs-grad-soft); }
.mbs-hero-mslide-info{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px 16px 18px;
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(12,46,59,.85) 52%, rgba(12,46,59,.94));
}
.mbs-hero-mslide-tag{
  display: inline-block; padding: 4px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.2); color: #fff; font-size: .64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.mbs-hero-mslide-title{
  font-family: var(--font-display); font-size: .96rem; line-height: 1.32; color: #fff; margin: 0;
  overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mbs-hero-mslider .swiper-pagination-bullet{ transition: width 320ms var(--ease), background 320ms var(--ease); }
.mbs-hero-mslider .swiper-pagination-bullet-active{ width: 22px; border-radius: var(--r-pill); }
@media (max-width: 359.98px){
  .mbs-hero-mslider{ padding-top: 18px; --swiper-pagination-bullet-horizontal-gap: 3px; }
  .mbs-hero-mslide-info{ padding: 28px 12px 14px; }
  .mbs-hero-mslide-title{ font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce){
  .mbs-hero-mslider .swiper-slide{ transition: none; }
}
@media (max-width: 575.98px){
  .mbs-hero-title{ font-size: clamp(1.55rem, 7.2vw, 1.9rem); line-height: 1.18; overflow-wrap: break-word; }
  .mbs-hero-desc{ font-size: .94rem; margin-top: 14px; }
  .mbs-hero-actions{ margin-top: 22px; gap: 10px; }
  .mbs-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mbs-hero-actions .btn-mbs{ flex: 1 1 auto; }
}

/* Cincin orbit di belakang gambar, menggemakan bola dunia + pesawat di poster.
   Warna hijau/biru MBS pekat karena latar hero terang (--mbs-grad-soft).
   Hanya >=1200px: di bawah itu hero satu kolom dan cincin akan melintasi tombol. */
@media (min-width: 1200px){
  /* Kontainer kini selebar layar: tanpa batas ini poster 4:5 ikut melebar ~780px
     dan hero lebih tinggi dari layar. justify-self:end = rapat ke tepi luar (juga RTL). */
  /* Lebar juga diturunkan dari tinggi layar (poster 4:5 -> lebar = tinggi x .8): 260px =
     topbar + navbar + padding atas hero + sedikit ruang, jadi poster tampil utuh atas-bawah
     tanpa digulir. Minimal 420px supaya tidak terlalu kecil di layar pendek. */
  .mbs-hero-media{ position: relative; width: min(100%, 600px, max(420px, calc((100vh - 260px) * .8))); justify-self: end; }
  .mbs-hero-visual{ z-index: 1; } /* di atas cincin */
  .mbs-hero-media::before, .mbs-hero-media::after{
    content: ""; position: absolute; left: 50%; top: 50%; z-index: 0;
    aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -50%);
  }
  .mbs-hero-media::before{ width: 128%; border: 1px solid rgba(11, 138, 78, .26); }
  .mbs-hero-media::after{
    width: 152%; border: 1.5px dashed rgba(10, 91, 168, .3);
    background: radial-gradient(circle at 50% 5px, var(--mbs-green) 0 4.5px, transparent 5.5px);
    animation: mbsOrbit 90s linear infinite;
  }
}

/* ---------- Section Visi Misi Prodi (#vs-ms-prodi) ----------
   Judul bergradasi tema; visi = kartu gradasi utama (teks putih), misi = kartu putih
   dengan nomor bergradasi; timeline di bawahnya. Kartu kosong disembunyikan di markup. */
.vm-prodi{ background: var(--mbs-bg); }
.vm-judul{
  text-align: center; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.2;
  overflow-wrap: anywhere; min-width: 0;
  background: var(--mbs-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vm-grid{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: stretch;
  max-width: 1120px; margin: 40px auto 0;
}
.vm-grid.is-tunggal{ grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.vm-visi, .vm-misi{ border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); }
.vm-visi h3, .vm-misi h3{
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.vm-visi h3 i, .vm-misi h3 i{ font-size: 1.05rem; }
.vm-visi{
  color: #fff; box-shadow: var(--shadow-md);
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .1) 1px, transparent 0) 0 0 / 22px 22px,
    var(--mbs-grad-main);
}
.vm-visi h3{ color: rgba(255, 255, 255, .85); }
.vm-visi p{ margin-top: 18px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.12rem, 1.7vw, 1.4rem); line-height: 1.5; }
.vm-misi{ background: #fff; box-shadow: var(--shadow-sm); }
.vm-misi h3{ color: var(--mbs-teal); }
.vm-misi ol{ list-style: none; counter-reset: misi; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.vm-misi li{ counter-increment: misi; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--mbs-muted); line-height: 1.55; }
.vm-misi li::before{
  content: counter(misi); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mbs-grad-main); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .85rem;
}
.vm-prodi .vt{ margin: 56px auto 0; }
@media (max-width: 899.98px){ .vm-grid{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px){
  .vm-grid{ margin-top: 28px; gap: 16px; }
  .vm-visi, .vm-misi{ border-radius: var(--r-md); }
  .vm-misi li{ grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: .92rem; }
  .vm-misi li::before{ width: 28px; height: 28px; font-size: .78rem; }
  .vm-prodi .vt{ margin-top: 36px; }
}

/* ---------- Timeline visi misi (di section #vs-ms-prodi) ----------
   Zigzag: bulatan tahun naik (genap) / turun (ganjil) di atas garis gelombang bergradasi
   (SVG dibuat di home.php dari jumlah tahap, jadi selalu pas). Keterangan di sisi luar
   bulatan. --c per tahap dari markup (satu sumber dengan gradasi garis).
   Geometri desktop HARUS sama dengan viewBox SVG: zona 150px, pusat y=40 / 110.
   HP (<576px): vertikal, bulatan kiri/kanan berselang, keterangan di kanan; baris 96px,
   pusat x=34 / 86 dalam jalur 120px (= viewBox SVG vertikal). */
.vt{
  --vt-zona: 150px; --vt-bul: 84px; --vt-ruang: 64px;
  position: relative; max-width: 1000px; margin: 44px auto 0; padding-block: var(--vt-ruang);
}
.vt.reveal{ opacity: 1; transform: none; } /* .reveal hanya pemicu is-visible; animasi per tahap di bawah */
/* Garis "tergambar" kiri -> kanan lewat clip-path (bukan stroke-dashoffset: pathLength +
   non-scaling-stroke salah hitung di Chrome, garis berhenti di tengah) */
.vt-gelombang{
  position: absolute; pointer-events: none; overflow: visible;
  clip-path: inset(-10px 100% -10px -10px); transition: clip-path 1.6s var(--ease);
}
.vt-gelombang path{ fill: none; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vt.is-visible .vt-gelombang{ clip-path: inset(-10px -10px -10px -10px); }
.vt-gelombang-h{ left: 0; top: var(--vt-ruang); width: 100%; height: var(--vt-zona); }
.vt-gelombang-v{ display: none; }
.vt-daftar{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.vt-item{ --pusat: 40px; position: relative; height: var(--vt-zona); }
.vt-item.is-turun{ --pusat: 110px; }

/* Bulatan tahun: warna tahap, cincin putih, bayangan berwarna, denyut halus */
.vt-year{
  position: absolute; left: 50%; top: calc(var(--pusat) - var(--vt-bul) / 2);
  width: var(--vt-bul); height: var(--vt-bul); margin-left: calc(var(--vt-bul) / -2);
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--c), #fff 28%), var(--c) 70%);
  border: 5px solid #fff; box-shadow: 0 12px 24px -8px color-mix(in oklab, var(--c), transparent 35%);
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: .02em;
  opacity: 0; transform: scale(.6);
  transition: opacity 500ms var(--ease), transform 650ms cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: calc(var(--i) * 140ms + 300ms);
}
.vt-year::after{
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  animation: vtPing 2.8s ease-out infinite; animation-delay: calc(var(--i) * .45s);
}
/* Keterangan di sisi luar: di atas bulatan yang naik, di bawah bulatan yang turun */
.vt-label{
  position: absolute; left: 50%; width: min(170px, 190%); transform: translateX(-50%);
  text-align: center; font-family: var(--font-display); font-weight: 800; font-size: .9rem; line-height: 1.3;
  color: color-mix(in oklab, var(--c), #000 15%);
  bottom: calc(100% - var(--pusat) + var(--vt-bul) / 2 + 12px);
  opacity: 0; transition: opacity 500ms var(--ease) calc(var(--i) * 140ms + 550ms);
}
.vt-item.is-turun .vt-label{ bottom: auto; top: calc(var(--pusat) + var(--vt-bul) / 2 + 12px); }
.vt.is-visible .vt-year{ opacity: 1; transform: none; }
.vt.is-visible .vt-label{ opacity: 1; }

@media (max-width: 767.98px){
  .vt{ --vt-bul: 66px; --vt-ruang: 56px; }
  .vt-year{ font-size: .95rem; border-width: 4px; }
  .vt-label{ font-size: .78rem; }
}
/* Kolom sempit: keterangan lebih lebar dari kolomnya, jadi tahap pertama/terakhir ditahan rata tepi
   supaya tidak keluar layar (dulu "Daya Saing Global" menimbulkan scroll ke samping di 576-767px) */
@media (min-width: 576px) and (max-width: 991.98px){
  .vt-item:first-child .vt-label{ left: 0; transform: none; text-align: left; }
  .vt-item:last-child .vt-label{ left: auto; right: 0; transform: none; text-align: right; }
}
/* HP: vertikal, bulatan kiri/kanan berselang di jalur 120px, keterangan di kanan jalur */
@media (max-width: 575.98px){
  .vt{ --vt-bul: 60px; padding: 0; max-width: 340px; }
  .vt-gelombang-h{ display: none; }
  .vt-gelombang-v{ display: block; left: 0; top: 0; width: 120px; height: 100%; clip-path: inset(-10px -10px 100% -10px); } /* HP: tergambar atas -> bawah */
  .vt-daftar{ grid-auto-flow: row; grid-auto-columns: auto; }
  .vt-item, .vt-item.is-turun{ --pusat: 34px; height: 96px; }
  .vt-item.is-turun{ --pusat: 86px; }
  .vt-year{ left: var(--pusat); top: 18px; }
  .vt-label, .vt-item.is-turun .vt-label{
    left: 134px; right: 0; top: 50%; bottom: auto; width: auto; transform: translateY(-50%);
    text-align: start; font-size: .88rem;
  }
}

/* ---------- Banner foto ---------- */
/* Statistik + foto ditumpuk dalam satu grid (>=768px). Dulu foto ditarik naik -40px ke
   bawah bar statistik, padahal bar itu sendiri setinggi ~170px: foto baru mulai ~87px di
   bawah hero dan sisanya tampil sebagai pita putih kiri-kanan bar. Sekarang:
   - foto (baris 1-2) mulai TEPAT di batas bawah hero, berapa pun tinggi bar statistik;
   - bar statistik (baris 1) berpusat PERSIS di garis sambungan hero/foto: translateY(-50%)
     dari tingginya sendiri, jadi setengah di hero dan setengah di foto di semua lebar layar;
   - judul (baris 2) selalu di bawah bar, tidak pernah tertutup. */
.mbs-banner{
  position: relative; z-index: 1; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr;
}
/* margin-bawah negatif = setengah tinggi bar, supaya baris 1 hanya setinggi bagian bar yang
   menumpang di foto dan judul berpusat tepat di sisa foto. Tinggi bar diturunkan dari isinya:
   padding 2x28 + jarak 4 + label .78rem + angka clamp(...) x line-height 1.66 (diukur). */
.mbs-banner > .mbs-stats-overlap{
  grid-area: 1 / 1; transform: translateY(-50%);
  margin-bottom: calc(-.5 * (60px + .78rem * 1.6 + 1.66 * clamp(1.5rem, 2.4vw, 2.1rem)));
}
/* Tepi atas foto memudar ke hero, bukan garis tegas: foto diperpanjang --pudar ke atas (padding + margin
   negatif saling meniadakan, jadi tinggi tata letak tetap 16:5) dan bagian itu saja yang di-mask, sehingga
   foto sudah pekat penuh tepat di batas hero. Pudarnya kira-kira setinggi separuh atas bar statistik. */
.mbs-banner-photo{
  --pudar: 90px;
  grid-area: 1 / 1 / 3 / 2; box-sizing: content-box; aspect-ratio: 16/5; min-height: 0; border-radius: 0; position: relative;
  padding-top: var(--pudar); margin-top: calc(-1 * var(--pudar));
  -webkit-mask: linear-gradient(to bottom, transparent, #000 var(--pudar));
          mask: linear-gradient(to bottom, transparent, #000 var(--pudar));
}
/* Pembatas lengkung khusus HP, warna dari token tema (stop-color tidak bisa memakai var() lewat atribut) */
.mbs-banner-gelombang{ display: none; }
.mbs-hex-hijau{ fill: var(--mbs-green); }
.mbs-hex-teal{ fill: var(--mbs-teal); }
.mbs-banner-ombak stop:nth-child(1){ stop-color: var(--mbs-green); }
.mbs-banner-ombak stop:nth-child(2){ stop-color: var(--mbs-teal); }
.mbs-banner-ombak stop:nth-child(3){ stop-color: var(--mbs-blue); }
/* Pembatas banner -> Visi Misi: gradasi tema versi gelap dengan dua list kecil --mbs-dark.
   List luar diencerkan supaya kedua list tetap terbaca terpisah, bukan menyatu jadi satu pita tebal. */
#mbs-ombak-tema stop:nth-child(1){ stop-color: var(--mbs-green-dark); }
#mbs-ombak-tema stop:nth-child(2){ stop-color: color-mix(in oklab, var(--mbs-teal), var(--mbs-dark) 25%); }
#mbs-ombak-tema stop:nth-child(3){ stop-color: color-mix(in oklab, var(--mbs-blue), var(--mbs-dark) 25%); }
.mbs-ombak-list{ fill: var(--mbs-dark); }
.mbs-ombak-muda{ fill: color-mix(in oklab, var(--mbs-dark), var(--mbs-bg) 62%); }
/* Pembatas bawah menumpang tepi bawah foto (y 44 dari 120 = margin .3667), jadi section berikutnya mendapat
   padding .4 tinggi ombak: batas bawah lapisan termuda di bawah lebar judul paling jauh di y 92 dari 120. */
.mbs-banner, .mbs-banner + section{ --ombak: clamp(130px, 11vw, 210px); }
.mbs-banner + section{ padding-top: calc(var(--ombak) * .4 + 10px); }
.mbs-banner-ombak{ display: block; position: absolute; z-index: 3; top: 100%; left: 0; width: 100%; height: var(--ombak); margin-top: calc(var(--ombak) * -.3667); pointer-events: none; }
.mbs-gelombang-mint{ fill: var(--mbs-mint); }
/* Lapisan gelap lebih pekat + vinyet di tengah: foto mundur, judul menonjol */
.mbs-banner-photo::after{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(4, 20, 26, .38), transparent 75%),
    linear-gradient(135deg, rgba(8, 34, 44, .82), rgba(8, 52, 96, .74));
  pointer-events: none;
}
.mbs-banner-caption{
  grid-area: 2 / 1; position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px 24px; color: #fff;
}
/* Gradasi arah navbar (hijau -> teal -> biru) versi terang supaya kontras di latar gelap.
   drop-shadow, bukan text-shadow: text-shadow tembus ke teks transparan (background-clip) dan membuatnya kusam. */
.mbs-banner-caption h2{
  font-size: clamp(1.5rem, 4vw, 2.6rem); margin: 0; color: #fff; font-weight: 800;
  background: linear-gradient(100deg, #9BF0C4 0%, #6FE0C8 45%, #9CCBFF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
}
.mbs-banner-caption p{
  margin-top: 10px; font-size: clamp(.92rem, 1.6vw, 1.15rem); max-width: 640px;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
/* Hiasan segi enam (kiri) + lengkungan (kanan) + foto dekan (kiri) dan ketua prodi (kanan), menempel ke dasar banner.
   Lengkungan = sapuan cekung dari tepi luar (tinggi) turun meruncing ke dasar, DI DEPAN foto.
   Bentuknya = area di luar elips yang berpusat di pojok atas-dalam kotak (mask radial-gradient);
   tiga lapis dengan elips makin besar = pita hijau tema, pita hijau muda, isi gradasi tema
   (sama dengan pita pertama). --pim-w = lebar foto, juga memberi ruang kiri-kanan judul. */
.mbs-banner{ --pim-w: clamp(120px, 14.5vw, 255px); }
.mbs-banner-lengkung, .mbs-pimpinan{ grid-area: 1 / 1 / 3 / 2; align-self: end; position: relative; pointer-events: none; }
.mbs-banner-lengkung{
  --pusat: 100% 0; /* kiri: elips berpusat di pojok kanan-atas kotak */
  z-index: 3; width: 26%; height: 50%;
  background: var(--mbs-grad-main);
  -webkit-mask: radial-gradient(ellipse 100% 100% at var(--pusat), transparent 99.5%, #000 100%);
          mask: radial-gradient(ellipse 100% 100% at var(--pusat), transparent 99.5%, #000 100%);
}
.mbs-banner-lengkung::before, .mbs-banner-lengkung::after{ content: ""; position: absolute; inset: 0; }
.mbs-banner-lengkung::before{
  background: linear-gradient(90deg, color-mix(in oklab, var(--mbs-mint), #fff 35%), var(--mbs-mint));
  -webkit-mask: radial-gradient(ellipse 102% 108% at var(--pusat), transparent 99.5%, #000 100%);
          mask: radial-gradient(ellipse 102% 108% at var(--pusat), transparent 99.5%, #000 100%);
}
.mbs-banner-lengkung::after{
  background: inherit;
  -webkit-mask: radial-gradient(ellipse 104% 118% at var(--pusat), transparent 99.5%, #000 100%);
          mask: radial-gradient(ellipse 104% 118% at var(--pusat), transparent 99.5%, #000 100%);
}
/* Sudut kiri digantikan hiasan segi enam: di depan bahu foto dekan, di belakang pembatas bawah */
.mbs-banner-lengkung-kiri{ display: none; }
.mbs-banner-hex{ display: block; position: absolute; z-index: 3; left: 0; bottom: 0; width: calc(var(--pim-w) * 1.15); height: auto; pointer-events: none; }
.mbs-banner-lengkung-kanan{
  --pusat: 0 0; justify-self: end;
  background: linear-gradient(225deg, var(--mbs-green) 0%, var(--mbs-teal) 48%, var(--mbs-blue) 100%);
}
.mbs-banner-lengkung-kanan::before{ background: linear-gradient(270deg, color-mix(in oklab, var(--mbs-mint), #fff 35%), var(--mbs-mint)); }

/* clip-path: bayangan/cahaya boleh meluas ke atas & samping, tapi dipotong rata di tepi bawah,
   supaya tidak ada bayangan di bawah garis pembatas (foto terlihat berdiri, bukan menggantung) */
.mbs-pimpinan{ z-index: 2; width: var(--pim-w); margin: 0; line-height: 0; clip-path: inset(-80px -80px 0 -80px); }
.mbs-pimpinan-kiri{ justify-self: start; margin-left: 6%; }
.mbs-pimpinan-kanan{ justify-self: end; margin-right: 6%; }
/* display:block + vertical-align:bottom = tidak ada celah baseline di bawah gambar (foto tidak menggantung);
   drop-shadow mengikuti siluet PNG transparan: cahaya putih di belakang + bayangan lembut di bawah */
.mbs-pimpinan img{
  display: block; width: 100%; height: auto; vertical-align: bottom;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, .75)) drop-shadow(0 6px 18px rgba(12, 46, 59, .3));
}
/* bottom 18%: pil duduk di atas sapuan lengkung (lengkung z-index 3 di depan foto, pil di dalam foto) */
.mbs-pimpinan figcaption{
  position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
  padding: .5em 1.3em; border-radius: var(--r-pill); white-space: nowrap; line-height: 1.2;
  background: var(--mbs-grad-main); color: #fff; box-shadow: 0 8px 18px rgba(12, 46, 59, .3), inset 0 0 0 1px rgba(255, 255, 255, .35);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(.72rem, 1.05vw, 1rem); letter-spacing: .08em; text-transform: uppercase;
}
.mbs-banner-caption{ padding-inline: max(24px, calc(var(--pim-w) + 8%)); }

/* HP: susunan lama dipertahankan persis - bar statistik di alur normal, foto 16:9 ditarik
   naik ke belakang bagian bawah bar, judul menumpang di atas foto (ukuran sama dengan foto). */
@media (max-width: 767.98px){
  /* Latar = warna akhir hero, jadi hero, sisi kartu statistik, dan pudaran foto satu permukaan tanpa batas */
  .mbs-banner{ display: block; --pim-w: 25vw; --gelombang: clamp(88px, 28vw, 160px); background: var(--mbs-soft-end); }
  /* Kartu di BELAKANG foto + lengkungan. Padding bawah = bagian kartu yang tertutup lengkungan di sisi kanan
     (tempat lengkungan paling tinggi), supaya label baris terakhir tidak ikut tertutup. */
  .mbs-banner > .mbs-stats-overlap{ transform: none; margin-bottom: 0; z-index: 1; }
  .mbs-stats{ padding-bottom: calc(10px + var(--gelombang) * .55); }
  /* Foto di depan kartu, tepi atasnya dipotong mengikuti lengkungan: lapis 1 = zona lengkung (kurva = tepi atas
     pita di .mbs-banner-gelombang, ubah keduanya bersamaan), lapis 2 = sisa foto, menumpang 1px supaya tanpa
     garis rambut. Zona lengkung ada di atas area 16:9 (judul tetap di foto). Margin .68 = dasar kartu sedikit
     di bawah titik terendah kurva (y 70 dari 110), jadi sudut bawah kartu selalu tersembunyi. */
  .mbs-banner-photo{
    --topeng: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 110' preserveAspectRatio='none'%3E%3Cpath d='M0 44C70 74 150 80 230 54C300 30 345 0 390 6V110H0Z'/%3E%3C/svg%3E") top / 100% var(--gelombang) no-repeat, linear-gradient(#000, #000) 0 calc(var(--gelombang) - 1px) / 100% 100% no-repeat;
    z-index: 2; aspect-ratio: 16/9; padding-top: var(--gelombang); margin-top: calc(var(--gelombang) * -.68);
    -webkit-mask: var(--topeng);
            mask: var(--topeng);
  }
  .mbs-banner-gelombang{ display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: var(--gelombang); }
  .mbs-banner, .mbs-banner + section{ --ombak: clamp(96px, 30vw, 170px); }
  .mbs-banner-hex{ width: 22vw; }
  .mbs-banner-caption{ position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 16/9; padding: 18px calc(21vw + 5%); } /* 21vw, bukan --pim-w: foto boleh sedikit melebihi ruang judul, judul tidak ikut menyempit */
  .mbs-banner-caption h2{ font-size: clamp(1rem, 4.6vw, 1.5rem); }
  .mbs-banner-caption p{ font-size: clamp(.72rem, 3vw, .92rem); margin-top: 6px; }
  /* tinggi dalam vw: % akan dihitung dari tinggi section termasuk bar statistik */
  .mbs-banner-lengkung, .mbs-pimpinan{ position: absolute; bottom: 0; z-index: 2; }
  .mbs-banner-lengkung{ z-index: 3; width: 26%; height: 17vw; }
  .mbs-pimpinan-kiri{ left: 0; }
  .mbs-banner-lengkung-kanan, .mbs-pimpinan-kanan{ right: 0; }
  .mbs-pimpinan-kiri{ margin-left: min(9%, 40px); } /* memberi tempat hiasan segi enam di kirinya; dibatasi supaya kepala tidak mendekati judul di layar lebar */
  .mbs-pimpinan-kanan{ margin-right: 3%; }
  .mbs-pimpinan figcaption{ font-size: .5rem; bottom: 30%; padding: .45em .8em; letter-spacing: .04em; }
}

/* ---------- Intro ---------- */
.mbs-intro{ text-align: center; }
.mbs-intro-text{ max-width: 760px; margin: 18px auto 0; font-size: 1.1rem; }

/* ---------- Akademik ---------- */
.mbs-academics{ background: var(--mbs-grad-soft); }
.academics-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.academic-tile{
  background: #fff; border-radius: var(--r-md); padding: 26px 22px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.academic-tile h3{ font-size: 1.08rem; margin-top: 16px; }
.academic-tile p{ font-size: .88rem; margin-top: 6px; }
.academic-tile a{ margin-top: 14px; font-weight: 700; font-size: .84rem; color: var(--mbs-teal); }
.academic-tile:hover{ transform: translateY(-6px); box-shadow: var(--shadow-blue-hover); background: var(--mbs-grad-main); }
.academic-tile:hover h3, .academic-tile:hover a{ color: #fff; }
.academic-tile:hover .mbs-view-ico{ background: rgba(255,255,255,.22); color: #fff; }
.academic-tile:hover p{ color: rgba(255,255,255,.85); }
.academic-tile:hover .icon-box{ background: rgba(255,255,255,.2); color: #fff; }
@media (max-width: 1199.98px){ .academics-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899.98px){ .academics-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .academic-tile{ padding: 20px 18px; } }
@media (max-width: 575.98px){ .academic-tile h3{ font-size: .98rem; } .academic-tile p{ font-size: .82rem; } }

/* ---------- Program Internasional ---------- */
.intl-card{
  background: #fff; border-radius: var(--r-md); padding: 28px 24px; box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.intl-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-blue-hover); }
.intl-icon{
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mbs-grad-main); color: #fff; font-size: 1.6rem;
}
.intl-card h3{ font-size: 1.05rem; }
.intl-card p{ font-size: .85rem; margin-top: 8px; }
@media (max-width: 899.98px){ .intl-card{ padding: 22px 18px; } .intl-icon{ width: 54px; height: 54px; font-size: 1.35rem; } }
@media (max-width: 575.98px){ .intl-card h3{ font-size: .98rem; } .intl-card p{ font-size: .8rem; } }

/* ---------- Kurikulum MBS (3 pilar) ---------- */
/* Latar sama dengan footer (--mbs-dark, datar) di semua lebar layar.
   Section Intro ("Tentang Program Studi") memakai latar gelap yang sama. */
.mbs-curriculum, .mbs-intro{ background: var(--mbs-dark); }

.mbs-curriculum .eyebrow, .mbs-intro .eyebrow{
  color: var(--mbs-mint); background: rgba(124, 214, 170, .1);
  box-shadow: inset 0 0 0 1px rgba(124, 214, 170, .28);
}
.mbs-curriculum .section-head h2, .mbs-intro .section-head h2{ color: #fff; }
.mbs-curriculum .section-head p, .mbs-intro .mbs-intro-text{ color: rgba(255, 255, 255, .74); }
.mbs-curriculum .section-more{ background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.mbs-curriculum .section-more-ico{ background: rgba(124, 214, 170, .16); color: var(--mbs-mint); }
.mbs-curriculum .section-more:hover{ background: var(--mbs-grad-main); box-shadow: var(--shadow-blue-hover); }

.curriculum-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Kartu polos transparan di atas latar gelap. --accent hanya mewarnai nomor:
   varian terang palet MBS supaya terbaca di atas --mbs-dark. */
.curriculum-card{
  --accent: var(--mbs-mint);
  border-radius: var(--r-lg); padding: 34px 28px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.curriculum-card:nth-child(2){ --accent: #5CC6A7; }
.curriculum-card:nth-child(3){ --accent: #6FB6F2; }
.curriculum-card:hover{ transform: translateY(-4px); background: rgba(255, 255, 255, .1); }
.curriculum-num{
  display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1;
  letter-spacing: .02em; color: var(--accent);
}
.curriculum-card h3{ font-size: 1.2rem; margin-top: 14px; color: #fff; }
.curriculum-card p{ font-size: .92rem; margin-top: 12px; color: rgba(255, 255, 255, .74); }
@media (max-width: 899.98px){ .curriculum-grid{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px){
  .curriculum-card{ padding: 26px 22px; }
  .curriculum-num{ font-size: 1.8rem; }
}

/* ---------- SDGs ---------- */
.sdgs-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.sdg-tile{
  border-radius: var(--r-md); padding: 24px 20px; background: var(--sdg-color, var(--mbs-green));
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sdg-tile:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.sdg-num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.22); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .95rem;
}
.sdg-tile h3{ color: #fff; font-size: 1rem; margin-top: 14px; }
.sdg-tile p{ color: rgba(255,255,255,.88); font-size: .82rem; margin-top: 8px; }
@media (max-width: 1199.98px){ .sdgs-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899.98px){ .sdgs-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .sdg-tile{ padding: 20px 18px; } }
@media (max-width: 575.98px){ .sdg-tile h3{ font-size: .92rem; } .sdg-tile p{ font-size: .78rem; } }

/* ---------- Dosen (slider kartu, pola dari C:\xampp\htdocs\lbhfh\public\assets\css\site.css,
   warna disesuaikan ke token MBS) ---------- */
.dosen-wrap{
  border-radius: var(--r-xl);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 1px, transparent 1px 26px),
    var(--mbs-grad-soft);
  box-shadow: var(--shadow-sm);
  padding: 28px 20px;
  overflow: visible;
}
.dosen-jalur{ --tampil: 2.15; --sela: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dosen-geser{
  order: 1; flex: 1 1 100%;
  display: flex; gap: var(--sela);
  list-style: none; margin: 0; padding: 6px 0 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.dosen-geser::-webkit-scrollbar{ display: none; }
.dosen-geser:focus-visible{ outline: 3px solid var(--mbs-blue-light); outline-offset: 4px; border-radius: 12px; }

.dosen-item{
  flex: 0 0 calc((100% - (var(--tampil) - 1) * var(--sela)) / var(--tampil));
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: stretch;
  --dosen-atas: var(--mbs-green); --dosen-bawah: var(--mbs-green-dark);
}
.dosen-item:nth-child(even){
  --dosen-atas: var(--mbs-teal); --dosen-bawah: var(--mbs-blue);
  margin-top: 26px;
}
.dosen-kartu{
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 5; border-radius: 22px;
  background: linear-gradient(180deg, var(--dosen-atas) 0%, var(--dosen-bawah) 100%);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dosen-kartu:hover{ transform: translateY(-5px); box-shadow: var(--shadow-blue-hover); }
.dosen-inisial{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.8rem, 6vw, 2.6rem); color: rgba(255,255,255,.55);
}
.dosen-nama{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: var(--dosen-bar, 32px);
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.06) 100%);
  color: #fff; font-weight: 800; line-height: 1;
  font-size: clamp(.82rem, 2.6vw, 1.05rem); letter-spacing: .02em;
  pointer-events: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.dosen-jabatan{
  display: block; margin: 14px auto 0; width: 86%; padding: 7px 12px;
  background: #fff; color: var(--mbs-ink);
  border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
  font-size: .74rem; font-weight: 700; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dosen-panah{
  width: 46px; height: 46px; flex: 0 0 auto;
  border: none; border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--mbs-teal); font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.dosen-panah:hover{ background: var(--mbs-grad-main); color: #fff; transform: scale(1.07); }
.dosen-panah:disabled{ opacity: .35; cursor: default; transform: none; }
.dosen-jalur.is-geser-tanpa-panah .dosen-panah{ display: none; }
.dosen-panah-kiri{ order: 2; margin-left: auto; }
.dosen-panah-kanan{ order: 3; margin-right: auto; }

@media (min-width: 576px){ .dosen-jalur{ --tampil: 2.6; --sela: 14px; } }
@media (min-width: 768px){
  .dosen-jalur{ --tampil: 3.2; --sela: 16px; }
  .dosen-item{ --dosen-bar: 40px; }
  .dosen-item:nth-child(even){ margin-top: 38px; }
  .dosen-jabatan{ font-size: .82rem; padding: 9px 16px; }
}
@media (min-width: 992px){
  .dosen-jalur{ --tampil: 4; display: block; position: relative; padding: 0 58px; }
  .dosen-geser{ padding: 8px 0 12px; }
  .dosen-panah{ position: absolute; top: 42%; transform: translateY(-50%); }
  .dosen-panah:hover{ transform: translateY(-50%) scale(1.07); }
  .dosen-panah-kiri{ left: 0; margin: 0; }
  .dosen-panah-kanan{ right: 0; margin: 0; }
  .dosen-kartu{ border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce){
  .dosen-kartu, .dosen-panah{ transition: none; }
  .dosen-geser{ scroll-behavior: auto; }
}

/* ---------- Alumni (slider kartu foto, mekanisme geser sama dengan Dosen) ---------- */
.alumni-jalur{ --tampil: 1.3; --sela: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.alumni-geser{
  order: 1; flex: 1 1 100%;
  display: flex; gap: var(--sela);
  list-style: none; margin: 0; padding: 10px 4px 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.alumni-geser::-webkit-scrollbar{ display: none; }
.alumni-geser:focus-visible{ outline: 3px solid var(--mbs-blue-light); outline-offset: 4px; border-radius: 12px; }

.alumni-item{
  flex: 0 0 calc((100% - (var(--tampil) - 1) * var(--sela)) / var(--tampil));
  scroll-snap-align: start;
}
/* Ruang di dalam slider alumni supaya bayangan kartu tidak terpotong overflow-x;
   margin negatif mengembalikan lebar. Slider testimoni (.testi-geser) punya padding sendiri. */
.alumni-geser:not(.testi-geser){ padding: 12px 18px 34px; margin-inline: -18px; scroll-padding-inline: 18px; }
.alumni-jalur--profil .alumni-item{ display: flex; } /* kartu setinggi kartu tertinggi */

/* Kartu profil ringkas: pita sampul gradasi tema di atas, foto bulat (cincin putih + biru)
   menumpuk tepi bawah pita, lalu nama, status, chip tempat kerja, tombol ke halaman detail. */
.alumni-kartu{
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 16px 18px; background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 12px 26px -12px rgba(13, 43, 54, .24), 0 2px 6px rgba(13, 43, 54, .06);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.alumni-kartu:hover{ transform: translateY(-5px); box-shadow: 0 20px 34px -14px rgba(10, 91, 168, .3), 0 4px 10px rgba(13, 43, 54, .08); }
.alumni-sampul{ position: absolute; inset: 0 0 auto; height: 78px; background: var(--mbs-grad-main); }
.alumni-rating{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .2); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.3;
}
.alumni-rating .bi{ color: #FFE08A; font-size: .7rem; }
.alumni-foto{
  position: relative; z-index: 1; flex-shrink: 0; margin-top: 30px;
  width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--mbs-grad-soft); color: var(--mbs-teal);
  border: 4px solid #fff; box-shadow: 0 0 0 2px var(--mbs-blue-light), 0 8px 18px -6px rgba(10, 91, 168, .35);
}
.alumni-foto img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.alumni-foto i{ font-size: 2.6rem; line-height: 1; }
.alumni-nama{
  max-width: 100%; margin: 12px 0 0; font-size: 1rem; font-weight: 800; line-height: 1.3; color: var(--mbs-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alumni-status{ max-width: 100%; margin-top: 2px; font-size: .8rem; color: var(--mbs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alumni-lembaga{
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 10px; padding: 4px 11px;
  border-radius: var(--r-pill); background: var(--mbs-grad-soft); color: var(--mbs-teal); font-size: .76rem; font-weight: 700;
}
.alumni-lembaga .bi{ flex-shrink: 0; line-height: 1; }
.alumni-lembaga span{ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tombol selalu di dasar kartu (margin-top:auto); elemen tepat di atasnya memberi jarak minimum 14px */
.alumni-kartu > :nth-last-child(2){ margin-bottom: 14px; }
.alumni-tombol{
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding-inline: 22px; border-radius: var(--r-pill);
  background: var(--mbs-grad-main); color: #fff; font-size: .82rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 16px -8px rgba(10, 91, 168, .55);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.alumni-tombol:hover{ color: #fff; transform: translateY(-2px); box-shadow: 0 12px 20px -8px rgba(10, 91, 168, .6); }
.alumni-tombol:focus-visible{ outline: 2px solid var(--mbs-blue-light); outline-offset: 3px; }

/* Tombol geser: bulat putih kecil, garis tepi tipis, panah hijau; transparan, jelas saat disentuh/hover */
.alumni-panah{
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1.5px solid #2E2E2E; border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--mbs-green-dark); font-size: 1.2rem; -webkit-text-stroke: .8px currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  opacity: .55;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.alumni-panah:hover, .alumni-panah:focus-visible{ opacity: 1; background: var(--mbs-green-dark); color: #fff; transform: scale(1.07); }
.alumni-panah:disabled{ opacity: .35; cursor: default; transform: none; }
.alumni-jalur.is-geser-tanpa-panah .alumni-panah{ display: none; }
.alumni-panah-kiri{ order: 2; margin-left: auto; }
.alumni-panah-kanan{ order: 3; margin-right: auto; }

/* Kartu profil alumni lebih kecil dari kartu testimoni (slider sama): lebih banyak kartu per layar.
   Pecahan (1.6, 2.5, 3.3) = kartu berikutnya mengintip sebagai petunjuk bisa digeser. Spesifisitas
   dua kelas menang atas .alumni-jalur di semua media query di bawah (termasuk >=1600px). */
.alumni-jalur.alumni-jalur--profil{ --tampil: 1.6; --sela: 14px; }
@media (min-width: 576px){ .alumni-jalur.alumni-jalur--profil{ --tampil: 2.5; --sela: 16px; } }
@media (min-width: 768px){ .alumni-jalur.alumni-jalur--profil{ --tampil: 3.3; --sela: 18px; } }
@media (min-width: 992px){ .alumni-jalur.alumni-jalur--profil{ --tampil: 4; --sela: 22px; } }
@media (min-width: 1200px){ .alumni-jalur.alumni-jalur--profil{ --tampil: 5; --sela: 22px; } }
@media (max-width: 575.98px){
  .alumni-kartu{ padding: 0 12px 14px; border-radius: 18px; }
  .alumni-sampul{ height: 64px; }
  .alumni-foto{ margin-top: 24px; width: 80px; height: 80px; }
  .alumni-nama{ font-size: .94rem; margin-top: 10px; }
  .alumni-tombol{ min-height: 44px; padding-inline: 18px; } /* target sentuh 44px di HP */
}
@media (min-width: 576px){ .alumni-jalur{ --tampil: 1.8; --sela: 20px; } }
@media (min-width: 768px){ .alumni-jalur{ --tampil: 2.6; --sela: 22px; } }
@media (min-width: 992px){
  .alumni-jalur{ --tampil: 3; --sela: 30px; display: block; position: relative; padding: 0 76px; }
  .alumni-panah{ position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 1.4rem; -webkit-text-stroke: 1px currentColor; }
  .alumni-panah:hover, .alumni-panah:focus-visible{ transform: translateY(-50%) scale(1.07); }
  .alumni-panah-kiri{ left: 0; margin: 0; }
  .alumni-panah-kanan{ right: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce){
  .alumni-kartu, .alumni-panah{ transition: none; }
  .alumni-geser{ scroll-behavior: auto; }
}

/* ---------- Dosen Tamu / Visiting Lecturer (satu atau beberapa kartu) ---------- */
.visit-list{ display: flex; flex-direction: column; gap: 24px; }
.visit-card{
  display: grid; grid-template-columns: 260px 1fr;
  background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.visit-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-blue-hover); }
.visit-photo{ position: relative; aspect-ratio: 3 / 4; }
.visit-photo.photo-ph{ background: var(--mbs-grad-main); color: #fff; }
.visit-photo.photo-ph i{ font-size: 2.6rem; opacity: .9; }
.visit-body{ padding: 30px 32px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.visit-meta{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.visit-badge{
  background: var(--mbs-grad-soft); color: var(--mbs-teal); font-size: .72rem; font-weight: 700;
  padding: 5px 14px; border-radius: var(--r-pill);
}
.visit-date{ display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--mbs-muted); }
.visit-body h3{ font-size: 1.15rem; margin-top: 6px; }
.visit-name{ font-weight: 700; color: var(--mbs-teal); font-size: .92rem; margin-top: 4px; }
.visit-role{ font-size: .78rem; color: var(--mbs-muted); }
.visit-body p{ font-size: .92rem; margin-top: 8px; max-width: 80ch; }
/* Foto dosen tamu umumnya potret (~3:4). 16:9 dulu cuma menampilkan ~40%
   tinggi foto dan memotong kepala. 576-767px tetap dua kolom (foto 4:5
   selebar kartu di sana bisa setinggi 670-900px); <576px bertumpuk 4:5,
   fokus potong ke atas supaya kepala tidak hilang. */
@media (max-width: 767.98px){
  .visit-card{ grid-template-columns: 200px 1fr; }
  /* isi tinggi baris tanpa mengunci rasio: kalau teks lebih tinggi dari
     foto 3:4, aspect-ratio membuat foto melebar keluar kolom 200px */
  .visit-photo{ aspect-ratio: auto; min-height: 267px; }
  .visit-body{ padding: 22px 20px; }
}
@media (max-width: 575.98px){
  .visit-card{ grid-template-columns: minmax(0, 1fr); }
  .visit-photo{ aspect-ratio: 4 / 5; }
  .visit-photo img{ object-position: 50% 20%; }
}

/* ---------- Penelitian & Pengabdian Dosen: tab Riset/Pengabdian + accordion berbanner (tridarma.js) ----------
   Banner = <summary> bergradasi tema; dibuka -> filter (judul, dosen, tahun) + daftar urut tahun terbaru. */
.tdm{ max-width: 1080px; margin-inline: auto; }
.tdm-tabs-wrap{ display: flex; justify-content: center; margin-bottom: 18px; }
.tdm-tabs{ display: inline-flex; gap: 6px; padding: 6px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-sm); }
.tdm-tab{
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--mbs-muted);
  font: inherit; font-size: .92rem; font-weight: 800; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tdm-tab:hover{ color: var(--mbs-teal); }
.tdm-tab[aria-selected="true"]{ background: var(--mbs-grad-main); color: #fff; box-shadow: 0 8px 16px -8px rgba(10, 91, 168, .5); }
.tdm-tab:focus-visible{ outline: 2px solid var(--mbs-teal); outline-offset: 2px; }

.tdm-item{ border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.tdm-banner{
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 18px; padding: 26px 28px;
  list-style: none; cursor: pointer; color: #fff; background: var(--mbs-grad-main);
}
.tdm-banner::-webkit-details-marker{ display: none; }
.tdm-banner::after{ /* pola titik halus, keluarga banner PMB */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .12) 1px, transparent 0) 0 0 / 20px 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}
.tdm-item--pengabdian .tdm-banner{ background: linear-gradient(135deg, var(--mbs-teal) 0%, var(--mbs-blue) 100%); }
.tdm-banner:focus-visible{ outline: 3px solid var(--mbs-mint); outline-offset: -3px; }
.tdm-banner-ikon{
  flex-shrink: 0; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); font-size: 1.5rem;
}
.tdm-banner-teks{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tdm-banner-teks strong{ font-family: var(--font-display); font-size: 1.28rem; line-height: 1.25; }
.tdm-banner-teks small{ font-size: .88rem; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.tdm-stat{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tdm-stat:empty{ display: none; }
.tdm-stat span{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .16); font-size: .76rem; font-weight: 800; }
.tdm-banner-aksi{
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-pill); background: #fff; color: var(--mbs-green-dark); font-size: .86rem; font-weight: 800;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .35);
}
.tdm-banner-aksi .bi{ transition: transform var(--dur) var(--ease); }
.tdm-item[open] .tdm-banner-aksi .bi{ transform: rotate(180deg); }
/* Label tombol banner ikut keadaan accordion: "Lihat daftar" saat tertutup, "Tutup daftar" saat terbuka */
.tdm-item[open] .tdm-aksi-buka, .tdm-item:not([open]) .tdm-aksi-tutup{ display: none; }

.tdm-panel{ padding: 22px 26px 24px; }
.tdm-filter{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, .7fr); gap: 12px; }
.tdm-field label{ display: block; margin-bottom: 5px; font-size: .76rem; font-weight: 800; color: var(--mbs-muted); }
.tdm-field select, .tdm-input{
  width: 100%; min-height: 44px; border: 1px solid rgba(13, 43, 54, .14); border-radius: var(--r-sm);
  background: #fff; color: var(--mbs-ink); font: inherit; font-size: .9rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tdm-field select{ padding: 0 12px; cursor: pointer; }
.tdm-input{ display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.tdm-input .bi{ color: var(--mbs-teal); line-height: 1; }
.tdm-input input{ flex: 1 1 auto; min-width: 0; min-height: 42px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--mbs-ink); }
.tdm-field select:focus-visible, .tdm-input:focus-within{ outline: 0; border-color: var(--mbs-teal); box-shadow: 0 0 0 3px rgba(124, 214, 170, .35); }

.tdm-info{ margin: 16px 0 4px; font-size: .84rem; color: var(--mbs-muted); }
.tdm-info strong{ color: var(--mbs-ink); }
.tdm-list{ list-style: none; margin: 0; padding: 0; }
.tdm-row{ display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px 2px; border-bottom: 1px solid rgba(13, 43, 54, .08); }
.tdm-row:last-child{ border-bottom: 0; }
.tdm-tahun{
  align-self: start; display: inline-flex; justify-content: center; padding: 5px 0; border-radius: 10px;
  background: var(--mbs-grad-soft); color: var(--mbs-teal); font-size: .84rem; font-weight: 800;
}
.tdm-judul{ margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.45; color: var(--mbs-ink); overflow-wrap: break-word; }
.tdm-judul mark{ padding: 0 2px; border-radius: 4px; background: rgba(124, 214, 170, .45); color: inherit; }
.tdm-meta{ display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; font-size: .8rem; color: var(--mbs-muted); }
.tdm-meta span{ display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.tdm-meta .bi{ color: var(--mbs-teal); line-height: 1; }

.tdm-state{ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 12px; text-align: center; color: var(--mbs-muted); font-size: .9rem; }
.tdm-state[hidden]{ display: none; }
.tdm-state > .bi{ font-size: 1.6rem; color: var(--mbs-teal); }
.tdm-spin{ width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(10, 122, 102, .18); border-top-color: var(--mbs-teal); animation: mbs-cari-putar .8s linear infinite; }
.tdm-link{ min-height: 40px; padding: 0 14px; border: 0; background: none; color: var(--mbs-teal); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.tdm-more{
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 16px auto 0; padding: 0 22px;
  border: 0; border-radius: var(--r-pill); background: var(--mbs-grad-soft); color: var(--mbs-teal);
  font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(10, 122, 102, .18);
}
.tdm-more[hidden]{ display: none; }
.tdm-more:hover{ background: var(--mbs-grad-main); color: #fff; }
.tdm-more:focus-visible, .tdm-link:focus-visible{ outline: 2px solid var(--mbs-teal); outline-offset: 2px; }
.tdm-sumber{ margin: 14px 0 0; font-size: .74rem; color: var(--mbs-muted); text-align: end; }
.tdm-sumber:empty{ display: none; }

@media (max-width: 767.98px){
  .tdm-filter{ grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } /* "Semua tahun" muat utuh di 390px */
  .tdm-field--cari{ grid-column: 1 / -1; }
}
@media (max-width: 575.98px){
  .tdm-tabs{ width: 100%; }
  .tdm-tab{ flex: 1 1 0; justify-content: center; padding: 0 12px; }
  .tdm-banner{ flex-wrap: wrap; gap: 12px 14px; padding: 20px 18px; }
  .tdm-banner-ikon{ width: 46px; height: 46px; border-radius: 14px; font-size: 1.2rem; }
  .tdm-banner-teks{ flex-basis: calc(100% - 60px); }
  .tdm-banner-teks strong{ font-size: 1.08rem; }
  .tdm-banner-teks small{ font-size: .82rem; }
  .tdm-banner-aksi{ width: 100%; justify-content: center; }
  .tdm-panel{ padding: 16px 14px 18px; }
  .tdm-row{ grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
  .tdm-judul{ font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce){
  .tdm-tab, .tdm-banner-aksi .bi, .tdm-field select, .tdm-input{ transition: none; }
  .tdm-spin{ animation-duration: 2.4s; }
}

/* ---------- Jurnal Prodi MBS (slider kartu sampul) ---------- */
.jurnal-jalur{ --tampil: 1.25; --sela: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jurnal-geser{
  order: 1; flex: 1 1 100%;
  display: flex; gap: var(--sela);
  list-style: none; margin: 0; padding: 10px 4px 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.jurnal-geser::-webkit-scrollbar{ display: none; }
.jurnal-geser:focus-visible{ outline: 3px solid var(--mbs-blue-light); outline-offset: 4px; border-radius: 12px; }
.jurnal-item{
  flex: 0 0 calc((100% - (var(--tampil) - 1) * var(--sela)) / var(--tampil));
  scroll-snap-align: start;
}
.jurnal-kartu{
  background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
.jurnal-kartu:hover{ transform: translateY(-8px); box-shadow: var(--shadow-blue-hover); }
.jurnal-cover{ position: relative; aspect-ratio: 3 / 4; background: var(--mbs-grad-main); }
.jurnal-item:nth-child(even) .jurnal-cover{ background: linear-gradient(180deg, var(--mbs-teal), var(--mbs-blue)); }
.jurnal-cover::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: rgba(0,0,0,.2); }
.jurnal-cover i{ color: #fff; font-size: 2.6rem; opacity: .9; }
.jurnal-body{ padding: 18px 20px 24px; }
.jurnal-edisi{
  display: inline-block; padding: 5px 13px; border-radius: var(--r-pill);
  background: var(--mbs-grad-soft); color: var(--mbs-teal); font-size: .72rem; font-weight: 700;
}
.jurnal-tema{ margin-top: 12px; font-size: 1rem; line-height: 1.4; }
.jurnal-link{ margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; color: var(--mbs-teal); }

.jurnal-panah{
  width: 46px; height: 46px; flex: 0 0 auto;
  border: none; border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--mbs-teal); font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.jurnal-panah:hover{ background: var(--mbs-grad-main); color: #fff; transform: scale(1.07); }
.jurnal-panah:disabled{ opacity: .35; cursor: default; transform: none; }
.jurnal-jalur.is-geser-tanpa-panah .jurnal-panah{ display: none; }
.jurnal-panah-kiri{ order: 2; margin-left: auto; }
.jurnal-panah-kanan{ order: 3; margin-right: auto; }

@media (min-width: 576px){ .jurnal-jalur{ --tampil: 1.8; --sela: 22px; } }
@media (min-width: 768px){ .jurnal-jalur{ --tampil: 2.6; --sela: 24px; } }
@media (min-width: 992px){
  .jurnal-jalur{ --tampil: 4; display: block; position: relative; padding: 0 58px; }
  .jurnal-panah{ position: absolute; top: 42%; transform: translateY(-50%); }
  .jurnal-panah:hover{ transform: translateY(-50%) scale(1.07); }
  .jurnal-panah-kiri{ left: 0; margin: 0; }
  .jurnal-panah-kanan{ right: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce){
  .jurnal-kartu, .jurnal-panah{ transition: none; }
  .jurnal-geser{ scroll-behavior: auto; }
}

/* ---------- Ujian Skripsi & Seminar (slider kartu jadwal) ---------- */
.ujian-jalur{ --tampil: 1.04; --sela: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ujian-geser{
  order: 1; flex: 1 1 100%;
  display: flex; gap: var(--sela);
  list-style: none; margin: 0; padding: 10px 4px 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ujian-geser::-webkit-scrollbar{ display: none; }
.ujian-geser:focus-visible{ outline: 3px solid var(--mbs-blue-light); outline-offset: 4px; border-radius: 12px; }
.ujian-item{
  flex: 0 0 calc((100% - (var(--tampil) - 1) * var(--sela)) / var(--tampil));
  scroll-snap-align: start;
}
/* Kartu gaya "poster": foto besar di kiri dengan aksen dekoratif (pola
   titik, panah bulat, aksen warna) + identitas mahasiswa di kanan. Layout
   mengikuti referensi, warna tetap ikut palet MBS (teal/biru/hijau) -
   bukan warna literal dari gambar referensi, supaya identitas visual
   situs tetap satu. HP (<768px): vertikal, foto di atas (lihat media query di bawah). */
.ujian-kartu{
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 18px; height: 100%;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 20px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ujian-kartu::before{
  content: ""; position: absolute; z-index: 0; top: -36px; left: -26px; width: 150px; height: 150px;
  background-image: radial-gradient(var(--mbs-teal) 1.4px, transparent 1.4px);
  background-size: 14px 14px; opacity: .08; pointer-events: none;
}
.ujian-kartu:hover{ transform: translateY(-6px); box-shadow: var(--shadow-blue-hover); }

.ujian-foto-wrap{ position: relative; z-index: 1; flex-shrink: 0; width: 128px; }
.ujian-foto-accent{
  position: absolute; z-index: 0; right: -10px; bottom: -10px; width: 52px; height: 52px;
  border-radius: var(--r-sm); background: var(--mbs-mint);
}
.ujian-foto{
  position: relative; z-index: 1; width: 128px; aspect-ratio: 1 / 1;
  border-radius: var(--r-md); overflow: hidden; box-shadow: 0 10px 22px rgba(12, 46, 59, .18);
}
.ujian-foto.photo-ph{ background: var(--mbs-grad-soft); color: var(--mbs-teal); padding: 0; }
.ujian-foto i{ font-size: 2rem; }
.ujian-foto-arrow{
  position: absolute; z-index: 2; left: -10px; bottom: -10px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--mbs-grad-main); color: #fff; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; font-size: .88rem;
}

.ujian-body{ position: relative; z-index: 1; flex: 1; min-width: 0; }
/* Label kategori sengaja di LUAR .ujian-foto (sibling di .ujian-foto-wrap):
   di dalam, ".photo-ph span" menimpa ukuran/warnanya, overflow:hidden foto
   memotong "Seminar Proposal", dan role="img" membuat pembaca layar
   mengabaikan teksnya. */
.ujian-badge{
  display: inline-block; position: absolute; z-index: 3; top: 10px; left: 10px;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.92); backdrop-filter: blur(2px);
  font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.ujian-badge--skripsi{ color: var(--mbs-green-dark); }
.ujian-badge--seminar{ color: var(--mbs-blue); }
.ujian-mhs{
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; letter-spacing: .01em;
  text-transform: uppercase; color: var(--mbs-blue); line-height: 1.2;
}
.ujian-judul{
  margin-top: 6px; font-size: .88rem; font-weight: 700; line-height: 1.4; color: var(--mbs-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ujian-pembimbing{
  display: flex; flex-direction: column; gap: 4px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid #EEF2EF;
  font-size: .74rem; color: var(--mbs-muted);
}
.ujian-pembimbing span{ display: flex; align-items: center; gap: 6px; }
.ujian-pembimbing strong{ color: var(--mbs-ink); font-weight: 700; }
.ujian-pembimbing i{ color: var(--mbs-teal); flex-shrink: 0; }
.ujian-jadwal{ display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.ujian-jadwal span{ display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--mbs-ink); }
.ujian-jadwal strong{ font-weight: 800; margin-right: 2px; }
.ujian-jadwal i{ color: var(--mbs-teal); font-size: .95rem; }

.ujian-panah{
  width: 46px; height: 46px; flex: 0 0 auto;
  border: none; border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--mbs-teal); font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.ujian-panah:hover{ background: var(--mbs-grad-main); color: #fff; transform: scale(1.07); }
.ujian-panah:disabled{ opacity: .35; cursor: default; transform: none; }
.ujian-jalur.is-geser-tanpa-panah .ujian-panah{ display: none; }
.ujian-panah-kiri{ order: 2; margin-left: auto; }
.ujian-panah-kanan{ order: 3; margin-right: auto; }

/* HP (<768px): kartu vertikal. Foto selebar kartu di atas (4:3, wajah di foto potret
   tetap terlihat lewat object-position), lalu nama, judul, pembimbing, waktu & tanggal.
   Jadwal didorong ke dasar kartu supaya sejajar antar kartu walau judul beda panjang. */
@media (max-width: 767.98px){
  .ujian-jalur{ --tampil: 1.25; --sela: 16px; }
  .ujian-kartu{ flex-direction: column; align-items: stretch; gap: 22px; padding: 14px 14px 16px; }
  .ujian-foto-wrap, .ujian-foto{ width: 100%; }
  .ujian-foto{ aspect-ratio: 4 / 3; }
  .ujian-foto img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
  .ujian-foto i{ font-size: 2.4rem; }
  .ujian-foto-accent{ right: -8px; bottom: -8px; }
  .ujian-foto-arrow{ left: 14px; bottom: -14px; }
  .ujian-body{ display: flex; flex-direction: column; }
  .ujian-body .ujian-jadwal{ margin-top: auto; padding-top: 12px; gap: 8px 16px; }
  .ujian-pembimbing span{ align-items: flex-start; }
  .ujian-pembimbing i{ margin-top: 2px; }
  .ujian-mhs{ font-size: 1rem; }
  .ujian-judul{ font-size: .84rem; }
}
@media (min-width: 576px) and (max-width: 767.98px){ .ujian-jalur{ --tampil: 1.8; --sela: 20px; } }
@media (min-width: 768px){ .ujian-jalur{ --tampil: 1.38; --sela: 24px; } }
@media (min-width: 992px){
  .ujian-jalur{ --tampil: 1.7; display: block; position: relative; padding: 0 58px; }
  .ujian-foto, .ujian-foto-wrap{ width: 150px; }
  .ujian-panah{ position: absolute; top: 50%; transform: translateY(-50%); }
  .ujian-panah:hover{ transform: translateY(-50%) scale(1.07); }
  .ujian-panah-kiri{ left: 0; margin: 0; }
  .ujian-panah-kanan{ right: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce){
  .ujian-kartu, .ujian-panah{ transition: none; }
  .ujian-geser{ scroll-behavior: auto; }
}

/* Slider geser di layar lebar (kontainer full width): tambah kartu per tampilan
   supaya kartu tidak ikut membesar sebanding lebar layar. WAJIB setelah semua
   blok slider di atas - media query 992/1200 mereka juga cocok di >=1600px dan
   spesifisitasnya sama, jadi yang lebih bawah yang menang. */
@media (min-width: 1600px){
  .dosen-jalur{ --tampil: 5; }
  .alumni-jalur{ --tampil: 4; } /* juga dipakai slider testimoni */
  .jurnal-jalur{ --tampil: 5; }
  .ujian-jalur{ --tampil: 2.2; }
}

/* ---------- Mitra Kerjasama (marquee) ---------- */
.mbs-mitra{ background: var(--mbs-grad-soft); }
.mitra-wrap{
  overflow: hidden; margin-top: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mitra-track{
  display: flex; gap: 18px; width: max-content;
  padding: 4px 0 8px;
  animation: mbsMarquee 32s linear infinite;
}
.mitra-wrap:hover .mitra-track{ animation-play-state: paused; }
.mitra-chip{
  display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto;
  background: #fff; border-radius: var(--r-pill); padding: 12px 22px 12px 12px;
  box-shadow: var(--shadow-sm); white-space: nowrap;
}
.mitra-chip .icon-box{ width: 40px; height: 40px; font-size: 1.1rem; }
.mitra-chip span:last-child{ font-weight: 700; font-size: .86rem; color: var(--mbs-ink); }
@keyframes mbsMarquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .mitra-track{ animation: none; } }
@media (max-width: 575.98px){ .mitra-chip{ padding: 10px 18px 10px 10px; gap: 10px; } .mitra-chip .icon-box{ width: 36px; height: 36px; font-size: 1rem; } }

/* ---------- Pengguna Lulusan ---------- */
.sektor-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sektor-card{
  background: #fff; border-radius: var(--r-md); padding: 26px 22px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sektor-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-blue-hover); background: var(--mbs-grad-main); }
.sektor-card:hover h3, .sektor-card:hover .sektor-stat{ color: #fff; }
.sektor-card:hover p{ color: rgba(255,255,255,.85); }
.sektor-card:hover .icon-box{ background: rgba(255,255,255,.2); color: #fff; }
.sektor-card h3{ font-size: 1.02rem; margin-top: 16px; }
.sektor-stat{ display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--mbs-teal); margin-top: 10px; }
.sektor-card p{ font-size: .85rem; margin-top: 6px; }
@media (max-width: 899.98px){ .sektor-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .sektor-card{ padding: 20px 18px; } }
@media (max-width: 575.98px){ .sektor-card h3{ font-size: .95rem; } }

/* ---------- Testimoni (slider: kelas alumni-jalur/-geser/-item/-panah dipakai bersama) ---------- */
/* Ruang atas-bawah untuk kartu yang terangkat saat hover + bayangannya (jalur overflow-x:auto memotong) */
.testi-geser{ padding-top: 12px; padding-bottom: 26px; align-items: stretch; }
.testi-geser > .alumni-item{ display: flex; } /* kartu setinggi kartu tertinggi */
.testi-card{
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--r-lg); padding: 30px 26px 0; box-shadow: var(--shadow-sm);
  overflow: hidden; /* footer gradasi ikut sudut membulat kartu */
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.testi-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-blue-hover); }
/* Kutipan panjang dipotong 7 baris supaya tinggi kartu seragam; teks penuh di /testimoni */
.testi-quote{
  font-family: var(--font-display); font-size: 1.02rem; line-height: 1.6; color: var(--mbs-ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden;
}
.testi-quote::before{
  content: "\201C"; display: block; font-size: 2.6rem; line-height: 1;
  color: var(--mbs-mint); font-family: var(--font-display); margin-bottom: -4px;
}
.testi-person{ display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; }
/* Footer kartu testimoni: pita gradasi tema selebar kartu (keluar dari padding kartu).
   Mulai dari green-dark, bukan --mbs-green: putih di #0B8A4E cuma 4.4:1, di sini >= 4.5:1. */
.testi-footer{
  margin: auto -26px 0; padding: 16px 26px;
  background: linear-gradient(120deg, var(--mbs-green-dark) 0%, var(--mbs-teal) 55%, var(--mbs-blue) 100%);
  color: #fff;
}
.testi-card .testi-quote{ margin-bottom: 22px; }
.testi-footer .testi-avatar{ box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.testi-footer .testi-avatar.photo-ph{ background: rgba(255, 255, 255, .18); color: #fff; }
.testi-footer strong{ color: #fff; }
.testi-footer span span{ color: rgba(255, 255, 255, .9); }
/* Bulat, ukuran sama untuk foto (img) maupun ikon default (.photo-ph) */
.testi-avatar{ width: 46px; height: 46px; border-radius: 50%; padding: 0; flex-shrink: 0; min-height: 0; }
img.testi-avatar{ display: block; object-fit: cover; }
.testi-avatar i{ font-size: 1rem; }
.testi-person strong{ display: block; font-size: .92rem; }
.testi-person span{ font-size: .78rem; color: var(--mbs-muted); }

/* ---------- Prestasi Mahasiswa, dulu Karya Inovasi (reuse .news-card; kelas .karya-* dipertahankan) ---------- */
.karya-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* min-height:0 memutus .photo-ph{min-height:100%}: kartu adalah item grid
   (tinggi diregang), min-height 100% membuat kotak setinggi kartu lalu
   aspect-ratio menurunkan lebarnya jadi jauh melebihi kolom (644px di HP
   402px). Foto karya umumnya potret 0.68-1.0 -> 4:5, fokus agak ke atas. */
.karya-grid .news-thumb{ position: relative; min-height: 0; aspect-ratio: 4 / 5; }
.karya-grid .news-thumb img{ object-position: 50% 30%; }
.karya-badge{
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: var(--mbs-grad-main); font-size: .7rem; font-weight: 700;
  padding: 5px 12px; border-radius: var(--r-pill);
}
/* Lebih spesifik dari ".photo-ph span{ color:var(--mbs-muted) }" yang
   sebelumnya menimpa warna putih badge ini (badge berada di dalam .photo-ph). */
.news-thumb .karya-badge{ color: #fff; }
.karya-badge{ display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 28px); }
.karya-badge .bi{ font-size: .8rem; line-height: 1; color: #FFE08A; } /* emas lembut: penanda capaian */
/* Kartu prestasi: tautan "Lihat detail" selalu di dasar kartu walau deskripsi beda panjang */
.prestasi-card{ display: flex; flex-direction: column; }
.prestasi-card .news-card-body{ flex: 1 1 auto; display: flex; flex-direction: column; }
.prestasi-card .news-link{ margin-top: auto; padding-top: 14px; }
.prestasi-nama{ display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; color: var(--mbs-teal); }
.prestasi-nama .bi{ line-height: 1; }
@media (max-width: 1199.98px){ .karya-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px){ .karya-grid{ grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sambutan + video ---------- */
.mbs-welcome{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.welcome-video{ position: relative; aspect-ratio: 16/10; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.welcome-play{
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
  background: #fff; color: var(--mbs-teal); border: none; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  animation: mbsPulse 2.4s ease-in-out infinite;
}
.welcome-quote{ font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; color: var(--mbs-ink); position: relative; padding-left: 26px; }
.welcome-quote::before{ content: "\201C"; position: absolute; left: -6px; top: -14px; font-size: 3.4rem; color: var(--mbs-mint); font-family: var(--font-display); }
.welcome-person{ display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.welcome-person .avatar{ width: 56px; height: 56px; border-radius: 50%; }
.welcome-person strong{ display: block; font-size: 1rem; }
.welcome-person span{ font-size: .82rem; }
@media (max-width: 991.98px){ .mbs-welcome{ grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ---------- Banner Penerimaan Mahasiswa Baru ----------
   Kartu besar bergradasi tema (--mbs-grad-main) dengan pola titik halus + cahaya lembut;
   kiri teks + tombol, kanan poster dalam bingkai kaca. <992px: satu kolom, poster di bawah. */
.mbs-pmb{ padding-bottom: 0; } /* section Admisi di bawahnya sudah punya padding atas */
.pmb-banner{
  position: relative; overflow: hidden;
  /* max-width: di layar lebar banner tidak membentang penuh, tetap terbaca utuh dalam satu layar */
  max-width: 1320px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center;
  padding: 48px clamp(28px, 4vw, 64px); border-radius: var(--r-xl); color: #fff;
  background:
    radial-gradient(ellipse 55% 70% at 85% 15%, rgba(255, 255, 255, .16), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .1) 1px, transparent 0) 0 0 / 22px 22px,
    var(--mbs-grad-main);
  box-shadow: var(--shadow-lg);
}
.pmb-kampus{ display: flex; align-items: center; gap: 14px; }
.pmb-logo{
  width: 56px; height: 56px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 16px; background: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
}
.pmb-logo img{ width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.pmb-kampus strong{ font-family: var(--font-display); font-size: 1.02rem; line-height: 1.3; }
.pmb-pil{
  display: inline-block; margin-top: 26px; padding: 7px 16px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.pmb-copy h2{ margin-top: 16px; color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.15; }
.pmb-copy p{ margin-top: 16px; max-width: 520px; color: rgba(255, 255, 255, .88); font-size: 1.04rem; }
.pmb-aksi{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.pmb-btn{ background: #fff; color: var(--mbs-green-dark); box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .3); }
.pmb-btn:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px -8px rgba(0, 0, 0, .35); }
.pmb-sosmed{ display: flex; gap: 12px; margin-top: 34px; }
.pmb-sosmed a{
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); font-size: 1.15rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pmb-sosmed a:hover{ background: #fff; color: var(--mbs-green-dark); }

/* Poster persegi: sisi dibatasi juga oleh tinggi layar (100vh - navbar - padding banner - keterangan),
   jadi banner selalu muat satu layar desktop tanpa digulir */
.pmb-poster{ display: flex; flex-direction: column; align-items: center; gap: 16px; justify-self: center; width: min(100%, 420px, max(300px, calc(100vh - 330px))); }
.pmb-poster-bingkai{
  width: 100%; aspect-ratio: 1; min-height: 0; padding: 0;
  border-radius: var(--r-lg); overflow: hidden;
  outline: 14px solid rgba(255, 255, 255, .14); outline-offset: 0;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45);
  background: rgba(255, 255, 255, .1); color: #fff;
  transition: transform var(--dur) var(--ease);
}
.pmb-poster-bingkai img{ width: 100%; height: 100%; object-fit: cover; }
.pmb-poster-bingkai span{ color: rgba(255, 255, 255, .85); }
.pmb-poster:hover .pmb-poster-bingkai{ transform: translateY(-4px); }
.pmb-poster:focus-visible{ outline: 3px solid #fff; outline-offset: 6px; border-radius: var(--r-lg); }
.pmb-ket{ margin-top: 10px; font-weight: 800; text-align: center; }

@media (max-width: 991.98px){
  .pmb-banner{ grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 48px 36px; }
  .pmb-poster{ width: min(100%, 440px); }
}
@media (max-width: 575.98px){
  .pmb-banner{ padding: 32px 20px 36px; border-radius: var(--r-md); gap: 36px; }
  .pmb-logo{ width: 46px; height: 46px; border-radius: 13px; }
  .pmb-logo img{ width: 36px; height: 36px; }
  .pmb-kampus strong{ font-size: .9rem; }
  .pmb-pil{ margin-top: 20px; font-size: .68rem; padding: 6px 13px; }
  .pmb-copy p{ font-size: .92rem; }
  .pmb-aksi{ margin-top: 24px; gap: 10px; }
  .pmb-aksi .btn-mbs{ flex: 1 1 100%; }
  .pmb-sosmed{ margin-top: 26px; justify-content: center; }
  .pmb-poster-bingkai{ outline-width: 9px; border-radius: var(--r-md); }
}
/* HP besar (576-767px): ikon media sosial juga di tengah, sama dengan <576px */
@media (min-width: 576px) and (max-width: 767.98px){ .pmb-sosmed{ justify-content: center; } }

/* ---------- Banner Layanan Bimbingan Karir ----------
   Satu tautan besar ke situs BK FAI. Lapisan: foto (opsional) -> gradasi hijau terang (alfa,
   jadi foto tetap terasa) -> cincin konsentris tipis di kanan (motif kompas/arah karier). */
.mbs-karir{ padding: 0; } /* section sebelum & sesudahnya sudah punya padding sendiri */
.karir-banner{
  --karir-grad: linear-gradient(105deg, rgba(7, 121, 60, .94) 0%, rgba(15, 163, 63, .86) 45%, rgba(32, 184, 6, .62) 100%);
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 1320px; margin-inline: auto; min-height: clamp(320px, 32vw, 400px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4.5vw, 64px);
  border-radius: var(--r-xl); background: #064D27; color: #fff; text-decoration: none;
  box-shadow: 0 24px 54px -20px rgba(7, 121, 60, .45);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.karir-banner::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: var(--karir-grad); }
.karir-banner::after{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 92% 46%, rgba(255, 255, 255, .13) 0 1px, transparent 1.5px 44px);
  -webkit-mask-image: radial-gradient(circle at 92% 46%, #000 0 34%, transparent 62%);
          mask-image: radial-gradient(circle at 92% 46%, #000 0 34%, transparent 62%);
}
.karir-foto{
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02); transition: transform 700ms var(--ease);
}
.karir-copy{ display: flex; flex-direction: column; align-items: flex-start; max-width: 640px; min-width: 0; }
.karir-pil{
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; /* sama dengan pil banner PMB */
}
.karir-pil .bi{ font-size: .95rem; line-height: 1; }
.karir-copy h2{
  margin-top: 16px; color: #fff; font-size: clamp(1.55rem, 2.6vw, 2.3rem); line-height: 1.18; max-width: 22ch;
  text-shadow: 0 2px 18px rgba(0, 40, 16, .25); overflow-wrap: break-word;
}
.karir-desc{ display: block; margin-top: 14px; max-width: 54ch; color: rgba(255, 255, 255, .92); font-size: 1.02rem; line-height: 1.6; }
.karir-layanan{ display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 20px; }
.karir-layanan > span{
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(4, 58, 28, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: .84rem; font-weight: 700;
}
.karir-layanan .bi{ line-height: 1; color: #C9F7B5; }
/* Tombol: pil putih + bulatan gradasi tema utama (--mbs-grad-main), keluarga tombol banner PMB */
.karir-btn{
  margin-top: 28px; gap: 14px; padding: 7px 7px 7px 24px; background: #fff; color: var(--mbs-green-dark);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .3);
}
.karir-btn-ico{
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--mbs-grad-main); color: #fff; font-size: 1rem; line-height: 1; transition: transform var(--dur) var(--ease);
}
.karir-alamat{
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); white-space: nowrap;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: .82rem; font-weight: 700;
}
.karir-banner:hover{ transform: translateY(-4px); box-shadow: 0 32px 64px -24px rgba(7, 121, 60, .6); color: #fff; }
.karir-banner:hover .karir-foto{ transform: scale(1.06); }
.karir-banner:hover .karir-btn{ box-shadow: 0 16px 30px -8px rgba(0, 0, 0, .35); }
.karir-banner:hover .karir-btn-ico{ transform: translate(2px, -2px); }
.karir-banner:focus-visible{ outline: 3px solid var(--mbs-green); outline-offset: 4px; }
.karir-banner:active{ transform: translateY(-1px) scale(.995); }
[dir="rtl"] .karir-btn{ padding: 7px 24px 7px 7px; }
[dir="rtl"] .karir-btn-ico .bi{ transform: scaleX(-1); }
/* RTL: teks pindah ke kanan, jadi gradasi dicerminkan (105deg -> 255deg) agar sisi pekat tetap di belakang teks */
[dir="rtl"] .karir-banner{ --karir-grad: linear-gradient(255deg, rgba(7, 121, 60, .94) 0%, rgba(15, 163, 63, .86) 45%, rgba(32, 184, 6, .62) 100%); }
[dir="rtl"] .karir-banner::after{ transform: scaleX(-1); }

@media (max-width: 991.98px){
  .karir-banner{ grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; border-radius: var(--r-lg); }
  .karir-alamat{ justify-self: start; }
}
/* HP: teks membentang selebar kartu, jadi arah gradasi diputar ke vertikal (warna sama persis) supaya
   teks tetap di bagian yang paling pekat; tombol penuh selebar kartu di zona jempol. */
@media (max-width: 575.98px){
  .karir-banner{
    --karir-grad: linear-gradient(170deg, rgba(7, 121, 60, .94) 0%, rgba(15, 163, 63, .86) 55%, rgba(32, 184, 6, .62) 100%);
    padding: 28px 20px 22px; gap: 18px; border-radius: var(--r-md);
  }
  .karir-banner::after{
    background: repeating-radial-gradient(circle at 100% 0, rgba(255, 255, 255, .12) 0 1px, transparent 1.5px 34px);
    -webkit-mask-image: radial-gradient(circle at 100% 0, #000 0 30%, transparent 60%);
            mask-image: radial-gradient(circle at 100% 0, #000 0 30%, transparent 60%);
  }
  .karir-pil{ font-size: .68rem; padding: 6px 13px; }
  .karir-copy h2{ font-size: 1.42rem; margin-top: 14px; }
  .karir-desc{ font-size: .92rem; }
  .karir-layanan{ gap: 6px 8px; margin-top: 16px; }
  .karir-layanan > span{ font-size: .76rem; padding: 6px 12px; }
  .karir-btn{ width: 100%; justify-content: space-between; margin-top: 22px; }
  .karir-alamat{ display: none; } /* tombol sudah cukup jelas; alamat memenuhi kartu sempit */
  [dir="rtl"] .karir-banner{ --karir-grad: linear-gradient(190deg, rgba(7, 121, 60, .94) 0%, rgba(15, 163, 63, .86) 55%, rgba(32, 184, 6, .62) 100%); }
}
@media (prefers-reduced-motion: reduce){
  .karir-banner, .karir-foto, .karir-btn-ico{ transition: none; }
  .karir-banner:hover, .karir-banner:hover .karir-foto, .karir-banner:hover .karir-btn-ico{ transform: none; }
}
@media (prefers-reduced-motion: reduce){ .pmb-poster-bingkai{ transition: none; } }

/* ---------- Admisi ---------- */
.admission-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.admission-card{
  background: #fff; border-radius: var(--r-lg); padding: 30px 26px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  border: 2px solid transparent;
}
.admission-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-blue-hover); border-color: var(--mbs-mint); }
.admission-card.is-featured{ background: var(--mbs-grad-main); color: #fff; }
.admission-card.is-featured h3, .admission-card.is-featured p{ color: #fff; }
.admission-card.is-featured p{ opacity: .9; }
.admission-card.is-featured .icon-box{ background: rgba(255,255,255,.2); color: #fff; }
.admission-card h3{ font-size: 1.2rem; margin-top: 18px; }
.admission-card p{ margin-top: 10px; font-size: .92rem; }
.admission-card ul{ list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: .88rem; }
.admission-card ul li{ display: flex; gap: 8px; align-items: flex-start; }
.admission-card .btn-mbs{ margin-top: 22px; width: 100%; }
@media (max-width: 899.98px){ .admission-grid{ grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kehidupan kampus ---------- */
.campuslife-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* 1:1 di desktop/tablet, 3:4 (potret) di HP; sama dengan halaman /kehidupan-kampus (pages.css) */
.campuslife-card{ position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1; box-shadow: var(--shadow-sm); }
.campuslife-card .photo-ph{ background: var(--mbs-grad-main); color: #fff; }
.campuslife-card .photo-ph i{ color: #fff; }
.campuslife-card .photo-ph span{ color: rgba(255,255,255,.85); }
.campuslife-caption{
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(12,46,59,.82));
  color: #fff;
}
.campuslife-caption h3{ color: #fff; font-size: 1rem; }
.campuslife-caption p{ color: rgba(255,255,255,.82); font-size: .8rem; margin-top: 4px; }
@media (max-width: 991.98px){ .campuslife-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* HP: tinggi kartu mengikuti rasio asli foto (1:1, 4:3, 3:4, dst.), jadi foto utuh tanpa latar buram
   dan keterangan selalu menumpang di dalam foto. min-height = ruang sebelum foto termuat (lazy);
   kartu tanpa foto memakai bingkai ikon 4:3. */
@media (max-width: 767.98px){
  .campuslife-grid{ align-items: start; }
  .campuslife-card{ aspect-ratio: auto; }
  .campuslife-card .photo-ph{ height: auto; min-height: 0; padding: 0; aspect-ratio: 4 / 3; }
  .campuslife-card .foto-utuh{ aspect-ratio: auto; min-height: 180px; }
  .campuslife-card .foto-utuh img.foto-latar{ display: none; }
  .campuslife-card .foto-utuh img.foto-isi{ position: static; display: block; width: 100%; height: auto; }
  .campuslife-caption{ padding: 44px 16px 16px; background: linear-gradient(180deg, transparent, rgba(12, 46, 59, .72) 38%, rgba(12, 46, 59, .92)); }
}
/* HP kecil: 1 kolom penuh (keterangan berdeskripsi) */
@media (max-width: 575.98px){ .campuslife-grid{ grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* ---------- Agenda ---------- */
.mbs-agenda{ background: var(--mbs-grad-soft); }
.agenda-list{ display: flex; flex-direction: column; gap: 16px; max-width: 860px; margin: 0 auto; }
.agenda-item{
  display: flex; align-items: center; gap: 22px; background: #fff; border-radius: var(--r-lg);
  padding: 20px 24px; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.agenda-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-blue-hover); }
.agenda-date{
  flex-shrink: 0; width: 70px; height: 70px; border-radius: var(--r-md); background: var(--mbs-grad-main);
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.agenda-date .day{ font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.agenda-date .month{ font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.agenda-body h3{ font-size: 1.05rem; }
.agenda-meta{ display: flex; gap: 16px; margin-top: 6px; font-size: .82rem; color: var(--mbs-muted); flex-wrap: wrap; }
.agenda-meta span{ display: inline-flex; align-items: center; gap: 5px; }
.agenda-footer{ text-align: center; margin-top: 30px; }
.agenda-lihat-semua{ justify-content: space-between; gap: 14px; min-width: 240px; }
@media (max-width: 575.98px){
  .agenda-item{ padding: 16px; gap: 14px; }
  .agenda-date{ width: 58px; height: 58px; }
}

/* ---------- Berita ---------- */
.news-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card{ background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.news-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-blue-hover); }
.news-thumb{ aspect-ratio: 16/10; }
.news-card .photo-ph{ background: var(--mbs-grad-soft); }
.news-card-body{ padding: 20px 22px 24px; }
.news-meta{ display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--mbs-muted); }
.news-meta .dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--mbs-muted); }
.news-card h3{ font-size: 1.08rem; margin-top: 10px; line-height: 1.35; }
.news-card p{ font-size: .88rem; margin-top: 8px; }
.news-link{ margin-top: 14px; font-weight: 700; font-size: .85rem; color: var(--mbs-teal); }
.news-dilihat{ display: inline-flex; align-items: center; gap: 4px; }
.news-dilihat i{ color: var(--mbs-teal); font-size: .85rem; }

/* Tiga kolom: kartu besar di atas + daftar 4 berita kecil di bawah */
.news-columns{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.news-col-head{ margin-bottom: 16px; }
.news-col-head h3{ font-size: .95rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--mbs-ink); margin: 0; }
.news-badge{
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: var(--mbs-grad-main); font-size: .7rem; font-weight: 700;
  padding: 5px 12px; border-radius: var(--r-pill);
}
/* Lebih spesifik dari ".photo-ph span{ color:var(--mbs-muted) }" yang
   sebelumnya menimpa warna putih badge ini (badge berada di dalam .photo-ph). */
.news-thumb .news-badge{ color: #fff; }
.news-col .news-thumb{ position: relative; }
.news-list{ list-style: none; margin: 18px 0 0; padding: 0; }
.news-list-item + .news-list-item{ border-top: 1px solid #E7EDEA; }
.news-list-link{ display: flex; align-items: center; gap: 12px; padding: 12px 2px; color: inherit; }
.news-list-thumb{ width: 64px; height: 64px; border-radius: var(--r-sm); flex-shrink: 0; padding: 0; }
.news-list-thumb i{ font-size: 1.15rem; }
.news-list-text{ display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.news-list-text strong{
  font-size: .92rem; font-weight: 700; line-height: 1.35; color: var(--mbs-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--dur) var(--ease);
}
.news-list-date{ font-size: .76rem; color: var(--mbs-muted); }
.news-list-link:hover .news-list-text strong{ color: var(--mbs-teal); }
@media (max-width: 991.98px){ .news-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .news-columns{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px){ .news-grid{ grid-template-columns: minmax(0, 1fr); } .news-columns{ grid-template-columns: minmax(0, 1fr); } }

/* ---------- Footer ---------- */
.mbs-footer{ background: var(--mbs-dark); color: rgba(255,255,255,.72); padding: 72px 0 0; }
.footer-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand .brand-mark{ width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--mbs-grad-main); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-weight: 700; }
.footer-brand strong{ color: #fff; font-size: 1.05rem; }
.footer-col h4{ color: #fff; font-size: .95rem; margin-bottom: 18px; }
.footer-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: .88rem; }
.footer-col ul a:hover{ color: #fff; text-decoration: underline; }
.footer-contact li{ display: flex; align-items: flex-start; gap: 10px; }
.footer-social{ display: flex; gap: 10px; margin-top: 18px; }
.footer-social a{
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; transition: background var(--dur);
}
.footer-social a:hover{ background: var(--mbs-teal); color: #fff; }
.footer-bottom{ display: flex; align-items: center; justify-content: space-between; padding: 22px 0; font-size: .82rem; flex-wrap: wrap; gap: 10px; }
/* align-items: center: di layar sentuh tautan setinggi 44px, teks biasa ("Develop by") harus ikut di tengah */
.footer-bottom-links{ display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
/* Situs Penting: kolom ke-5, daftar tautan 2 kolom */
.footer-grid--situs{ grid-template-columns: minmax(0, 1.1fr) minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.9fr) minmax(0, 1.15fr); gap: 36px; }
/* 2 kolom; layar sangat sempit (<300px isi) turun ke 1 kolom supaya label tidak terlipat */
.footer-col ul.footer-links-2col{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 11px 18px; }
.footer-links-2col a, .footer-links-2col span{ display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.footer-links-2col a .bi{ font-size: .7rem; line-height: 1; opacity: .6; }
@media (max-width: 1199.98px){
  .footer-grid--situs{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid--situs .footer-col--situs{ grid-column: span 2; }
}
@media (max-width: 991.98px){
  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .footer-grid--situs .footer-col--situs{ grid-column: 1 / -1; }
}
@media (max-width: 575.98px){
  .mbs-footer{ padding-top: 52px; }
  .footer-grid{ grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 32px; }
  /* HP: tautan Program Studi & Akademik 2 kolom, sama dengan Situs Penting */
  .footer-col ul.footer-links{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); column-gap: 18px; }
  /* HP: hak cipta terlipat seimbang; ruang bawah setinggi tombol melayang (16px + 48px)
     supaya baris terakhir tidak tertutup saat halaman digulir sampai habis */
  .footer-bottom{ flex-direction: column; text-align: center; gap: 4px; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .footer-bottom > span{ text-wrap: balance; }
  .footer-bottom-links{ justify-content: center; }
}

/* ---------- Video modal ---------- */
.mbs-video-modal{
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 20, 24, .86); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease);
  padding: 20px;
}
.mbs-video-modal.is-open{ opacity: 1; visibility: visible; }
.mbs-video-modal .video-frame{ width: min(880px, 100%); aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; background: #000; }
.mbs-video-modal .video-frame iframe{ width: 100%; height: 100%; border: 0; }
.mbs-video-close{
  position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; border: none; font-size: 1.3rem; cursor: pointer;
}

/* ---------- Floating Action Buttons (scroll-to-top + layanan 24 jam) ---------- */
/* + env(safe-area-*): jauh dari home indicator iPhone (gestur swipe) dan
   tidak masuk ke bawah notch saat landscape */
.mbs-fab-stack{
  position: fixed; right: calc(20px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 1040;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.mbs-fab-left{
  position: fixed; left: calc(20px + env(safe-area-inset-left)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 1040;
}
.fab-btn{
  display: inline-flex; align-items: center; gap: 10px;
  border: none; appearance: none; cursor: pointer; font-weight: 700; font-family: inherit;
  border-radius: var(--r-pill); box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.fab-top{
  width: 48px; height: 48px; justify-content: center; padding: 0;
  background: #fff; color: var(--mbs-teal); font-size: 1.2rem;
  opacity: 0; visibility: hidden; transform: translateY(12px);
}
.fab-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.fab-top:hover{ background: var(--mbs-grad-main); color: #fff; transform: translateY(-4px); }

.fab-service{
  position: relative;
  padding: 12px 20px 12px 14px; background: #fff; color: var(--mbs-ink);
  transition: padding var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fab-service:hover{ transform: translateY(-4px); box-shadow: var(--shadow-blue-hover); }
.fab-service .fab-dot{
  position: absolute; top: 6px; right: 6px;
  width: 10px; height: 10px; border-radius: 50%; background: #39E27B;
  box-shadow: 0 0 0 2px var(--mbs-green);
  animation: mbsDotPing 1.8s ease-out infinite;
}
.fab-service .fab-service-text{
  display: flex; flex-direction: column; line-height: 1.2; text-align: left;
  max-width: 160px; opacity: 1; overflow: hidden; white-space: nowrap;
  transition: max-width 420ms var(--ease), opacity 280ms var(--ease);
}
.fab-service .fab-service-text strong{ font-size: .86rem; }
.fab-service .fab-service-text small{ font-size: .68rem; opacity: .75; font-weight: 600; color: var(--mbs-muted); }
.fab-service i{ font-size: 1.15rem; color: var(--mbs-teal); }

/* Collapse otomatis setelah beberapa detik (lihat main.js): hanya ikon yang
   tersisa, label hilang lewat opacity + lebar, bukan display:none, supaya
   transisinya halus. Melebar lagi saat dihover/difokus. */
.mbs-fab-left.is-collapsed .fab-service{ padding: 15px; gap: 0; justify-content: center; }
.mbs-fab-left.is-collapsed .fab-service-text{ max-width: 0; opacity: 0; }
.mbs-fab-left.is-collapsed .fab-service:hover,
.mbs-fab-left.is-collapsed .fab-service:focus-within{
  padding: 12px 20px 12px 14px; gap: 10px; justify-content: flex-start;
}
.mbs-fab-left.is-collapsed .fab-service:hover .fab-service-text,
.mbs-fab-left.is-collapsed .fab-service:focus-within .fab-service-text{ max-width: 160px; opacity: 1; }

@media (max-width: 575.98px){
  .mbs-fab-stack{ right: calc(14px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); gap: 10px; }
  .mbs-fab-left{ left: calc(14px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); }
  .fab-top{ width: 42px; height: 42px; font-size: 1.05rem; }
  .fab-service{ padding: 10px 16px 10px 12px; }
  .fab-service .fab-service-text small{ display: none; }
}

/* ---------- Toggle status akreditasi (mengambang di kanan, ~5% tinggi layar di bawah navbar) ---------- */
/* Topbar 40px + navbar; di bawah 900px topbar disembunyikan, jadi hanya tinggi navbar. */
.mbs-akreditasi-toggle{ position: fixed; top: calc(40px + var(--nav-h) + 5vh + env(safe-area-inset-top)); right: calc(20px + env(safe-area-inset-right)); z-index: 1035; }
.fab-akreditasi{
  padding: 12px 20px 12px 14px; background: #fff; color: var(--mbs-ink);
  transition: padding var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fab-akreditasi:hover{ transform: translateY(-4px); box-shadow: var(--shadow-blue-hover); }
.fab-akreditasi i{ font-size: 1.15rem; color: var(--mbs-teal); }
.fab-akreditasi-text{
  display: flex; flex-direction: column; line-height: 1.2; text-align: left;
  max-width: 140px; opacity: 1; overflow: hidden; white-space: nowrap;
  transition: max-width 420ms var(--ease), opacity 280ms var(--ease);
}
.fab-akreditasi-text strong{ font-size: .86rem; }
.fab-akreditasi-text small{ font-size: .68rem; opacity: .75; font-weight: 600; color: var(--mbs-muted); }

.mbs-akreditasi-toggle.is-collapsed .fab-akreditasi{ padding: 15px; gap: 0; justify-content: center; }
.mbs-akreditasi-toggle.is-collapsed .fab-akreditasi-text{ max-width: 0; opacity: 0; }
.mbs-akreditasi-toggle.is-collapsed .fab-akreditasi:hover,
.mbs-akreditasi-toggle.is-collapsed .fab-akreditasi:focus-within{
  padding: 12px 20px 12px 14px; gap: 10px; justify-content: flex-start;
}
.mbs-akreditasi-toggle.is-collapsed .fab-akreditasi:hover .fab-akreditasi-text,
.mbs-akreditasi-toggle.is-collapsed .fab-akreditasi:focus-within .fab-akreditasi-text{ max-width: 140px; opacity: 1; }

@media (max-width: 899.98px){ .mbs-akreditasi-toggle{ top: calc(var(--nav-h) + 5vh + env(safe-area-inset-top)); } }
@media (max-width: 575.98px){
  .mbs-akreditasi-toggle{ right: calc(14px + env(safe-area-inset-right)); }
  .fab-akreditasi{ padding: 10px 16px 10px 12px; }
  .fab-akreditasi-text small{ display: none; }
}
@media (prefers-reduced-motion: reduce){ .fab-akreditasi{ transition: none; } }

/* ---------- Popup sambutan kunjungan pertama ---------- */
.mbs-welcome-modal{
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; pointer-events: none; padding: 20px;
}
.mbs-welcome-modal.is-open{ visibility: visible; pointer-events: auto; }
.mbs-welcome-modal-backdrop{
  position: absolute; inset: 0; background: rgba(12,46,59,.5);
  opacity: 0; transition: opacity 420ms var(--ease);
}
.mbs-welcome-modal.is-open .mbs-welcome-modal-backdrop{ opacity: 1; }

.mbs-welcome-modal-panel{
  position: relative; width: min(440px, 100%);
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: 40px 32px 32px; text-align: center;
  opacity: 0;
  transform: translate(-32vw, -28vh) scale(.82);
  transition: transform 620ms var(--ease), opacity 480ms var(--ease);
}
.mbs-welcome-modal.is-open .mbs-welcome-modal-panel{
  opacity: 1; transform: translate(0, 0) scale(1);
}
.mbs-welcome-modal-logo{ width: 64px; height: 64px; border-radius: var(--r-sm); margin: 0 auto 18px; object-fit: contain; }
.mbs-welcome-modal-panel h2{ font-size: 1.3rem; }
.mbs-welcome-modal-panel p{ margin-top: 10px; font-size: .95rem; }
.mbs-welcome-modal-panel .btn-mbs{ margin-top: 22px; }
.mbs-welcome-modal-close{
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: #F1F5F3; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer; color: var(--mbs-ink);
}
@media (max-width: 575.98px){
  .mbs-welcome-modal-panel{ padding: 34px 22px 26px; }
}

/* ---------- Popup promo beasiswa ---------- */
.mbs-promo-modal{
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; pointer-events: none; padding: 20px;
}
.mbs-promo-modal.is-open{ visibility: visible; pointer-events: auto; }
.mbs-promo-modal-backdrop{
  position: absolute; inset: 0; background: rgba(12,46,59,.55);
  opacity: 0; transition: opacity 420ms var(--ease);
}
.mbs-promo-modal.is-open .mbs-promo-modal-backdrop{ opacity: 1; }

.mbs-promo-modal-panel{
  position: relative; width: min(440px, 100%); overflow: hidden;
  background: var(--mbs-grad-main); color: #fff;
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: 42px 34px 34px; text-align: center;
  opacity: 0; transform: scale(.78);
  transition: transform 520ms var(--ease), opacity 420ms var(--ease);
}
.mbs-promo-modal.is-open .mbs-promo-modal-panel{ opacity: 1; transform: scale(1); }
.mbs-promo-modal-panel::after{
  content: ""; position: absolute; right: -70px; top: -70px; width: 200px; height: 200px;
  border-radius: 50%; background: rgba(255,255,255,.12); pointer-events: none;
}
.mbs-promo-modal-icon{
  position: relative; width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); color: #fff; font-size: 2rem;
}
.mbs-promo-modal-panel h2{ position: relative; color: #fff; font-size: 1.4rem; }
.mbs-promo-modal-panel p{ position: relative; color: rgba(255,255,255,.88); margin-top: 10px; font-size: .96rem; }
.mbs-promo-modal-actions{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
.mbs-promo-modal-actions .btn-mbs{ width: 100%; }
.mbs-promo-modal-skip{
  border: none; background: transparent; color: rgba(255,255,255,.85);
  font-size: .82rem; font-weight: 600; text-decoration: underline; cursor: pointer;
}
.mbs-promo-modal-close{
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.18); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer;
}
@media (max-width: 575.98px){
  .mbs-promo-modal-panel{ padding: 34px 24px 26px; }
}

/* ---------- Modal form "Tanya MBS" ---------- */
.mbs-form-modal{
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; pointer-events: none; padding: 20px;
}
.mbs-form-modal.is-open{ visibility: visible; pointer-events: auto; }
.mbs-form-modal-backdrop{
  position: absolute; inset: 0; background: rgba(12,46,59,.55);
  opacity: 0; transition: opacity 420ms var(--ease);
}
.mbs-form-modal.is-open .mbs-form-modal-backdrop{ opacity: 1; }

.mbs-form-modal-panel{
  position: relative; width: min(480px, 100%);
  max-height: min(92vh, 92dvh);
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0; transform: translateY(24px) scale(.96);
  transition: transform 480ms var(--ease), opacity 400ms var(--ease);
}
.mbs-form-modal.is-open .mbs-form-modal-panel{ opacity: 1; transform: translateY(0) scale(1); }

/* Area konten yang digulir; panel luar tetap overflow:hidden supaya scrollbar
   selalu terkurung di dalam sudut membulat, tidak "bocor" ke luar kartu. */
.mbs-form-modal-scroll{
  max-height: inherit; overflow-y: auto; overscroll-behavior: contain;
  padding: 38px 18px 32px 32px;
  scrollbar-width: thin; scrollbar-color: var(--mbs-mint) transparent;
}
.mbs-form-modal-scroll::-webkit-scrollbar{ width: 7px; }
.mbs-form-modal-scroll::-webkit-scrollbar-track{ background: transparent; }
.mbs-form-modal-scroll::-webkit-scrollbar-thumb{ background: var(--mbs-mint); border-radius: var(--r-pill); }
.mbs-form-modal-scroll::-webkit-scrollbar-thumb:hover{ background: var(--mbs-teal); }
/* Jarak antara teks dan scrollbar, biar tidak berhimpit */
.mbs-form-modal-head, .mbs-form, .mbs-form-success{ padding-right: 14px; }

.mbs-form-modal-close{
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: #F1F5F3; color: var(--mbs-ink);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer;
}
.mbs-form-modal-head{ text-align: center; margin-bottom: 26px; }
.mbs-form-modal-icon{
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mbs-grad-main); color: #fff; font-size: 1.6rem;
}
.mbs-form-modal-head h2{ font-size: 1.3rem; }
.mbs-form-modal-head p{ margin-top: 8px; font-size: .9rem; }

.mbs-form{ display: flex; flex-direction: column; gap: 18px; }
.form-field label{ display: block; font-size: .84rem; font-weight: 700; color: var(--mbs-ink); margin-bottom: 7px; }
.form-input-wrap{
  position: relative; display: flex; align-items: center;
  background: var(--mbs-bg); border: 1.5px solid #E1E9E5; border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-input-wrap i{ position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--mbs-muted); font-size: 1rem; pointer-events: none; }
.form-input-wrap input, .form-input-wrap textarea{
  width: 100%; border: none; background: transparent; padding: 13px 16px 13px 46px;
  font-family: inherit; font-size: .92rem; color: var(--mbs-ink); border-radius: inherit;
}
.form-input-wrap input:focus, .form-input-wrap textarea:focus{ outline: none; }
.form-input-wrap input::placeholder, .form-input-wrap textarea::placeholder{ color: var(--mbs-muted); opacity: 1; }
.form-input-wrap:focus-within{ border-color: var(--mbs-teal); box-shadow: 0 0 0 4px rgba(10,122,102,.12); }
.form-input-wrap-textarea i{ top: 18px; transform: none; }
.form-input-wrap textarea{ resize: vertical; min-height: 84px; }
.form-error{ display: none; margin-top: 6px; font-size: .78rem; color: #D64545; font-weight: 600; }
.form-field.is-invalid .form-input-wrap{ border-color: #D64545; box-shadow: 0 0 0 4px rgba(214,69,69,.1); }
.form-field.is-invalid .form-error{ display: block; }
.mbs-form-submit{ margin-top: 4px; width: 100%; }

.mbs-form-success{ text-align: center; padding: 10px 0 4px; }
.mbs-form-success-icon{
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mbs-grad-soft); color: var(--mbs-green); font-size: 2rem;
}
.mbs-form-success h3{ font-size: 1.15rem; }
.mbs-form-success p{ margin-top: 8px; font-size: .9rem; }
.mbs-form-success .btn-mbs{ margin-top: 20px; }

@media (max-width: 575.98px){
  .mbs-form-modal{ padding: 12px; }
  .mbs-form-modal-panel{ max-height: min(94vh, 94dvh); }
  .mbs-form-modal-scroll{ padding: 28px 14px 22px 22px; }
  .mbs-form-modal-head, .mbs-form, .mbs-form-success{ padding-right: 8px; }
  .mbs-form-modal-icon{ width: 50px; height: 50px; font-size: 1.35rem; }
  .mbs-form-modal-head h2{ font-size: 1.15rem; }
  .mbs-form{ gap: 14px; }
  .form-input-wrap input, .form-input-wrap textarea{ padding: 12px 14px 12px 42px; font-size: .88rem; }
}

/* ---------- Modal status akreditasi ---------- */
.mbs-akreditasi-modal{
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; pointer-events: none; padding: 20px;
}
.mbs-akreditasi-modal.is-open{ visibility: visible; pointer-events: auto; }
.mbs-akreditasi-modal-backdrop{
  position: absolute; inset: 0; background: rgba(12,46,59,.55);
  opacity: 0; transition: opacity 420ms var(--ease);
}
.mbs-akreditasi-modal.is-open .mbs-akreditasi-modal-backdrop{ opacity: 1; }

/* Panel sendiri tidak overflow:hidden, supaya badge award yang melayang di
   atasnya tidak ikut terpotong; kartu putih + scrollbar justru dibulatkan
   lewat .mbs-akreditasi-modal-scroll (lihat catatan serupa di modal Tanya MBS). */
.mbs-akreditasi-modal-panel{
  position: relative; width: min(480px, 100%); max-height: min(92vh, 92dvh);
  opacity: 0; transform: translateY(24px) scale(.96);
  transition: transform 480ms var(--ease), opacity 400ms var(--ease);
}
.mbs-akreditasi-modal.is-open .mbs-akreditasi-modal-panel{ opacity: 1; transform: translateY(0) scale(1); }

.mbs-akreditasi-modal-scroll{
  max-height: inherit; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: 52px 24px 32px; text-align: center;
  scrollbar-width: thin; scrollbar-color: var(--mbs-mint) transparent;
}
.mbs-akreditasi-modal-scroll::-webkit-scrollbar{ width: 7px; }
.mbs-akreditasi-modal-scroll::-webkit-scrollbar-track{ background: transparent; }
.mbs-akreditasi-modal-scroll::-webkit-scrollbar-thumb{ background: var(--mbs-mint); border-radius: var(--r-pill); }
.mbs-akreditasi-modal-scroll::-webkit-scrollbar-thumb:hover{ background: var(--mbs-teal); }

.mbs-akreditasi-modal-award{
  position: absolute; top: -26px; right: 64px; z-index: 2;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--mbs-grad-main); color: #fff; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.mbs-akreditasi-modal-close{
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: #F1F5F3; color: var(--mbs-ink);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer;
}

/* Sertifikat: kotak cekung (inset) neumorphic di atas latar polos --mbs-bg */
.akreditasi-sertifikat{ background: var(--mbs-bg); border-radius: var(--r-md); box-shadow: var(--shadow-inset); padding: 16px; }
/* Sertifikat resmi umumnya A4 lanskap (rasio ~1.414:1), bukan potret */
.akreditasi-sertifikat .photo-ph{ aspect-ratio: 297 / 210; max-width: 100%; width: 100%; margin: 0 auto; border-radius: var(--r-sm); background: var(--mbs-grad-soft); }
.akreditasi-sertifikat .photo-ph i{ font-size: 2.4rem; }
.akreditasi-status{ margin-top: 22px; font-size: 1.3rem; color: var(--mbs-green-dark); }
.akreditasi-sk{ margin-top: 8px; color: var(--mbs-muted); font-size: .88rem; }

@media (max-width: 575.98px){
  .mbs-akreditasi-modal{ padding: 12px; }
  .mbs-akreditasi-modal-panel{ max-height: min(94vh, 94dvh); }
  .mbs-akreditasi-modal-award{ width: 46px; height: 46px; font-size: 1.2rem; top: -20px; right: 52px; }
  .mbs-akreditasi-modal-scroll{ padding: 44px 16px 24px; }
  .akreditasi-sertifikat{ padding: 10px; }
  .akreditasi-status{ font-size: 1.1rem; margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce){
  .mbs-akreditasi-modal-panel{ transition: none; }
  .mbs-akreditasi-modal-backdrop{ transition: none; }
}

/* ---------- Pencarian cepat: modal form + modal hasil ----------
   Panel menempel agak ke atas (bukan di tengah) supaya keyboard HP tidak menutupi kolom cari. */
.mbs-cari-modal{
  position: fixed; inset: 0; z-index: 1250; display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 10vh, 96px) 20px 20px; visibility: hidden; pointer-events: none;
}
.mbs-cari-modal.is-open{ visibility: visible; pointer-events: auto; }
.mbs-cari-backdrop{ position: absolute; inset: 0; background: rgba(12,46,59,.55); opacity: 0; transition: opacity 320ms var(--ease); }
.mbs-cari-modal.is-open .mbs-cari-backdrop{ opacity: 1; }
.mbs-cari-panel{
  position: relative; width: min(620px, 100%); max-height: calc(100dvh - clamp(16px, 10vh, 96px) - 20px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-14px) scale(.98); transition: transform 360ms var(--ease), opacity 280ms var(--ease);
}
.mbs-cari-modal--hasil .mbs-cari-panel{ width: min(720px, 100%); transform: translateY(18px) scale(.98); }
.mbs-cari-modal.is-open .mbs-cari-panel{ opacity: 1; transform: none; }

.mbs-cari-head{
  position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 14px;
  padding: 18px 18px 18px 22px; background: var(--mbs-grad-main); color: #fff; isolation: isolate; overflow: hidden;
}
.mbs-cari-head::after{ /* kilau lembut di pojok, sama dengan header gradasi lain */
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 220px; height: 220px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(124,214,170,.45), transparent 70%);
}
.mbs-cari-head-icon{
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); font-size: 1.25rem; line-height: 1;
}
.mbs-cari-head-text{ flex: 1 1 auto; min-width: 0; }
.mbs-cari-head h2{ margin: 0; color: #fff; font-size: 1.15rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.mbs-cari-head p{ margin: 2px 0 0; color: rgba(255,255,255,.85); font-size: .84rem; }
.mbs-cari-x{
  flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1;
  background: rgba(255,255,255,.16); color: #fff; transition: background var(--dur) var(--ease);
}
.mbs-cari-x:hover{ background: rgba(255,255,255,.28); }
.mbs-cari-x:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

.mbs-cari-body{ padding: 22px; }
.mbs-cari-scroll{ flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--mbs-mint) transparent; }

.mbs-cari-field{
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; border-radius: var(--r-pill);
  background: var(--mbs-bg); box-shadow: inset 0 0 0 1.5px rgba(10,122,102,.22); transition: box-shadow var(--dur) var(--ease);
}
.mbs-cari-field:focus-within{ box-shadow: inset 0 0 0 1.5px var(--mbs-teal), 0 0 0 4px rgba(124,214,170,.35); }
.mbs-cari-field > .bi{ color: var(--mbs-teal); font-size: 1.1rem; line-height: 1; }
.mbs-cari-field input{
  flex: 1 1 auto; min-width: 0; min-height: 44px; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 1rem; color: var(--mbs-ink); /* 16px: Safari iOS tidak memperbesar halaman saat fokus */
}
.mbs-cari-field input::-webkit-search-cancel-button{ cursor: pointer; }
.mbs-cari-submit{
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--r-pill); background: var(--mbs-grad-main); color: #fff;
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mbs-cari-submit:hover{ box-shadow: 0 8px 18px rgba(10,91,168,.25); }
.mbs-cari-submit:active{ transform: scale(.97); }
.mbs-cari-submit:focus-visible{ outline: 2px solid var(--mbs-teal); outline-offset: 2px; }
.mbs-cari-min{ margin: 8px 0 0 18px; font-size: .8rem; color: #B42318; }

.mbs-cari-label{ margin: 20px 0 10px; font-size: .8rem; font-weight: 800; color: var(--mbs-muted); }
.mbs-cari-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.mbs-cari-chip{
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--mbs-grad-soft); color: var(--mbs-teal); font: inherit; font-size: .85rem; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(10,122,102,.14); transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mbs-cari-chip .bi{ line-height: 1; }
.mbs-cari-chip:hover{ background: var(--mbs-grad-main); color: #fff; }
.mbs-cari-chip:focus-visible{ outline: 2px solid var(--mbs-teal); outline-offset: 2px; }

/* Hasil */
.mbs-cari-group + .mbs-cari-group{ margin-top: 22px; }
.mbs-cari-group-title{ display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .82rem; font-weight: 800; color: var(--mbs-muted); }
.mbs-cari-group-title span{
  min-width: 24px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center;
  background: var(--mbs-grad-soft); color: var(--mbs-teal); font-size: .74rem;
}
.mbs-cari-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mbs-cari-item{
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--mbs-ink); text-decoration: none; transition: background var(--dur) var(--ease);
}
.mbs-cari-item:hover, .mbs-cari-item:focus-visible{ background: #EEF6F2; color: var(--mbs-ink); }
.mbs-cari-item:focus-visible{ outline: 2px solid var(--mbs-teal); outline-offset: -2px; }
.mbs-cari-item-icon{
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: var(--mbs-grad-soft); color: var(--mbs-teal); font-size: 1.2rem; line-height: 1;
}
.mbs-cari-group--section .mbs-cari-item-icon{ background: var(--mbs-grad-main); color: #fff; }
.mbs-cari-item-icon img{ width: 100%; height: 100%; object-fit: cover; }
.mbs-cari-item-body{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mbs-cari-item-body strong{
  font-size: .95rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mbs-cari-item-body small{ font-size: .74rem; font-weight: 700; color: var(--mbs-teal); }
.mbs-cari-item-sub{
  font-size: .82rem; line-height: 1.45; color: var(--mbs-muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mbs-cari-item mark{ padding: 0 2px; border-radius: 4px; background: rgba(124,214,170,.45); color: inherit; }
.mbs-cari-item-go{ flex-shrink: 0; color: var(--mbs-teal); opacity: .55; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.mbs-cari-item:hover .mbs-cari-item-go{ opacity: 1; transform: translateX(3px); }

.mbs-cari-state{ display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 12px; text-align: center; }
.mbs-cari-state[hidden]{ display: none; }
.mbs-cari-state h3{ margin: 0; font-size: 1.05rem; }
.mbs-cari-state p{ margin: 0; max-width: 34ch; font-size: .88rem; color: var(--mbs-muted); }
.mbs-cari-state-icon{
  width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--mbs-grad-soft); color: var(--mbs-teal); font-size: 1.6rem;
}
.mbs-cari-spin{ width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(10,122,102,.18); border-top-color: var(--mbs-teal); animation: mbs-cari-putar .8s linear infinite; }
@keyframes mbs-cari-putar{ to{ transform: rotate(360deg); } }

[dir="rtl"] .mbs-cari-head{ padding: 18px 22px 18px 18px; }
[dir="rtl"] .mbs-cari-field{ padding: 6px 18px 6px 6px; }
[dir="rtl"] .mbs-cari-back .bi, [dir="rtl"] .mbs-cari-submit .bi, [dir="rtl"] .bi-chevron-right.mbs-cari-item-go{ transform: scaleX(-1); }
[dir="rtl"] .mbs-cari-item:hover .bi-chevron-right.mbs-cari-item-go{ transform: scaleX(-1) translateX(3px); }

/* HP: form turun dari atas (keyboard muncul dari bawah), hasil jadi lembar bawah setinggi layar */
@media (max-width: 575.98px){
  .mbs-cari-modal{ padding: 0; }
  .mbs-cari-modal .mbs-cari-panel{ width: 100%; border-radius: 0 0 var(--r-md) var(--r-md); max-height: 100dvh; transform: translateY(-24px); }
  .mbs-cari-head{ padding: calc(14px + env(safe-area-inset-top)) 12px 14px 16px; gap: 12px; }
  .mbs-cari-head-icon{ width: 40px; height: 40px; font-size: 1.05rem; }
  .mbs-cari-head h2{ font-size: 1.02rem; }
  .mbs-cari-head p{ font-size: .78rem; }
  .mbs-cari-body{ padding: 16px; }
  .mbs-cari-submit{ width: 44px; padding: 0; justify-content: center; }
  .mbs-cari-submit span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mbs-cari-modal--hasil{ align-items: flex-end; }
  .mbs-cari-modal--hasil .mbs-cari-panel{ height: 92dvh; border-radius: var(--r-md) var(--r-md) 0 0; transform: translateY(32px); }
  .mbs-cari-modal--hasil .mbs-cari-body{ padding: 12px 10px calc(16px + env(safe-area-inset-bottom)); }
  .mbs-cari-item{ gap: 12px; padding: 10px 8px; }
  .mbs-cari-item-icon{ width: 42px; height: 42px; border-radius: 12px; font-size: 1.1rem; }
  .mbs-cari-group-title{ padding-inline: 8px; }
  [dir="rtl"] .mbs-cari-head{ padding: calc(14px + env(safe-area-inset-top)) 16px 14px 12px; }
}
@media (prefers-reduced-motion: reduce){
  .mbs-cari-panel, .mbs-cari-backdrop, .mbs-cari-item-go{ transition: none; }
  .mbs-cari-spin{ animation-duration: 2.4s; }
}

/* ---------- Skeleton grid util ---------- */
.row-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1199.98px){ .row-4{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899.98px){ .row-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Pemadatan mobile: font, ikon, tombol masih kebesaran di HP ----------
   Diletakkan terakhir di file supaya menang atas rule section per-komponen
   (spesifisitas sama, urutan sumber yang menentukan). */
@media (max-width: 767.98px){
  .eyebrow{ font-size: .72rem; padding: 6px 14px; gap: 6px; }
  .section-head h2{ font-size: clamp(1.5rem, 4.6vw, 2rem); }
  .section-head p{ font-size: .94rem; }
  .btn-mbs{ min-height: 44px; padding: 10px 22px; font-size: .88rem; gap: 7px; }
  .icon-box{ width: 46px; height: 46px; font-size: 1.25rem; }
}
@media (max-width: 575.98px){
  .eyebrow{ font-size: .68rem; padding: 5px 12px; }
  .section-head h2{ font-size: clamp(1.32rem, 6vw, 1.6rem); }
  .section-head p{ font-size: .88rem; }
  /* tinggi tombol tetap >=44px (target sentuh), yang dipadatkan cuma font & padding */
  .btn-mbs{ min-height: 44px; padding: 9px 18px; font-size: .84rem; }
  .icon-box{ width: 42px; height: 42px; font-size: 1.1rem; }
  .mbs-view-ico{ width: 28px; height: 28px; font-size: .82rem; }
}

/* ---------- Ketahanan layar ekstrem (skill responsive-mobile) ----------
   Diuji lewat CDP: Fold 280px, landscape HP, inset notch/home indicator,
   split-screen iPad, font sistem 20-24px. */

/* Target sentuh >=44px untuk tautan baris "Lihat detail"/"Baca selengkapnya"
   (dulu 28px) dan dots slider (7px; area sentuh diperluas tanpa mengubah
   ukuran titik yang terlihat). */
/* (pointer: coarse) = perangkat sentuh berapa pun lebarnya (tablet, HP
   landscape >=768px); desktop dengan mouse tidak berubah. */
@media (max-width: 767.98px), (pointer: coarse){
  .mbs-view-link{ min-height: 44px; }
  .academic-tile a, .news-link{ margin-top: 6px; }
  .mbs-hero-mslider .swiper-pagination-bullet{ position: relative; }
  .mbs-hero-mslider .swiper-pagination-bullet::after{ content: ""; position: absolute; inset: -19px -4px; }
  /* tautan teks footer: area sentuh 44px, jarak antar-baris dikurangi supaya
     tinggi daftar tidak membengkak */
  .footer-col ul{ gap: 0; }
  .footer-col ul a, .footer-bottom-links a{ display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}
@media (pointer: coarse){
  .topbar-links a, .topbar-actions a, .mbs-navbar .mbs-menu > li > a, .mbs-navbar .mbs-menu-toggle{
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  }
}

/* Kata panjang ("Pembelajaran", "Berkelanjutan") pecah di dalam kartu,
   bukan mendorong kolom grid melebar. */
.academic-tile h3, .intl-card h3, .sdg-tile h3, .sektor-card h3, .campuslife-caption h3{
  overflow-wrap: break-word; hyphens: auto;
}

/* Breakpoint dalam em ikut membesar saat pengguna memperbesar font sistem:
   22.49em = 360px pada font 16px, 540px pada font 24px. */
@media (max-width: 22.49em){
  .mbs-navbar .container-mbs{ gap: 10px; }
  .mbs-navbar .brand-text small{ display: none; }
  /* label tombol panjang boleh 2 baris, bukan memaksa kolom melebar */
  .btn-mbs{ white-space: normal; text-align: center; }
}
/* <320px pada font normal (HP lipat 280px), atau HP biasa dengan font besar:
   kartu berdeskripsi jadi 1 kolom supaya teks tidak terjepit. */
@media (max-width: 19.99em){
  .academics-grid, .sdgs-grid, .sektor-grid, .row-4, .campuslife-grid, .footer-grid{ grid-template-columns: minmax(0, 1fr); }
}

/* Landscape HP (tinggi layar pendek): kartu slider dibuat lanskap dan
   tingginya dihitung dari tinggi layar, supaya navbar + slider muat satu
   layar (dulu 131% tinggi layar di 667x375). */
/* Layar pendek (landscape HP): tombol melayang langsung mode ikon, label
   penuhnya menutupi konten yang ruang vertikalnya sudah sempit. */
@media (max-height: 500px){
  .fab-service, .fab-akreditasi{ padding: 13px; gap: 0; }
  .fab-service .fab-service-text, .fab-akreditasi .fab-akreditasi-text{ max-width: 0; opacity: 0; }
}
@media (max-width: 767.98px) and (max-height: 500px){
  .mbs-hero-mslider{
    padding: 14px 0 40px; --swiper-pagination-bottom: 14px;
    --mslide-w: min(60%, calc((100dvh - var(--nav-h) - 64px) * 1.6));
  }
  .mbs-hero-mslider .swiper-slide{ aspect-ratio: 16 / 10; }
}