/* assets/css/style.css */
/* Gaya Umum dan Variabel */

:root {
  --primary:#1e53ea;
  --secondary:#00008B;
  --bg-light:#f9f9f9;
  --heading-clamp: clamp(1.8rem, 4vw+1rem, 3rem);
}

body{
  font-family: 'Aref Ruqaa', sans-serif;
  background:var(--bg-light);
  color:#333;
}

/* ===== HEADER ===== */
.pnup-header{
  background:var(--secondary);
  color:#fff;
  font-size:.95rem;
  line-height:1.3;
}
.pnup-header small {
    font-family: 'Aref Ruqaa', sans-serif;
    /* Pertahankan ukuran dan warna aslinya */
    font-size: 1rem;
    color: #cfd8dc;
}
.pnup-header img{height:75px}
/* ===== HEADER FONT ===== */
.pnup-header h2 {
    font-family: 'Aref Ruqaa', sans-serif;
    /* Pastikan ukuran font tetap sesuai */
    font-size: 1.35rem; 
    font-weight: 300;
}

/* ===== NAVBAR ===== */
.navbar-custom{background:var(--primary);}  
.navbar-custom .nav-link{color:#fff;transition:color .3s;}
.navbar-custom .nav-link:hover{color:#cfe3ff;}
.navbar-toggler-icon{filter:invert(1);}
/* HERO BERSIH & FIX TANPA KOSONG DI BAWAH */
.hero {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    display: block;
}

/* Gambar mengikuti ukuran asli, tidak dipaksa tinggi */
.hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: top center;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Mobile – tidak memaksa tinggi hero */
@media (max-width: 768px) {
    .hero {
        height: auto !important;
        min-height: auto !important;
    }
}
.mitra-logo {
  height: 60px;
  max-width: 120px;
  object-fit: contain;
  transition: transform 0.3s ease, opacity 0.3s;
  opacity: 0.85;
}
.mitra-logo:hover {
  transform: scale(1.1);
  opacity: 1;
}
.pnup-header small {
    color: #cfd8dc;
    font-size: 1rem;
}
/* ===== FEATURES ===== */
.features{padding:3.5rem 0;background:#fff;}
.feature-item{background:#e0f2f1;padding:1.5rem;border-radius:10px;transition:transform .3s;height:100%;}
.feature-item:hover{transform:translateY(-6px);} 
.feature-icon{font-size:2.5rem;color:#004d40;margin-bottom:.75rem;}

/* ===== NEWS ===== */
.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
  border-radius: 16px;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.feature-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #e0f2f1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #004d40;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: background 0.3s ease;
}

.feature-card:hover .feature-circle {
  background: #b2dfdb;
}

/* ===== QUICK FACTS ===== */
.quick-facts{padding:3.5rem 0;background:#f4f4f4;}
.fact-icon{font-size:2rem;color:var(--primary);}  

/* ===== TESTIMONI ===== */
.testimonial-card {
  border-radius: 20px;
  height: 100%;
  transition: transform 0.3s ease;
}
.testimonial-card:hover {
  transform: scale(1.02);
}
.bg-pink {
  background-color: #ec407a;
}
.swiper {
  padding-bottom: 50px;
}
.swiper-button-next,
.swiper-button-prev {
  color: #000;
}

/* ===== FOOTER ===== */
footer{background:var(--primary);color:#f1f1f1;text-align:center;padding:1.5rem;font-size:.9rem;}

/* ===== RESPONSIVE ===== */
@media (max-width:576px){
  .pnup-header h2{font-size:1.05rem;}
  .pnup-header img{height:60px}
  .hero{min-height:60vh;}
  .video-card{min-width:75vw;}
}
#loader {
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
#loader.fade-out {
  opacity: 0;
}

.loader-text {
  font-family: 'Catamaran';
  font-size: 1.8rem;
  font-weight: bold;
  color: #1e53ea;
  margin-bottom: 20px;
}

.loader-boxes {
  display: flex;
  gap: 10px;
}

.loader-boxes .box {
  width: 12px;
  height: 12px;
  background: #1e53ea;
  animation: bounce 0.6s infinite alternate;
}

.loader-boxes .box:nth-child(2) { animation-delay: 0.2s; }
.loader-boxes .box:nth-child(3) { animation-delay: 0.4s; }
.loader-boxes .box:nth-child(4) { animation-delay: 0.6s; }

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-15px); }
}

/* ===== WA ===== */
.wa-chat-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: white;
  border-radius: 30px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 999;
  transition: all 0.3s ease;
}

.wa-chat-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #25D366;
  border-radius: 25px;
  padding: 8px;
  padding-right: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 999;
}

