:root{
  --brand:#003087;
  --ink:#555555;
  --paper:#ffffff;
  --hero:#0b1e4b;
  --muted:#E5E7EB;
  --divider:#CCCCCC;
}

@font-face{
  font-family:'Gotham';
  src:url('../fonts/gotham-medium.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Gotham';
  src:url('../fonts/gotham-black.ttf') format('truetype');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Gotham', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.about .site-header,
body.registration .site-header,
body.academic .site-header,
body.contact .site-header {
  background-color: var(--hero);; /* warna biru template */
}

h1{
  font-family:'Gotham', sans-serif;
  font-weight:900;
  color:var(--brand);
  font-size:clamp(28px, 4.2vw, 44px);
  line-height:1.2;
  margin:0 0 12px 0;
}
h2{
  font-weight:900;
  color:var(--brand);
  font-size:clamp(18px, 2.4vw, 24px);
  margin:8px 0 8px;
}
p{ margin:0 0 14px 0; color:var(--ink); }

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ width:min(1200px, 92%); margin-inline:auto; }

/* ========================= */
/* HEADER / NAV */
/* ========================= */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background:transparent;
  transition: background .25s ease, box-shadow .25s ease;
}

.site-header.scrolled {
  position:fixed;
  background: var(--hero); /* biru solid setelah scroll */
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0;
}
.nav-toggle{
  display:none; background:transparent; border:0; cursor:pointer; width:36px; height:28px;
}
.nav-toggle span{ display:block; height:3px; margin:5px 0; background:#fff; border-radius:3px; }
.nav ul{
  list-style:none; display:flex; gap:22px; margin:0; padding:0;
}
.nav a{ color:#fff; font-weight:500; text-decoration:none; }
.nav a.active{ text-decoration:underline; text-underline-offset:6px; }
.nav .lang{ display:flex; align-items:center; gap:8px; }
.nav .lang .flag{ width:20px; height:14px; display:inline-block; vertical-align:middle; }
.nav .lang .sep{ opacity:.8; }

/* ========================= */
/* HERO SECTION */
/* ========================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* full screen */
  background-size: cover;
  background-position: center;
  margin-top: 0; /* pastikan tidak turun */
}

/* Swiper slide full screen */
.hero .swiper-slide {
  position: relative;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Gradient overlay langsung muncul sejak awal */
.hero .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11,30,75,.6), rgba(11,30,75,.6));
  z-index: 1;
}

/* Hero content */

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px; /* biar tidak terlalu lebar */
  margin: 0 auto;
  padding-top: 120px; /* offset biar gak ketiban header */
  display: flex;
  align-items: center;   /* vertikal tengah */
  justify-content: flex-start; /* posisikan ke kiri */
  min-height: 80vh; /* supaya block teksnya tetap ditengah hero */
}

.hero-copy {
  max-width: 680px;
  /* margin-inline: auto; */
  text-align: left; /* rata kiri, bukan center */
}

