/* 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);
}

/* ---------- 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;
}

/* ---------- 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 ---------- */
/* Putih, dengan semburat hijau gelap tipis di sisi kanan; navbar hijau di bawahnya. */
.mbs-topbar{
  background:
    linear-gradient(90deg, rgba(5, 59, 36, 0) 0%, rgba(5, 59, 36, 0) 45%, rgba(11, 110, 63, .08) 72%, rgba(5, 59, 36, .2) 100%),
    #fff;
  border-bottom: 1px solid rgba(11, 110, 63, .12);
  color: var(--mbs-ink);
  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: var(--mbs-muted); }
.topbar-links a{ color: var(--mbs-ink); transition: color var(--dur); }
.topbar-links a:hover{ color: var(--mbs-green-dark); text-decoration: underline; }
.topbar-actions{ display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.topbar-actions a{ font-weight: 600; color: var(--mbs-ink); }
.topbar-actions a:hover{ color: var(--mbs-green-dark); text-decoration: underline; }
/* Tombol aksen: pil hijau gelap, menonjol di atas semburat hijau sisi kanan */
.topbar-actions a.is-accent{ padding: 3px 12px; border-radius: var(--r-pill); background: var(--mbs-green-dark); color: #fff; }
.topbar-actions a.is-accent:hover{ background: #053B24; color: #fff; text-decoration: none; }
.mbs-topbar :focus-visible{ outline: 2px solid var(--mbs-blue-light); 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: var(--mbs-ink); cursor: pointer; }
.topbar-logout button:hover{ color: var(--mbs-green-dark); text-decoration: underline; }
.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); }

/* 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); }

/* 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); }
@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;
}
.mbs-hero::before, .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;
  animation: mbsBlob 14s ease-in-out infinite;
}
.mbs-hero::before{ width: 420px; height: 420px; background: var(--mbs-blob-1); top: -120px; left: -120px; }
.mbs-hero::after{ width: 340px; height: 340px; background: var(--mbs-blob-2); bottom: -100px; right: -80px; animation-direction: reverse; }
.mbs-hero-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; 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; }
.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); }
.mbs-hero-badge{
  position: absolute; left: -16px; bottom: 26px; 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; }
.mbs-stats{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  background: var(--mbs-green-dark); 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; }

@media (max-width: 1199.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); }
  .mbs-hero-grid > *{ min-width: 0; }
  .mbs-hero-visual{ max-width: 420px; margin: 0 auto; aspect-ratio: 16/10; }
  .mbs-hero-badge{ display: none; }
}
@media (max-width: 767.98px){
  .mbs-hero{ padding: 0 0 32px; }
  /* Gambar hero aslinya potret 4:5 (sama dengan desktop); 16:10 dari
     breakpoint 1199 memotong lebih dari separuh poster di HP. */
  .mbs-hero-visual{ aspect-ratio: 4 / 5; }
  /* Di HP statistik tidak lagi ditarik naik menumpuk visual hero: jarak
     visual -> statistik = padding-bawah hero (32px). */
  .mbs-stats-overlap{ margin-top: 0; }
  .mbs-stats{ grid-template-columns: repeat(3, 1fr); row-gap: 22px; padding: 22px 16px; }
  .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; }