.wa-icon {
  width: 40px;
  height: 40px;
}

.wa-chat-text {
  color: white;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s ease;
}

/* Saat hover */
.wa-chat-wrapper:hover .wa-chat-text {
  opacity: 1;
  width: auto;
}

/* mitra */
.mitra-logo {
  height: 250px;
  max-width: 300px;
  object-fit: contain;
  transition: transform 0.3s ease, opacity 0.3s;
  opacity: 0.9;
  padding: 30px; /* Tambahan ini kasih ruang supaya saat membesar tidak kepotong */
}

.mitra-logo:hover {
  transform: scale(1.3);
  opacity: 1;
}
.carousel-item,
.carousel-item > div {
  overflow: visible !important;
}

/* ===== BOARD OF ADVISORY ===== */
.advisory-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.advisory-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.advisory-photo {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.advisory-info {
  padding: 1.5rem;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.advisory-name {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.advisory-title {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 1rem;
}

.view-more-btn {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  transition: background 0.3s ease;
  align-self: center;
  text-decoration: none;
}

.view-more-btn:hover {
  background: #153ab0;
}

/* ===== ALBUM PRESTASI / GALERI / BERITA ===== */
.album-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.album-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.album-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.album-info {
  padding: 1.5rem;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.album-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.album-date {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 1rem;
}

/* ===== STATISTIK PENGUNJUNG ===== */
.stats-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.stats-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0.5rem 0;
}

.stat-label {
  font-size: 1rem;
  color: #666;
}

/* ===== LOGIN BUTTON ===== */
.login-btn {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  padding: 6px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.login-btn:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.05);
}

/* ===== MOBILE LAYOUT ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .section-title {
    font-size: 1.5rem;
  }

  .advisory-card, .feature-card, .album-card, .news-card, .stats-card {
    height: auto;
  }

  .advisory-photo, .album-image {
    height: 200px;
  }

  .advisory-info, .album-info {
    padding: 1rem;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  /* Hilangkan aturan navbar */
  /* .navbar-nav .nav-item.dropdown {
    margin-bottom: 0.5rem;
  }

  .navbar-brand {
    font-size: 1.1rem;
  } */
}

/* ===== ANIMATION & GLOBAL ===== */
.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* ===== TEXT WRAP FIX ===== */
.advisory-title,
.album-date,
.news-excerpt,
.testimonial-card .card-body p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Pastikan kartu memiliki tinggi yang cukup */
.advisory-card,
.album-card,
.news-card,
.testimonial-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* ===== TESTIMONI SWIPER ===== */
#testimoni .swiper {
  padding-bottom: 50px; /* Ruang untuk pagination atau button */
}

#testimoni .swiper-slide {
  width: 300px; /* Lebar setiap slide */
}

#testimoni .swiper-slide .card {
  min-height: 380px; /* Pastikan semua kartu sejajar */
}

/* Styling untuk panah navigasi */
.swiper-button-next,
.swiper-button-prev {
  color: #000;
}

/* Styling untuk pagination */
.swiper-pagination {
  bottom: 10px !important;
}

.swiper-pagination-bullet {
  background: #ccc;
}

.swiper-pagination-bullet-active {
  background: var(--primary);
}

.card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Untuk teks yang sangat panjang, pastikan bisa wrap */
.text-wrap {
  white-space: normal !important;
}
/* ... (kode CSS lainnya) ... */

/* ===== MOBILE LAYOUT ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .section-title {
    font-size: 1.5rem;
  }

  .advisory-card, .feature-card, .album-card, .news-card, .stats-card {
    height: auto;
  }

  .advisory-photo, .album-image {
    height: 200px;
  }

  .advisory-info, .album-info {
    padding: 1rem;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  /* Hilangkan aturan navbar */
  /* .navbar-nav .nav-item.dropdown {
    margin-bottom: 0.5rem;
  }

  .navbar-brand {
    font-size: 1.1rem;
  } */
}

/* ===== FOTO DOSEN ===== */
.dosen-photo-frame {
  border: 3px solid #dee2e6; /* Warna abu-abu muda */
  border-radius: 10px; /* Sudut bingkai melengkung */
  padding: 5px; /* Jarak antara gambar dan bingkai */
  background-color: #fff; /* Warna latar belakang bingkai */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan lembut */
  transition: box-shadow 0.3s ease, border-color 0.3s ease; /* Transisi halus saat hover */
}