.hero h1 { color: #fff; }

/* Buttons */
.btn{
  display:inline-block; padding:12px 22px; border-radius:100px; font-weight:700;
}
.btn-outline{ border:2px solid #fff; color:#fff; }
.btn-outline:hover{ background:#fff; color:var(--hero); text-decoration:none; }

/* ========================= */
/* SECTIONS & GRID */
/* ========================= */
.section {
  padding: 64px 0;
  margin-top: 0; /* offset header */
}
.section-banner {
  /* padding: 64px 0; */
  margin-top: 0; /* offset header */
}
.bg-white{ background:#fff; }
.letter{ background:#fff; }
.letter.alt{ background:var(--muted); }
.affiliates{ background:#fff; }
.distinctives{ background:var(--muted); }

.grid.two-col{
  display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:center;
}
.grid.two-col.reverse{ grid-template-columns: 1fr 1fr; }
.grid.four-col{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:28px; align-items:center;
}
.grid.center{ justify-items:center; }

.col.media .responsive{ width:100%; height:auto; display:block; border-radius:12px; }
.col.media .contain{ object-fit:contain; }

.divider{ border:0; border-top:1px solid var(--divider); margin:28px 0; }

/* Affiliate logos same size */
.logos-row .affil{
  display:grid; place-items:center; background:#fff; border-radius:12px; padding:12px;
}
.affil-logo{
  max-width:100%; height:72px; object-fit:contain; display:block; filter: none;
}

/* Distinctives image sizing */
.distinctives .media img{ max-width:340px; width:100%; height:auto; margin-inline:auto; display:block; }

/* ========================= */
/* FOOTER */
/* ========================= */
.site-footer{
  background:#1D1D1D; color:#FFFFFF;
  margin-top: auto;

}
.footer-grid{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:24px; padding:28px 0;
}
.footer-brand img{ display:block; }
.site-footer h2{ color:#FFFFFF; font-size:16px; margin:0 0 6px; font-weight:900; }
.site-footer p, .site-footer a{ color:#FFFFFF; font-size:14px; }
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; text-underline-offset:3px; }
.footer-block .icon{ width:18px; height:18px; vertical-align:middle; margin-right:8px; }
.copyright{ border-top:1px solid rgba(255,255,255,.12); padding:14px 0; text-align:center; font-size:14px; color:#ccc; }

/* Default state (sembunyi) */
.reveal, .reveal-left, .reveal-right {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

/* Dari kiri */
.reveal-left {
  transform: translateX(-50px);
}

/* Dari kanan */
.reveal-right {
  transform: translateX(50px);
}

/* Saat terlihat */
.reveal.visible, 
.reveal-left.visible, 
.reveal-right.visible {
  opacity: 1;
  transform: translate(0,0);
}

.about-banner, .registration-banner {
  position: relative;
  height: 250px; /* atau sesuai kebutuhan */
  width: 100%;
  background-size: cover;
  background-position: center;
  margin-top: 50px;
}
.about-banner .banner-overlay, .registration-banner .banner-overlay {
  display: flex;
  justify-content: center;   /* center horizontal */
  align-items: center;       /* center vertical */
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.593); /* overlay agar teks lebih jelas */
  border-radius: 8px;
  
}
.about-banner h1, .registration-banner h1 {
  color: #fff;
  font-size: 2.5rem;
  text-align: center;
  margin: 0;
}

.about-content {
  display: flex;
/* align-items: flex-start; */
  gap: 30px; /* jarak antar kolom */
  max-width: 80%;
  margin: 0 auto; /* biar center dalam halaman */
}

.about-content img {
  max-width: 100%;
  border-radius: 12px;
}

.about-content .text {
  flex: 1;
  text-align: justify; /* biar rapi rata kiri kanan */
}

/* .about-tabs {
  display: flex;
  justify-content: center;
  margin: 30px 0;
  gap: 10px;
} */
.about-tabs {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 30px auto;
  flex-wrap: wrap;
}
.about-tabs .tab-link {
  padding: 10px 20px;
  border: 2px solid #0a2a66;
  background: #fff;
  color: #0a2a66;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s;
}
.about-tabs .tab-link.active,
.about-tabs .tab-link:hover {
  background: #0a2a66;
  color: #fff;
}
.tab-content {
  display: none;
  text-align: center;
}
.tab-content.active {
  display: block;
}
.tab-content img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(20px);}
  to {opacity: 1; transform: translateY(0);}
}
/* Animasi fade */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}


#tab-content {
  width: 80%;
  margin: 0 auto; /* biar center */
  margin-bottom: 50px;
}

/* Layout kanan-kiri */
.tab-content .row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.tab-content .col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.tab-content .col-md-3 {
  flex: 0 0 25%;
  max-width: 50%;
}

.tab-content img {
  
  height: auto;
  border-radius: 12px; /* sudut melengkung */
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 280px;       /* atur tinggi sesuai selera */
  object-fit: cover;   /* crop gambar biar jadi landscape */
}
#tab-content p {
  /* align-items: flex-start; */
  text-align: justify;
  line-height: 1.8;
  font-size: 16px;
  color: #444;
  padding-top:20px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .tab-content .row {
    flex-direction: column;
    text-align: center;
  }

  .tab-content .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

#visi .row {
  display: flex;
  align-items: flex-start; /* sejajarkan ke atas */
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */
@media (max-width: 960px){
  .grid.two-col, .grid.two-col.reverse{ grid-template-columns: 1fr; }
  .grid.four-col{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .nav-toggle{ display:block; }
  .nav{ position:absolute; right:0; top:100%; background:var(--hero); width:100%; transform-origin: top right; display:none; }
  .nav.open, .nav#nav-menu.open{ display:block; }
  .nav ul{ flex-direction:column; gap:0; }
  .nav li{ border-top:1px solid rgba(255,255,255,.15); }
  .nav a{ display:block; padding:12px 20px; }
}
.accordion {
  margin-top: 20px;
}

.card {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 12px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  overflow: hidden;
}

.card-header {
  padding: 12px 18px;
  background: #f2f2f2;
  cursor: pointer;
}

.card-header h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  text-align: left;   /* supaya rata kiri */
}

.card-body {
  padding: 15px 18px;
  text-align: justify;
  background: #fff;
}

.collapse-body {
  display: none;
}

.collapse-body.show {
  display: block;
}
.accordion .accordion-body ul {
  margin: 0;            /* hilangkan margin atas & bawah */
  padding-left: 20px;   /* jarak indent kiri */
  list-style-type: disc; /* bullet standar */
}

.accordion .accordion-body ul li {
  margin: 2px 0;        /* rapetin jarak antar item */
  line-height: 1.4;     /* biar lebih padat */
}

.leaders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 kolom */
  gap: 20px;
}

.leader-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.leader-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.leader-img {
  width: 120px;
  height: 120px;
  margin-bottom: 15px;
}

.leader-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%; /* foto bulat */
  border: 3px solid #f0f0f0;
}

.leader-info h3 {
  font-size: 18px;
  margin: 5px 0;
}

.leader-info p {
  font-size: 14px;
  color: #666;
  text-align:center !important;
}

/* Responsive: Mobile 1 kolom */
@media (max-width: 768px) {
  .leaders-grid {
    grid-template-columns: 1fr; /* 1 kolom */
  }
}

.scholarship-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 kolom */
  /* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */
  gap: 20px;
  margin-top: 20px;
}

.scholarship-card {
  background: #fff;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 30px 20px;
  text-align: left;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
  cursor: pointer;
  justify-content: space-between;
  display: flex;
  align-items: flex-start;
}
.scholarship-card:hover {
  transform: translateY(-5px);
}
.scholarship-card h4 {
  font-size: 20px;
  margin-bottom: 15px;
}
.scholarship-card p {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
  flex-grow: 1;
}
.scholarship-card .btn-open {
  padding: 10px 20px;
  border: none;
  background: #002855;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
.scholarship-card .btn-open:hover {
  background: #0056b3;
}
.card-footer {
  margin-top: auto; /* dorong ke bawah */
  text-align: center;
}
.procedure-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px auto;
  max-width: 900px;
}

.procedure-box {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.procedure-box h4 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #004080;
}

.procedure-box ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.4;
  text-align: left;
}

