:root{
  --brand:#550169; --brand-deep:#8e0000; --brand-purple:#7b1fa2; --brand-green:#1b5e20; --brand-gold:#fbc02d;
  --ink:#111827; --muted:#6b7280; --soft:#faf6f7; --radius:18px; --shadow:0 18px 50px rgba(100,0,0,.14);
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; letter-spacing:.1px}
.bg-soft{background:linear-gradient(180deg,#fff 0%, var(--soft) 100%)}
h1,h2,h3,h4,h5{color:var(--ink)} .text-brand{color:var(--brand)}
.link-brand{color:var(--brand); text-decoration:none} .link-brand:hover{color:var(--brand-deep); text-decoration:underline}
.btn-brand{background:linear-gradient(90deg,var(--brand),var(--brand-purple));color:#fff;border:0;border-radius:12px;box-shadow:var(--shadow)}
.btn-brand:hover{filter:brightness(.95);color:#fff}
.btn-outline-brand{border:2px solid var(--brand); color:var(--brand); border-radius:12px} .btn-outline-brand:hover{background:var(--brand);color:#fff}
.bg-badge{background:linear-gradient(90deg,var(--brand),var(--brand-purple));color:#fff}
.border-brand-subtle{border-color:rgba(198,40,40,.25)!important}
.card{border-radius:16px} .card-hover{transition:transform .18s ease, box-shadow .18s ease} .card-hover:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.section-head .eyebrow{font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:#8b5e5e; font-weight:800}

/* Top header + overlay menu (UPH-like) */
.header-top{background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:1040}
.header-top .brand-text{font-weight:800; letter-spacing:.02em}
.header-top .search{max-width:520px; width:100%}
.header-top .lang a{color:#666; text-decoration:none; margin:0 .25rem} .header-top .lang a.active{color:#000; font-weight:700}
.header-top .menu-btn{border:0; background:#000; color:#fff; padding:.55rem .9rem; border-radius:999px; display:flex; align-items:center; gap:.5rem}
.header-top .menu-btn .dot{width:18px; height:2px; background:#fff; position:relative; display:inline-block}
.header-top .menu-btn .dot::before,.header-top .menu-btn .dot::after{content:""; position:absolute; left:0; right:0; height:2px; background:#fff}
.header-top .menu-btn .dot::before{top:-6px} .header-top .menu-btn .dot::after{bottom:-6px}

/* Fullscreen overlay */
.nav-overlay{position:fixed; inset:0; background:#000; color:#fff; transform:translateY(-2%); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:1050}
.nav-overlay.show{opacity:1; transform:translateY(0); pointer-events:auto}
.nav-overlay a{color:#fff; text-decoration:none}
.nav-overlay .wrap{display:grid; grid-template-columns:1fr 1.4fr; height:100%}
.nav-overlay .left{padding:48px 32px 24px 32px; border-right:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:18px}
.nav-overlay .left .title{font-weight:800; margin-top:8px}
.nav-overlay .left ul{list-style:none; padding:0; margin:0}
.nav-overlay .left li{margin:.35rem 0}
.nav-overlay .social a{margin-right:.65rem; opacity:.85}
.nav-overlay .social a:hover{opacity:1}
.nav-overlay .right{padding:32px}
.nav-overlay .search-row{display:flex; align-items:center; gap:8px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:8px}
.nav-overlay .cat{display:flex; align-items:center; justify-content:space-between; padding:18px 12px; border-bottom:1px solid rgba(255,255,255,.12); cursor:pointer}
.nav-overlay .cat:hover{background:rgba(255,255,255,.04)}
.nav-overlay .chev{opacity:.85}
.nav-overlay .submenu{display:none; padding:10px 24px 16px 24px; background:#0c0c0c}
.nav-overlay .submenu a{display:block; padding:6px 0; color:#ddd}
.nav-overlay .submenu a:hover{color:#fff; text-decoration:underline}
.nav-overlay .close{position:absolute; top:24px; right:24px; background:transparent; border:0; color:#fff; font-size:28px; opacity:.85}
.nav-overlay .close:hover{opacity:1}
@media (max-width: 991.98px){ .nav-overlay .wrap{grid-template-columns:1fr} .nav-overlay .left{border-right:0; border-bottom:1px solid rgba(255,255,255,.12)}}
/* Footer */
.footer{background:#000}
.footer .footer-title{font-weight:800; font-size:.9rem; letter-spacing:.06em; text-transform:uppercase}
.footer .campus-list a,.footer .ql-list a{color:#ddd; text-decoration:none}
.footer .campus-list a:hover,.footer .ql-list a:hover{color:#fff; text-decoration:underline}


/* ===== v12: overlay menu limited to Bootstrap container width, responsive ===== */
:root{
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;
}
@media (min-width: 992px){ .container-fixed { max-width: var(--container-lg); margin-inline:auto; padding-inline: 1rem; } }
@media (min-width: 1200px){ .container-fixed { max-width: var(--container-xl); } }
@media (min-width: 1400px){ .container-fixed { max-width: var(--container-xxl); } }
/* Full overlay stays black edge-to-edge, but inner grid follows container width */
.nav-overlay .wrap { width: min(100% - 2rem, var(--container-xl)); margin-inline: auto; }
@media (min-width: 1400px){ .nav-overlay .wrap { width: min(100% - 2rem, var(--container-xxl)); } }
.nav-overlay .wrap { grid-template-columns: 0.9fr 1.1fr; }
@media (max-width: 991.98px){ .nav-overlay .wrap { width: 100%; } .nav-overlay .left, .nav-overlay .right { padding-inline: 1rem; } }

/* Slightly tighter row heights like UPH */
.nav-overlay .cat{ padding:16px 12px }
.nav-overlay .submenu{ padding:10px 20px 16px 20px }


/* ===== v14: Hero carousel (Bootstrap) with brand overlay ===== */
/* HERO SLIDER (background-image) */
.hero-slider .slide-bg{
  width: 100%;
  /* Pastikan PUNYA TINGGI */
  aspect-ratio: 21 / 9;              /* modern, jaga proporsi */
  height: clamp(280px, 65vh, 640px);  /* fallback & kontrol tinggi */
  background-image: var(--bg);        /* bisa diisi url(...) via inline style */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  position: relative;
}
.hero-slider .hero-overlay{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, rgba(0,0,0,0));
  
background-color: #27001a; opacity: 0.8; height: 100%;
  pointer-events: none;
}
.hero-slider .hero-caption{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; padding: 2rem;
  text-shadow: 0 6px 30px rgba(0,0,0,.35);
}
.hero-slider .hero-caption h2{ font-weight: 800; letter-spacing: .2px; }
.hero-slider .caption{ position:absolute; inset:0; display:flex; align-items:center;  text-shadow: 1px 1px 5px #000; }
.hero-slider .caption .inner{ color:#fff }
.hero-slider .btn-brand{ box-shadow:0 12px 40px rgba(229,57,53,.35) }


/* ===== v15: Alternating sections (white / dark brand) ===== */
.section-dark{ 
  background: radial-gradient(800px 400px at 10% 0%, rgba(229,57,53,.12), transparent),
              radial-gradient(900px 500px at 90% 100%, rgba(123,31,162,.14), transparent),
              #0c0a0a; 
  color:#f5f5f5;
}
.section-dark .text-muted{ color: rgba(255,255,255,.75)!important }
.section-dark .card{ background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.18)!important; }
.section-dark .card .text-muted{ color: rgba(255,255,255,.75)!important }
.section-dark .btn-outline-brand{ color:#fff; border-color:rgba(255,255,255,.5); }
.section-dark .btn-outline-brand:hover{ background:#fff; color:#111 }
.section-dark .link-brand{ color:#fff }
.section-dark .eyebrow{ color:#e0c8c8 }
.section-dark a{ color:#fff }
.section-dark .badge.bg-badge{ background: linear-gradient(90deg,var(--brand),var(--brand-purple)); color:#fff; }

/* Tighten section spacing on mobile */
@media (max-width: 575.98px){
  section{ padding-top: 2.25rem!important; padding-bottom: 2.25rem!important; }
}

.whatsapp{
    position: fixed;
    bottom: 50px;
    right: 10px;
}
.whatsapp img{
    width: 64px;
    height: auto;
    z-index: 99999999999;
}

:root{
  --uji-brand-1: #8B1A3A;   /* merah marun */
  --uji-brand-2: #4B2C82;   /* ungu */
  --uji-ink:     #1f2328;   /* teks gelap */
  --uji-muted:   #6b7280;   /* abu teks */
  --uji-ring:    rgba(75,44,130,.35); /* fokus ring */
}

.pagination-brand{
  --bs-pagination-border-color: rgba(0,0,0,.06);
  --bs-pagination-hover-border-color: rgba(0,0,0,.12);
  --bs-pagination-focus-color: #fff;
  --bs-pagination-focus-bg: linear-gradient(135deg, var(--uji-brand-1), var(--uji-brand-2));
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(75,44,130,.12);
  --bs-pagination-disabled-color: #9aa0a6;
  --bs-pagination-disabled-bg: rgba(0,0,0,.03);
  --bs-pagination-disabled-border-color: rgba(0,0,0,.06);
}

/* Bentuk pil + ukuran target sentuh nyaman */
.pagination-brand .page-link{
  border-radius: 9999px !important;
  min-width: 44px;
  height: 44px;
  padding: .5rem .9rem;
  border: 1px solid var(--bs-pagination-border-color);
  color: var(--uji-ink);
  background-color: #fff;
  transition: all .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.pagination-brand .page-link:hover{
  color: var(--uji-ink);
  border-color: var(--bs-pagination-hover-border-color);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* State aktif: gradien merah → ungu */
.pagination-brand .page-item.active .page-link{
  color: #fff;
  border-color: transparent;
  background-image: linear-gradient(135deg, var(--uji-brand-1), var(--uji-brand-2));
  box-shadow: 0 10px 28px rgba(75,44,130,.25);
}

/* Disabled */
.pagination-brand .page-item.disabled .page-link{
  color: var(--bs-pagination-disabled-color);
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
  box-shadow: none;
}

/* Fokus (keyboard/accessibility) */
.pagination-brand .page-link:focus{
  outline: none;
  box-shadow: 0 0 0 .25rem var(--uji-ring);
}

/* Varian kecil & besar (opsional) */
.pagination-brand.pagination-sm .page-link{
  min-width: 36px; height: 36px; padding: .35rem .7rem; font-size: .9rem;
}
.pagination-brand.pagination-lg .page-link{
  min-width: 52px; height: 52px; padding: .65rem 1.1rem; font-size: 1.05rem;
}

/* Gunakan di background gelap (mis. footer hitam) */
.pagination-dark .page-link{
  background-color: rgba(255,255,255,.08);
  color: #e7e9ee;
  border-color: rgba(255,255,255,.12);
}
.pagination-dark .page-link:hover{
  background-color: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
.pagination-dark .page-item.active .page-link{
  color:#fff; border-color: transparent;
  background-image: linear-gradient(135deg, var(--uji-brand-1), var(--uji-brand-2));
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.pagination-dark .page-item.disabled .page-link{
  color: rgba(255,255,255,.45);
  background-color: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}

/* Responsive: ringkas di layar kecil -> tampilkan tombol penting saja */
@media (max-width: 576px){
  .pagination-brand .page-item .page-text{ display: none; }  /* sembunyikan teks “Previous/Next” jika pakai ikon */
  .pagination-brand .page-item.d-sm-inline{ display: none !important; } /* kamu bisa beri class ini pada nomor yang boleh hilang di mobile */
}

/* Spasi di sekitar pagination */
.pagination-wrap{
  display:flex; align-items:center; justify-content:center;
  gap:.5rem; margin-top:1.25rem;
}

.share-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 0px;
  margin-bottom: 20px;
}

.share-buttons a {
  text-decoration: none;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s, transform 0.2s;
  padding: 7px !important;
}

.share-buttons a:hover {
  transform: scale(1.1);
}

.share-buttons .facebook {
  background-color: #1877f2;
}

.share-buttons .twitter {
  background-color: #333;
}

.share-buttons .whatsapp_ {
  background-color: #25d366;
}

.share-buttons .linkedin {
  background-color: #0077b5;
}

.share-buttons a i {
  font-size: 18px;
}

.prodi-bg{
  width: 100%;
  aspect-ratio: 21 / 5;               
  height: clamp(280px, calc(100vw * 4 / 21), 640px);  
  background-image: var(--bg);        
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  position: relative;
}
.prodi-overlay{
  content:"";
  position: absolute; inset: 0;
  opacity: 0.8; height: 100%;
  pointer-events: none;
}
.prodi-caption{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; padding: 2rem;
  text-shadow: 0 6px 30px rgba(0,0,0,.35);
}
.prodi-caption h2{ font-weight: 800; letter-spacing: .2px; }
.prodi .caption{ position:absolute; inset:0; display:flex; align-items:center;  text-shadow: 1px 1px 5px #000; }
.prodi .caption .inner{ color:#fff }
.prodi .btn-brand{ box-shadow:0 12px 40px rgba(229,57,53,.35) }