/* 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;
    }
}
.conveyor-track {
  overflow: hidden;
  width: 100%;
  height: 110px;
  position: relative;
  padding: 0 15px;
  margin: 0 auto;
  /* Masking untuk efek fade di sisi kiri & kanan */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.conveyor-items {
  display: flex;
  align-items: center;
  gap: 28px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  will-change: transform;

  /* Tambahkan animasi scroll */
  animation: scroll-left 30s linear infinite;
}

.mitra-logo {
  height: 80px;
  max-width: 150px;
  opacity: 0.85;
  transition: transform 0.3s ease, opacity 0.3s;
}
.mitra-logo:hover {
  transform: scale(1.2);
  opacity: 1;
}

/* Keyframes untuk animasi */
@keyframes scroll-left {
  from {
    transform: translateY(-50%) translateX(0);
  }
  to {
    transform: translateY(-50%) translateX(-50%);
  }
}

.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;
}
/* ===== BERITA TERBARU - SWIPER CARD (ARSIP STYLE) ===== */
.news-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

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

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

.news-card .card-body {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  flex-grow: 1;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.news-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  display: inline-flex;
  align-items: center;
}

.card-title {
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  line-height: 1.3;
  min-height: 2.6rem; /* 2 baris */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}
/* ===== LINK BACA SELANJUTNYA YANG HIDUP ===== */
.read-more-link {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  padding: 0.4rem 0;
  border-radius: 4px;
}

.read-more-link:hover {
  color: #0b3c9d;
  transform: translateX(4px);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.read-more-link i {
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

.read-more-link:hover i {
  transform: translateX(2px);
}
/* ===== WARNA CUSTOM UNTUK SDGs ===== */
.bg-red-500 { background-color: #E5243B !important; }
.bg-orange-500 { background-color: #DDA63A !important; }
.bg-yellow-500 { background-color: #4C9F38 !important; }
.bg-green-500 { background-color: #C5192D !important; }
.bg-teal-500 { background-color: #FF3A21 !important; }
.bg-cyan-500 { background-color: #26BDE2 !important; }
.bg-blue-500 { background-color: #FCC30B !important; }
.bg-indigo-500 { background-color: #A21942 !important; }
.bg-purple-500 { background-color: #FD6925 !important; }
.bg-pink-500 { background-color: #DD1367 !important; }
.bg-brown-500 { background-color: #FD9D24 !important; }
.bg-gray-500 { background-color: #BF8B2E !important; }
.bg-emerald-500 { background-color: #3F7E44 !important; }
.bg-sky-500 { background-color: #0A97D9 !important; }
.bg-lime-500 { background-color: #56C02B !important; }
.bg-rose-500 { background-color: #00689D !important; }
.bg-violet-500 { background-color: #19486A !important; }

/* Efek hover pada badge */
.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-text {
  color: #666;
  line-height: 1.5;
  flex-grow: 1;
  min-height: 3rem; /* 2-3 baris */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  font-size: 0.95rem;
}

.card-footer {
  padding: 0 1.25rem 1.25rem;
}

.card-footer .btn {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  border-radius: 8px;
}

/* RESPONSIF */
@media (max-width: 576px) {
  .news-card .card-img-top {
    height: 160px;
  }
  .card-title {
    font-size: 1rem;
    min-height: 2.4rem;
  }
  .card-text {
    min-height: 2.8rem;
    font-size: 0.9rem;
  }
}

/* ===== 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); }
}
/* 1. CEGAH OVERFLOW HORIZONTAL */
html, body {
  overflow-x: hidden;
}

/* 2. AMANKAN MITRA LOGO */
.mitra-logo {
  padding: 0 !important; /* hapus padding */
}
.mitra-section .carousel {
  overflow: hidden;
}

/* 3. PASTIKAN SWIPER TIDAK MELUBER */
.swiper {
  overflow: hidden;
}
/* ===== WA ===== */
.wa-chat-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #25D366;
  border-radius: 25px;
  padding: 8px 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;
}

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

/* ===== Penyesuaian untuk Mobile ===== */
@media (max-width: 480px) {
  .wa-chat-wrapper {
    bottom: 10px;       /* lebih dekat ke bawah */
    right: 10px;        /* lebih masuk ke layar */
    padding: 6px 8px;   /* kurangi padding agar muat */
  }

  .wa-icon {
    width: 32px;        /* icon lebih kecil */
    height: 32px;
  }

  .wa-chat-text {
    font-size: 12px;    /* teks lebih kecil */
  }
}
/* ===== 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;
}

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

.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-card .card-body {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  flex-grow: 1;
}

.album-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
  margin: 0;
  line-height: 1.3;
  min-height: 2.6rem; /* 2 baris */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

.album-meta {
  color: #6c757d;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

/* LINK "LIHAT SELANJUTNYA" — SEDERHANA DAN ELEGAN */
.read-more-link {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  padding: 0.4rem 0;
}

.read-more-link:hover {
  color: #0b3c9d;
  transform: translateX(4px);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.read-more-link i {
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

.read-more-link:hover i {
  transform: translateX(2px);
}

/* RESPONSIF */
@media (max-width: 576px) {
  .album-image {
    height: 160px;
  }
  .album-title {
    font-size: 1rem;
    min-height: 2.4rem;
  }
}

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

/* Di layar >= 992px (misalnya laptop), perilaku navbar kembali normal */
/* Aturan max-height dan overflow-y tidak berlaku */