/* 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; }
}

/* ---------- 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)));
}
.mbs-banner-photo{ grid-area: 1 / 1 / 3 / 2; aspect-ratio: 16/5; min-height: 0; border-radius: 0; position: relative; }
.mbs-banner-photo::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(12,46,59,.6), rgba(10,91,168,.5));
  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;
}
.mbs-banner-caption h2{
  font-size: clamp(1.5rem, 4vw, 2.6rem); margin: 0; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.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);
}
/* 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){
  .mbs-banner{ display: block; }
  .mbs-banner > .mbs-stats-overlap{ transform: none; margin-bottom: 0; }
  .mbs-banner-photo{ aspect-ratio: 16/9; margin-top: -48px; }
  .mbs-banner-caption{ position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 16/9; padding: 24px; }
}
@media (max-width: 575.98px){ .mbs-banner-photo{ margin-top: -34px; } }

/* ---------- 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) ---------- */
.mbs-curriculum{ background: var(--mbs-grad-soft); }
.curriculum-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.curriculum-card{
  background: #fff; border-radius: var(--r-lg); padding: 34px 28px; box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--mbs-green);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.curriculum-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-blue-hover); }
.curriculum-card:nth-child(2){ border-top-color: var(--mbs-teal); }
.curriculum-card:nth-child(3){ border-top-color: var(--mbs-blue); }
.curriculum-num{
  display: block; font-family: var(--font-display); font-weight: 800; font-size: .85rem;
  letter-spacing: .06em; color: var(--mbs-muted);
}
.curriculum-card h3{ font-size: 1.2rem; margin-top: 10px; }
.curriculum-card p{ font-size: .92rem; margin-top: 12px; }
@media (max-width: 899.98px){ .curriculum-grid{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px){ .curriculum-card{ padding: 26px 22px; } }

/* ---------- 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;
}
/* Kartu: latar putih keabuan, bingkai hijau tebal, dua bulatan dekor, logo kampus,
   foto bersudut asimetris, chip rating, pil nama, status + lembaga, medali.
   Semua posisi dalam % dan ukuran teks dalam cqw (lebar kartu), diukur dari
   desain acuan 302x348px, jadi proporsinya sama di desktop maupun HP. */
.alumni-kartu{
  position: relative; aspect-ratio: 302 / 348; container-type: inline-size;
  background: #F9F9F9; border: 3px solid var(--mbs-green-dark); border-radius: 30px;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.alumni-kartu:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }

.alumni-bulat{ position: absolute; aspect-ratio: 1; border-radius: 50%; }
.alumni-bulat-peach{ left: 55%; top: 5.7%; width: 32.5%; background: #FCE4B8; }
.alumni-bulat-lavender{ left: 10.6%; top: 67.8%; width: 20.5%; background: #D6CFFC; }

.alumni-logo{
  position: absolute; left: 5.3%; top: 5%; z-index: 2; width: 16.5%; aspect-ratio: 1;
  border-radius: 50%; background: var(--mbs-green-dark); padding: 1.3cqw;
}
.alumni-logo img{ display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 1px solid #fff; }
/* Bulatan kecil di kanan bawah logo */
.alumni-logo::after{
  content: ""; position: absolute; right: -4%; bottom: -4%; width: 34%; aspect-ratio: 1;
  border-radius: 50%; background: #fff; border: 1.5px solid var(--mbs-green-dark);
}

.alumni-foto{
  position: absolute; left: 21.9%; top: 20.1%; z-index: 1; width: 48.7%; height: 56.6%;
  border: 1cqw solid #fff; border-radius: 6cqw .8cqw 11cqw .8cqw;
  overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  min-height: 0; padding: 0; /* batalkan min-height:100% + padding dari .photo-ph */
}
.alumni-foto img{ width: 100%; height: 100%; object-fit: cover; }
/* Latar frame foto = gradasi tema (terlihat di balik foto berlatar transparan) */
.alumni-foto.photo-ph{ background: var(--mbs-grad-main); color: #fff; }
.alumni-foto i{ font-size: 16cqw; color: #fff; }

.alumni-rating{
  position: absolute; left: 13.9%; top: 39.7%; z-index: 3; width: 14%;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.3cqw 0 1.4cqw; background: #fff; border-radius: 2cqw;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  line-height: 1; text-align: center;
}
.alumni-rating-titik{ display: flex; gap: .55cqw; margin-bottom: 1.2cqw; }
.alumni-rating-titik i{ width: .9cqw; height: .9cqw; border-radius: 50%; background: #5B78DB; }
.alumni-rating strong{ font-size: 4.6cqw; font-weight: 800; color: #1A1A1A; }
.alumni-rating small{ margin-top: .7cqw; font-size: 1.9cqw; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #7D8FC8; }

.alumni-nama{
  position: absolute; right: 8.6%; top: 58.6%; z-index: 3; height: 10.3%; max-width: 64%;
  display: flex; align-items: center; padding: 0 4.5cqw;
  background: var(--mbs-grad-main); border-radius: 3.3cqw;
  box-shadow: 0 3px 10px rgba(11, 110, 63, .25);
  color: #fff; font-size: 5.6cqw; font-weight: 700; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.alumni-info{
  position: absolute; left: 10%; right: 20%; top: 80.5%; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.alumni-status{
  max-width: 100%; font-size: 4.1cqw; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: var(--mbs-green-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alumni-lembaga{
  display: flex; align-items: center; gap: 2cqw; max-width: 100%; margin-top: 1.4cqw;
  font-size: 4.1cqw; font-weight: 700; color: #111;
}
.alumni-lembaga svg{
  width: 6.6cqw; height: 6.6cqw; flex-shrink: 0;
  fill: none; stroke: var(--mbs-green-dark); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round;
}
.alumni-lembaga span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.alumni-medali{
  position: absolute; left: 76.5%; top: 75.8%; width: 15%; height: auto;
  fill: #F9F9F9; stroke: var(--mbs-green-dark); stroke-width: 1.8; stroke-linejoin: round;
}
.alumni-medali path:last-child{ fill: none; }

/* 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; }

@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; }
/* 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 (slider per dosen) ---------- */
.tridarma-jalur{ --tampil: 1.05; --sela: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tridarma-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;
}
.tridarma-geser::-webkit-scrollbar{ display: none; }
.tridarma-geser:focus-visible{ outline: 3px solid var(--mbs-blue-light); outline-offset: 4px; border-radius: 12px; }
.tridarma-item{
  flex: 0 0 calc((100% - (var(--tampil) - 1) * var(--sela)) / var(--tampil));
  scroll-snap-align: start;
}
.tridarma-kartu{
  height: 100%; overflow: hidden;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tridarma-kartu:hover{ transform: translateY(-6px); box-shadow: var(--shadow-blue-hover); }
.tridarma-head{ background: var(--mbs-grad-main); padding: 18px 24px; }
.tridarma-nama{ margin: 0; font-size: 1.04rem; color: #fff; }
.tridarma-body{ min-width: 0; padding: 20px 24px 24px; }
.tridarma-baris{ margin-top: 14px; padding-top: 14px; border-top: 1px solid #EEF2EF; }
.tridarma-baris:first-child{ margin-top: 0; padding-top: 0; border-top: none; }
.tridarma-tag{ display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.tridarma-baris--riset .tridarma-tag{ color: var(--mbs-green); }
.tridarma-baris--abdimas .tridarma-tag{ color: var(--mbs-blue); }
.tridarma-baris p{ margin-top: 6px; font-size: .88rem; line-height: 1.45; color: var(--mbs-ink); }
.tridarma-tahun{ display: inline-block; margin-top: 7px; font-size: .74rem; color: var(--mbs-muted); font-weight: 600; }

.tridarma-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);
}
.tridarma-panah:hover{ background: var(--mbs-grad-main); color: #fff; transform: scale(1.07); }
.tridarma-panah:disabled{ opacity: .35; cursor: default; transform: none; }
.tridarma-jalur.is-geser-tanpa-panah .tridarma-panah{ display: none; }
.tridarma-panah-kiri{ order: 2; margin-left: auto; }
.tridarma-panah-kanan{ order: 3; margin-right: auto; }

@media (max-width: 575.98px){ .tridarma-head{ padding: 16px 20px; } .tridarma-body{ padding: 18px 20px 20px; } }
@media (min-width: 576px){ .tridarma-jalur{ --tampil: 1.35; --sela: 22px; } }
@media (min-width: 768px){ .tridarma-jalur{ --tampil: 1.9; --sela: 24px; } }
@media (min-width: 992px){
  .tridarma-jalur{ --tampil: 2.4; display: block; position: relative; padding: 0 58px; }
  .tridarma-panah{ position: absolute; top: 50%; transform: translateY(-50%); }
  .tridarma-panah:hover{ transform: translateY(-50%) scale(1.07); }
  .tridarma-panah-kiri{ left: 0; margin: 0; }
  .tridarma-panah-kanan{ right: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce){
  .tridarma-kartu, .tridarma-panah{ transition: none; }
  .tridarma-geser{ scroll-behavior: auto; }
}

/* ---------- 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. */
.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; }

@media (max-width: 575.98px){
  /* foto menempel sudut kiri atas kartu, bukan di tengah vertikal */
  .ujian-kartu{ padding: 16px; gap: 12px; align-items: flex-start; }
  /* label kategori di foto 96px: tembus pandang + satu baris kecil di tepi
     atas, supaya tidak terbungkus 2 baris dan jatuh menutupi wajah */
  .ujian-badge{
    top: 5px; left: 4px; padding: 3px 6px;
    font-size: .52rem; letter-spacing: 0;
    background: rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .ujian-foto, .ujian-foto-wrap{ width: 96px; }
  .ujian-foto i{ font-size: 1.5rem; }
  .ujian-foto-accent{ width: 38px; height: 38px; right: -8px; bottom: -8px; }
  .ujian-foto-arrow{ width: 28px; height: 28px; font-size: .74rem; left: -8px; bottom: -8px; }
  .ujian-mhs{ font-size: 1rem; }
  .ujian-judul{ font-size: .84rem; }
}
@media (min-width: 576px){ .ujian-jalur{ --tampil: 1.14; --sela: 22px; } }
@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; }
}

/* ---------- 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); }
.testi-avatar{ width: 46px; height: 46px; border-radius: 50%; padding: 0; flex-shrink: 0; }
.testi-person strong{ display: block; font-size: .92rem; }
.testi-person span{ font-size: .78rem; color: var(--mbs-muted); }

/* ---------- Karya Inovasi (reuse .news-card) ---------- */
.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; }
@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; } }

/* ---------- 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; }
.campuslife-card{ position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; 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; 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)); } }
/* Kartu 4:3 di 2 kolom HP cuma ~160x120px, keterangan menutupi foto: jadi 1 kolom penuh */
@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; }
.footer-bottom-links{ display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 991.98px){ .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } }
@media (max-width: 575.98px){
  .mbs-footer{ padding-top: 52px; }
  .footer-grid{ grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 32px; }
  .footer-bottom{ flex-direction: column; text-align: 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: var(--mbs-grad-main); color: #fff;
  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: .85; font-weight: 600; }
.fab-service i{ font-size: 1.15rem; }

/* 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; }
}

/* ---------- 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; }
}