.dosen-photo-frame:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Bayangan lebih dalam saat hover */
  border-color: #1e53ea; /* Warna bingkai berubah saat hover */
}

/* ... (kode CSS lainnya) ... */
/* ===== BOARD OF ADVISORY - Small Card ===== */
.small-card {
  max-width: 200px; /* Batasi lebar maksimum kartu */
  margin: 0 auto; /* Pusatkan kartu jika tidak penuh */
}

.small-card .advisory-photo {
  height: 120px; /* Atur tinggi foto */
  object-fit: cover; /* Potong gambar agar pas */
}

.small-card .card-body {
  padding: 0.75rem; /* Kurangi padding */
  display: flex;
  flex-direction: column;
  height: 100%; /* Isi tinggi penuh */
}

.text-container {
  flex-grow: 1; /* Biarkan teks mengisi ruang yang tersedia */
  overflow: hidden; /* Sembunyikan teks yang terlalu panjang */
}

.small-card .advisory-name {
  font-size: 0.9rem; /* Kecilkan ukuran font nama */
  margin-bottom: 0.25rem;
  white-space: nowrap; /* Cegah nama turun baris */
  overflow: hidden;
  text-overflow: ellipsis; /* Tambahkan elipsis (...) jika terpotong */
}

.small-card .advisory-title {
  font-size: 0.75rem; /* Kecilkan ukuran font jabatan */
  margin-bottom: 0.5rem;
  white-space: nowrap; /* Cegah jabatan turun baris */
  overflow: hidden;
  text-overflow: ellipsis; /* Tambahkan elipsis (...) jika terpotong */
}

.small-card .view-more-btn {
  font-size: 0.8rem; /* Kecilkan ukuran font tombol */
  padding: 0.3rem 0.8rem;
  align-self: center; /* Pusatkan tombol */
  margin-top: auto; /* Dorong tombol ke bawah */
}

/* ===== SWIPER STYLES ===== */
/* Umum untuk semua swiper card */
.swiper {
  padding-bottom: 50px; /* Ruang untuk pagination/navigasi */
}

.swiper-slide {
  display: flex;
  justify-content: center; /* Pusatkan slide jika konten lebih kecil */
}

/* Gaya untuk pagination dan navigasi bisa disesuaikan di sini jika seragam */
.swiper-pagination-bullet {
  background: #ccc;
}

.swiper-pagination-bullet-active {
  background: var(--primary);
}

.swiper-button-next,
.swiper-button-prev {
  color: #000;
}

/* ===== RESPONSIVE ===== */
/* Pastikan kartu tetap proporsional di layar kecil */
@media (max-width: 576px) {
  .small-card {
    max-width: 100%; /* Kartu bisa lebar penuh di HP jika diperlukan */
    margin-bottom: 1rem;
  }
  .small-card .advisory-name,
  .small-card .advisory-title {
    font-size: 0.8rem; /* Lebih kecil di HP */
    white-space: normal; /* Kembalikan ke normal jika sangat kecil */
    overflow: visible; /* Tampilkan semua teks */
    text-overflow: clip; /* Hilangkan elipsis */
  }
  /* Untuk swiper, atur lebar slide jika perlu */
  .swiper-slide .card {
    width: 100%;
    max-width: 300px; /* Batasi lebar maks card di swiper HP */
  }
}

/* Tambahkan class kustom untuk grid 5 kolom jika framework mendukung */
/* Contoh jika Anda menambahkan CSS kustom */
.col-lg-2-4 {
  flex: 0 0 20%;
  max-width: 20%;
}
/* Harus digabungkan dengan grid Bootstrap */
.row-cols-lg-5 > * {
  flex: 0 0 20%;
  max-width: 20%;
}
.advisory-card {
  max-width: 220px; /* Atur sesuai keinginan */
  margin: 0 auto; /* Pusatkan kartu jika lebar container lebih besar */
  flex: 0 0 auto; /* Mencegah kartu meregang secara tidak merata */
}
@media (max-width: 991.98px) {
  .navbar-collapse {
    max-height: 70vh; /* Batasi tinggi maksimum collapse di mobile */
    overflow-y: auto; /* Aktifkan scroll vertikal jika isi terlalu panjang */
    /* (Opsional) Gaya scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #aaa #f1f1f1;
  }

  .navbar-collapse::-webkit-scrollbar {
    width: 8px;
  }

  .navbar-collapse::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  .navbar-collapse::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 10px;
    transition: background 0.3s ease;
  }

  .navbar-collapse::-webkit-scrollbar-thumb:hover {
    background: #888;
  }
}