.procedure-box li {
  margin: 5px 0;
  list-style-type: disc;
}

.cost-card {
  background: #fff;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 30px 20px;
  text-align: left;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
}
.cost-card:hover {
  transform: translateY(-5px);
}
.cost-card h4 {
  font-size: 20px;
  margin-bottom: 15px;
}
.cost-card p {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;                 
  justify-content: center;      
  align-items: center;           
  background: rgba(0,0,0,0.6);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Animasi masuk */
.modal.show {
  opacity: 1;
  pointer-events: auto; 
}
.modal-content {
  position: relative;            
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  max-width: 700px;
  width: 90%;
  max-height: 80vh;              
  overflow-y: auto;              
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  font-size: 14px; 
  line-height: 1; 
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.3s ease;
}

.modal.show .modal-content {
  transform: scale(1);
  opacity: 1;
}

.modal-content h4 {
  margin: 10px 0 6px; /* header lebih rapat */
  font-size: 16px;
}
.modal-content p {
  margin: 4px 0; /* hilangkan jarak besar default */
}

.modal-content ul {
  margin: 6px 0 10px 18px; /* biar ada indent tapi tetap rapat */
  padding: 0;
  line-height: 1;
}

.modal-content li {
  margin: 2px 0; /* list item lebih rapat */
}
.modal p {
  margin-top: 15px;
  line-height: 1.6;
}
/* saat modal aktif */
.modal.show .modal-content {
  transform: scale(1);
  opacity: 1;
}

/* Tombol close */
.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
  font-weight: bold;
  color: #555;
  cursor: pointer;
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: #000;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
  .modal {
    align-items: flex-start; /* biar tidak nabrak ke atas */
  }

  .modal-content {
    margin-top: 100px;       /* beri jarak dari atas */
    padding: 15px;
    font-size: 13px;        /* perkecil teks */
    line-height: 1;       /* rapat tapi tetap enak dibaca */
    max-width: 95%;
    max-height: calc(80vh - 70px); /* jarak aman atas-bawah */
  }
  .scholarship-grid {
    grid-template-columns: 1fr; /* jadi 1 kolom di mobile */
  }
}