/* 
Theme Name: FEB Theme Blue Edition
*/

/* -------------------------------------------
   1. VARIABLES & RESET
------------------------------------------- */
:root {
  /* Primary Blue Palette */
  --color-primary: #007bff;
  /* Primary Blue for buttons, highlights */
  --color-primary-dark: #0056b3;
  /* Darker blue for hover states */
  --color-nav-bg: #09509d;
  /* Blue for Main Nav Bar */
  --color-topbar-bg: #2b9eff;
  /* Lighter Blue for Top Bar */
  --color-secondary: #e3f2fd;
  /* Light Blue Background */

  /* Text Colors */
  --text-dark: #2c3e50;
  --text-light: #666;
  --text-white: #ffffff;

  /* Layout */
  --container-width: 1200px;
  --header-height: 120px;
  /* Adjusted for 2 rows */
  --border-radius: 8px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Nunito", sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: #fff;
  overflow-x: hidden;
  padding-top: 100px;
  /* Adjust based on header height */
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* -------------------------------------------
   2. HEADER & NAVIGATION (Redesigned)
------------------------------------------- */
#master-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9990;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Fix for Admin Bar */
body.admin-bar #master-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar #master-header {
    top: 46px;
  }
}

/* Top Bar */
.top-bar {
  background-color: var(--color-topbar-bg);
  color: #fff;
  font-size: 0.85rem;
  padding: 8px 0;
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-contact a {
  color: #fff;
  margin-right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.top-links a {
  color: #fff;
  margin-left: 15px;
  opacity: 0.9;
}

.top-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Main Navigation */
.main-navigation {
  background-color: var(--color-nav-bg);
  color: #fff;
  padding: 0;
  /* Removing padding to let links fill height */
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.nav-logo img {
  height: 50px;
  /* Optional: Brightness filter if logo is dark */
  filter: brightness(0) invert(1);
}

.nav-links {
  display: flex;
  gap: 5px;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  color: #fff;
  font-weight: 500;
  padding: 25px 15px;
  display: block;
  font-size: 0.95rem;
}

.nav-links a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-links a .item-icon {
  font-size: 0.7rem;
  margin-left: 5px;
  vertical-align: middle;
}

/* Dropdown */
.nav-links ul {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 220px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s;
  border-top: 3px solid var(--color-primary);
  padding: 10px 0;
}

.nav-links li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-links ul li a {
  color: #333;
  padding: 10px 20px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
}

.nav-links ul li a:hover {
  background-color: #f9f9f9;
  color: var(--color-primary);
}

/* Pendaftaran Button */
.btn-pendaftaran {
  background-color: #8bcbf9;
  /* Pale Blue Button from image */
  color: #0b3d75;
  padding: 10px 25px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.btn-pendaftaran:hover {
  background-color: #fff;
  color: var(--color-primary);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

/* -------------------------------------------
   3. HERO SECTION
------------------------------------------- */
.hero {
  position: relative;
  height: 600px;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  /* margin-bottom: 100px; */
  /* Removed to let overlap happen naturally */
}

/* Hero Slider */
.hero-slider,
.hero-slide,
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-slide {
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s;
}

.hero-slide.active {
  opacity: 1;
}

.hero-overlay {
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 10;
  margin-top: -50px;
}

.welcome-text {
  font-size: 1.2rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
  opacity: 0.9;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto 30px;
  color: #ddd;
}

/* Nav Arrows */
.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  z-index: 20;
  transition: 0.3s;
}

.hero-nav:hover {
  background: var(--color-primary);
}

.hero-nav.prev {
  left: 30px;
}

.hero-nav.next {
  right: 30px;
}

/* -------------------------------------------
   4. LAYANAN UNGGULAN (OVERLAPPING SECTION)
------------------------------------------- */
.layanan-section {
  position: relative;
  z-index: 50;
  margin-top: -80px;
  /* Pull up to overlap hero */
  margin-bottom: 20px;
}

.layanan-container {
  background: #fff;
  border-radius: 15px;
  padding: 25px 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.layanan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.layanan-header h2 {
  font-size: 1.5rem;
  color: #333;
  font-weight: 700;
}

.btn-lainnya {
  background-color: var(--color-primary);
  color: #fff;
  padding: 8px 18px;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 500;
}

.btn-lainnya:hover {
  background-color: var(--color-primary-dark);
}

/* Layanan Grid converted to Flex Center */
.layanan-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.layanan-item {
  display: block;
  width: 130px; /* Fixed width to keep them uniform */
  flex-shrink: 0;
}

.layanan-box {
  border: 1px solid #dcdcdc;
  /* Subtle border */
  border-radius: 8px;
  height: 110px; /* Slightly taller for better spacing */
  /* Increased height for icon + text */
  display: flex;
  flex-direction: column;
  /* Icon above text */
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  transition: all 0.3s;
  background: #fff;
  gap: 10px;
  /* Space between icon and text */
}

.layanan-box i {
  font-size: 1.8rem; /* Larger icon */
  color: var(--color-primary);
  transition: all 0.3s;
}

.layanan-box span {
  color: #555;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
}

.layanan-item:hover .layanan-box {
  border-color: var(--color-primary);
  background-color: #f8fbff;
  /* Very light blue approach */
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.15);
}

.layanan-item:hover .layanan-box i {
  transform: scale(1.1);
}

.layanan-item:hover .layanan-box span {
  color: var(--color-primary);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .layanan-grid {
    gap: 10px;
  }

  .layanan-item {
    width: calc(50% - 10px); /* 2 columns on mobile */
  }

  .layanan-container {
    padding: 20px 15px;
  }
}

/* -------------------------------------------
   5. OTHER SECTIONS (General)
------------------------------------------- */
.section {
  padding: 60px 0;
}

.section-header {
  margin-bottom: 40px;
}

.section-heading {
  font-size: 2rem;
  color: #333;
  margin-bottom: 15px;
  font-weight: 700;
}

.divider {
  width: 60px;
  height: 4px;
  background: var(--color-primary);
  margin: 0 auto;
  border-radius: 2px;
}

/* Facilities CSS reused from previous but ensured clean */
.fasilitas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.fasilitas-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: 0.3s;
}

.fasilitas-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.fasilitas-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.fasilitas-content {
  padding: 20px;
}

.fasilitas-content h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #333;
}

.fasilitas-content p {
  color: #666;
  font-size: 0.9rem;
}

/* Footer */
.footer {
  background-color: #0d2b4e;
  color: #fff;
  padding: 50px 0 20px;
}

.footer h3 {
  color: #fff;
  margin-bottom: 20px;
}

.footer-links li a {
  color: #ccc;
  display: block;
  margin-bottom: 8px;
}

.footer-links li a:hover {
  color: #fff;
  padding-left: 5px;
}

/* -------------------------------------------
   6. DEAN/SAMBUTAN SECTION REDESIGN
------------------------------------------- */
.intro-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  /* Text wider than Image */
  gap: 60px;
  align-items: center;
}

/* Left: Text Content */
.intro-left-content {
  text-align: left;
}

.dean-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 40px;
  /* Spacing from top */
}

.dean-role {
  font-size: 0.9rem;
  color: var(--color-primary);
  /* Blue */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
  display: block;
}

.dean-name-left {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}

.dean-divider-left {
  width: 60px;
  height: 4px;
  background-color: var(--color-primary);
  margin-bottom: 25px;
  border-radius: 2px;
}

.intro-text-left {
  color: #666;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 30px;
  text-align: justify;
  /* Or left */
}

/* Right: Image */
.intro-right-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-right-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  /* Optional shadow if needed */
}

.intro-actions-left {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .intro-grid {
    grid-template-columns: 1fr;
    text-align: left;
    display: flex;
    flex-direction: column-reverse;
    /* Image top or bottom? Standard flow implies image top usually, but user ref might vary. Sticking to stack. */
    gap: 30px;
  }

  .intro-right-image {
    margin-bottom: 20px;
  }
}

/* Buttons for Dean Section */
.intro-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.btn-sambutan {
  background-color: #0056b3;
  /* Dark Blue */
  color: #fff;
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
}

.btn-sambutan:hover {
  background-color: #003d82;
  transform: translateY(-2px);
}

.btn-visimisi {
  background-color: #8bcbf9;
  /* Light Blue */
  color: #fff;
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
}

.btn-visimisi:hover {
  background-color: #4fc3f7;
  transform: translateY(-2px);
}

/* 7. NEWS & ARTICLES REDESIGN */
.news-grid-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: flex-start;
}

.section-heading-left {
  font-size: 1.8rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  text-align: left;
}

/* Featured Left */
.featured-news-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.featured-img-wrapper {
  width: 100%;
  height: 400px; /* Restrict height so portrait images avoid making huge cards */
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: #f8f9fa; /* In case of contain */
}

.featured-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Alternatively use 'contain' if the whole poster should be visible */
  display: block;
  transition: transform 0.3s;
}

.featured-img-wrapper:hover img {
  transform: scale(1.05);
}

.featured-label {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 700;
  margin-top: 10px;
  text-transform: capitalize;
}

.featured-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: #333;
  margin: 5px 0 10px;
}

.featured-excerpt {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.meta-data {
  display: flex;
  gap: 15px;
  color: #888;
  font-size: 0.9rem;
  align-items: center;
}

.meta-data i {
  margin-right: 5px;
}

/* Sidebar Right */
.sidebar-news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-news-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  /* Fixed width for thumbnail */
  gap: 15px;
  align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.sidebar-thumb img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.sidebar-content h4 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
  color: #333;
}

.sidebar-content h4 a:hover {
  color: var(--color-primary);
}

.sidebar-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.8rem;
  color: #888;
}

.cat-badge {
  background: #d4edda;
  /* Light green example from img */
  color: #155724;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
}

.cat-badge.yellow {
  background: #fff3cd;
  color: #856404;
}

.btn-block-blue {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #0d569b;
  /* Darker blue */
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  margin-top: 10px;
  transition: 0.3s;
}

.btn-block-blue:hover {
  background-color: #093d6e;
  color: #fff;
}

@media (max-width: 768px) {
  .news-grid-layout {
    grid-template-columns: 1fr;
  }
}

/* Reduce spacing for Dean Section specifically */
#profil.section {
  padding-top: 10px;
}

/* Adjust Dean Image Position */
.intro-right-image img {
  margin-top: -60px;
  /* Pull up image */
}

/* -------------------------------------------
   8. PENGUMUMAN & AGENDA SECTION
------------------------------------------- */
.pa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: flex-start;
}

.pa-header {
  margin-bottom: 30px;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
  position: relative;
}

.pa-header h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #333;
  margin: 0;
  display: inline-block;
}

.pa-header::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background-color: #333;
  /* Black underline as in img */
}

/* Pengumuman List */
.pengumuman-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.pengumuman-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  display: block;
  text-decoration: none;
  transition: color 0.3s;
}

.pengumuman-title:hover {
  color: var(--color-primary);
}

.pengumuman-excerpt {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 10px;
  line-height: 1.5;
}

.pengumuman-meta {
  font-size: 0.8rem;
  color: #888;
  display: flex;
  gap: 15px;
  align-items: center;
}

.pengumuman-meta i {
  color: var(--color-primary);
  margin-right: 5px;
}

/* Agenda List */
.agenda-item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.agenda-date-box {
  width: 80px;
  height: 80px;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #333;
}

.agenda-date-day {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.agenda-date-month {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 2px;
}

.agenda-info h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.agenda-info h4 a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

.agenda-info h4 a:hover {
  color: var(--color-primary);
}

.agenda-details {
  font-size: 0.85rem;
  color: #666;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agenda-details div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agenda-details i {
  color: var(--color-primary-light, #5dade2);
  width: 16px;
  text-align: center;
}

@media (max-width: 768px) {
  .pa-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* -------------------------------------------
   9. PROGRAM STUDI SECTION
------------------------------------------- */
.section-prodi {
  background: linear-gradient(
    135deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 100%
  );
  padding: 80px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.section-prodi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  opacity: 0.3;
}

.prodi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 50px;
  position: relative;
  z-index: 2;
}

.prodi-header h2 {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
}

.btn-white-outline {
  border: 2px solid #fff;
  color: #fff;
  padding: 10px 25px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
}

.btn-white-outline:hover {
  background: #fff;
  color: var(--color-primary);
}

.prodi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  position: relative;
  z-index: 2;
}

.prodi-card {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
  text-decoration: none;
  display: block;
  color: var(--text-dark);
  border: 0;
}

.prodi-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.prodi-img-wrapper {
  height: 250px;
  overflow: hidden;
  position: relative;
}

.prodi-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.prodi-card:hover .prodi-img-wrapper img {
  transform: scale(1.1);
}

.prodi-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.prodi-content {
  padding: 30px;
  text-align: center;
}

.prodi-content h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #333;
  font-weight: 700;
}

.prodi-content p {
  color: #666;
  font-size: 0.95rem;
  margin-bottom: 25px;
  line-height: 1.6;
}

.prodi-link {
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: 0.3s;
}

.prodi-card:hover .prodi-link {
  border-bottom-color: var(--color-primary);
}

@media (max-width: 768px) {
  .prodi-grid {
    grid-template-columns: 1fr;
  }

  .prodi-header {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }
}

/* -------------------------------------------
   9. PROGRAM STUDI SECTION (UPDATED)
------------------------------------------- */
/* Reset Previous Styles overridden by cascading */
.section-prodi {
  background: #fff;
  /* Clean White Background */
  padding: 60px 0;
  color: var(--text-dark);
  position: relative;
  border-top: 1px solid #eee;
}

.section-prodi::before {
  display: none;
}

.prodi-header h2 {
  color: var(--text-dark);
  font-size: 2rem;
}

.prodi-header h4 {
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.btn-white-outline {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-white-outline:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Card Style with Icon */
.prodi-card {
  border: 1px solid #eee;
  box-shadow: none;
  display: flex;
  /* Horizontal Layout Idea? Or Vertical centered icon? Let's go Vertical Center Clean */
  flex-direction: column;
  align-items: center;
  padding: 40px 30px;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: #fff;
  text-align: center;
}

.prodi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--color-primary);
}

.prodi-icon-circle {
  width: 80px;
  height: 80px;
  background: var(--color-secondary);
  /* Pink/Light BG */
  color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 20px;
  transition: 0.3s;
}

.prodi-card:hover .prodi-icon-circle {
  background: var(--color-primary);
  color: #fff;
}

.prodi-content {
  padding: 0;
}

.prodi-content h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.prodi-content p {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 20px;
}

.prodi-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f5f5;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  margin: 0 auto;
}

.prodi-card:hover .prodi-arrow {
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 768px) {
  .prodi-header {
    align-items: flex-start;
    text-align: left;
  }
}

/* -------------------------------------------
   9. PROGRAM STUDI SECTION (HORIZONTAL PREMIUM)
------------------------------------------- */
.section-prodi {
  background:
    linear-gradient(rgba(234, 246, 255, 0.93), rgba(234, 246, 255, 0.93)),
    url("images/campus-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 80px 0;
}

.prodi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.prodi-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 35px;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  background: #fff;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.prodi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: transparent;
}

.prodi-icon-circle {
  width: 80px;
  height: 80px;
  min-width: 80px;
  background: #f8fbff;
  color: var(--color-primary);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 25px 0 0;
  transition: all 0.4s ease;
}

.prodi-card:hover .prodi-icon-circle {
  background: var(--color-primary);
  color: #fff;
  transform: rotate(-10deg) scale(1.05);
  box-shadow: 0 10px 20px rgba(13, 86, 155, 0.3);
}

.prodi-content {
  flex: 1;
  padding: 0;
}

.prodi-content h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #1a1a1a;
}

.prodi-content p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 0;
}

.prodi-arrow {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #eee;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.prodi-card:hover .prodi-arrow {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: translateX(0);
}

@media (max-width: 768px) {
  .prodi-card {
    flex-direction: column;
    text-align: center;
    padding: 30px;
  }

  .prodi-icon-circle {
    margin: 0 0 20px 0;
  }

  .prodi-arrow {
    top: auto;
    bottom: 20px;
    right: 20px;
  }
}

/* -------------------------------------------
   10. DAFTAR DOSEN SECTION (CLEAN GRID)
------------------------------------------- */
.section-dosen {
  padding: 80px 0;
  background: #fdfdfd;
}

.dosen-header {
  text-align: center;
  margin-bottom: 50px;
}

.dosen-header h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 10px;
  font-weight: 700;
}

.dosen-header p {
  color: #777;
  max-width: 600px;
  margin: 0 auto;
}

.dosen-header .divider {
  width: 60px;
  height: 3px;
  background: var(--color-primary);
  margin: 15px auto 0;
}

.dosen-grid-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

.dosen-item {
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  transition: 0.3s;
}

.dosen-item:hover {
  transform: translateY(-5px);
}

.dosen-img-box {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 15px;
  background: transparent;
}

.dosen-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.dosen-info h4 {
  color: var(--color-primary);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.dosen-info p {
  color: #666;
  font-size: 0.85rem;
  margin-bottom: 10px;
  line-height: 1.4;
}

.dosen-social {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dosen-social-link {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.9rem;
  transition: 0.3s;
}

.dosen-social-link:hover {
  background: var(--color-secondary);
  transform: scale(1.1);
}

@media (max-width: 992px) {
  .dosen-grid-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .dosen-grid-layout {
    grid-template-columns: 1fr;
  }
}

.dosen-footer-action {
  text-align: center;
  margin-top: 50px;
}

.btn-custom-dosen {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(
    135deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 100%
  );
  color: #fff;
  padding: 14px 40px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(13, 86, 155, 0.3);
  font-size: 1rem;
}

.btn-custom-dosen:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(13, 86, 155, 0.4);
  color: #fff;
}

.btn-custom-dosen i {
  transition: margin-left 0.3s;
}

.btn-custom-dosen:hover i {
  margin-left: 5px;
}

/* -------------------------------------------
   11. VIDEO SECTION (CONSOLIDATED FINAL)
------------------------------------------- */

/* 1. Layout & Container (Clean White) */
.section-video {
  background:
    linear-gradient(rgba(234, 246, 255, 0.93), rgba(234, 246, 255, 0.93)),
    url("images/campus-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 60px 0;
}

.video-container-box {
  background: transparent;
  box-shadow: none;
  padding: 20px 0;
  border-radius: 0;
}

/* Remove decorative elements from previous themes */
.video-container-box::before,
.video-container-box::after {
  display: none;
}

/* 2. Grid Layout (2x2) */
.video-grid {
  display: grid;
  /* RESTORED MISSING PROPERTY */
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 30px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Restored Video Frame Styles */
.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  background: #000;
}

.video-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-info {
  padding: 15px;
  background: #fff;
}

/* 3. Header Styling */
.video-header h2 {
  color: #333;
  text-shadow: none;
  font-size: 2.2rem;
}

.video-header p {
  color: #777;
}

/* 4. Card Styling */
.video-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.video-info h4 {
  color: #333;
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  /* Standard property for compatibility */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* 5. Footer Action & Button (Stable Blue Gradient) */
.video-footer-action {
  text-align: center;
  margin-top: 40px;
}

.btn-video-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(
    135deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 100%
  );
  color: #fff;
  padding: 12px 35px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  box-shadow: 0 4px 15px rgba(13, 86, 155, 0.3);

  /* CRITICAL FIX: Ensure no border transition issues */
  border: 2px solid transparent;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.btn-video-more:hover {
  background: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(13, 86, 155, 0.4);

  /* Ensure state remains consistent */
  border: 2px solid transparent;
}

/* -------------------------------------------
   12. FASILITAS SECTION
------------------------------------------- */
.section-fasilitas {
  padding: 80px 0;
  background: #fdfdfd;
}

.fasilitas-header {
  text-align: center;
  margin-bottom: 50px;
}

.fasilitas-header h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 10px;
  font-weight: 700;
}

.fasilitas-header p {
  color: #777;
  max-width: 600px;
  margin: 0 auto;
}

.fasilitas-header .divider {
  width: 60px;
  height: 3px;
  background: #333;
  margin: 15px auto 0;
}

.fasilitas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  align-items: start;
  /* Align top, allow heights to differ */
}

.fasilitas-item {
  background: transparent;
  transition: 0.3s;
}

.fasilitas-img-box {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  background: #f0f0f0;
  aspect-ratio: 4/3;
  /* Enforce uniform larger size */
}

.fasilitas-img-box img {
  width: 100%;
  height: 100%;
  /* Fill the aspect-ratio box */
  object-fit: cover;
  /* Crop neatly */
  display: block;
  transition: transform 0.5s ease;
}

.fasilitas-item:hover .fasilitas-img-box img {
  transform: scale(1.1);
}

/* Badge removed as requested */
.fasilitas-badge {
  display: none;
}

.fasilitas-info h4 {
  color: var(--color-primary);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.fasilitas-info p {
  color: #777;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.fasilitas-footer-action {
  text-align: center;
  margin-top: 50px;
}

@media (max-width: 992px) {
  .fasilitas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .fasilitas-grid {
    grid-template-columns: 1fr;
  }
}

/* Fasilitas Button Style */
.btn-custom-fasilitas {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(
    135deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 100%
  );
  color: #fff;
  padding: 12px 35px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  box-shadow: 0 4px 15px rgba(13, 86, 155, 0.3);
  border: 2px solid transparent;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  /* FIXED: Don't transition background */
}

.btn-custom-fasilitas:hover {
  background: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(13, 86, 155, 0.4);
  border: 2px solid transparent;
}

/* -------------------------------------------
   13. MITRA SECTION
------------------------------------------- */
.section-mitra {
  padding: 60px 0;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

.mitra-header {
  text-align: center;
  margin-bottom: 40px;
}

.mitra-header h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 15px;
  font-weight: 700;
}

.mitra-header .divider {
  width: 60px;
  height: 3px;
  background: #333;
  margin: 0 auto;
}

.mitra-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 30px;
}

.mitra-item {
  width: 120px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  filter: grayscale(100%);
  opacity: 0.7;
}

.mitra-item:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

.mitra-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Simple Dot Indicators (Static for visual matching) */
.mitra-dots {
  text-align: center;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.mitra-dot {
  width: 8px;
  height: 8px;
  background: #dde0e3;
  border-radius: 50%;
  display: inline-block;
}

.mitra-dot.active {
  background: var(--color-primary);
  width: 20px;
  border-radius: 10px;
}

/* -------------------------------------------
   13. MITRA SECTION (ANIMATED)
------------------------------------------- */
/* Use specific class for sliding to avoid conflict if static is needed elsewhere */
.mitra-slider-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 20px 0;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.mitra-track {
  display: flex;
  gap: 50px;
  width: max-content;
  animation: mitra-scroll 30s linear infinite;
}

.mitra-track:hover {
  animation-play-state: paused;
}

@keyframes mitra-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

  /* Move half way because we duplicate content */
}

.mitra-item {
  width: 120px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: 0.3s;
}

.mitra-item:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

.mitra-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* -------------------------------------------
   13. MITRA CAROUSEL (JS CONTROLLED)
------------------------------------------- */
.mitra-slider-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 20px 0;
  min-height: 150px;
}

.mitra-track {
  display: flex;
  gap: 0;
  /* JS handles spacing via padding/margin on items */
  width: 100%;
  animation: none;
  /* Disable infinite scroll */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.mitra-item {
  flex: 0 0 25%;
  /* Default 4 items per slide on desktop */
  max-width: 25%;
  padding: 0 15px;
  /* Spacing */
  width: auto;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: 0.3s;
}

.mitra-item:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

@media (max-width: 992px) {
  .mitra-item {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }

  /* 3 items tablet */
}

@media (max-width: 576px) {
  .mitra-item {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* 2 items mobile */
}

.mitra-dots {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.mitra-dot {
  width: 10px;
  height: 10px;
  background: #e0e0e0;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mitra-dot.active {
  background: var(--color-primary);
  width: 30px;
  border-radius: 12px;
}

/* -------------------------------------------
   14. MODERN FOOTER
------------------------------------------- */
.footer-modern {
  position: relative;
  background-color: #0c1e34; /* Deeper midnight blue */
  color: #a0aec0;
  padding-bottom: 20px;
  font-family: "Nunito", sans-serif;
  overflow: hidden;
}

/* Decorative Wave */
.footer-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: translateY(-2px); /* Seamless overlap */
}

.footer-wave svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 60px;
}

.footer-wave .shape-fill {
  fill: #fff;
}

.footer-content-wrapper {
  padding-top: 80px; /* Space for wave */
  position: relative;
  z-index: 10;
}

/* Footer Grid Layout */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 50px;
}

/* Footer Columns */
.footer-heading {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 25px;
  position: relative;
  display: inline-block;
}

.footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 30px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* Brand Column */
.brand-link {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  text-decoration: none;
}

.brand-logo {
  height: 50px;
  width: auto;
  filter: brightness(0) invert(1); /* Ensure white logo */
}

.brand-text h3 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 2px;
}

.brand-text .uni-name {
  font-size: 0.75rem;
  color: #cbd5e0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brand-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 25px;
  color: #a0aec0;
}

/* Social Links */
.social-links {
  display: flex;
  gap: 15px;
}

.social-links a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.social-links a:hover {
  background: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

/* Footer Menu Links */
.footer-menu {
  padding: 0;
  list-style: none;
}

.footer-menu li {
  margin-bottom: 12px;
}

.footer-menu a {
  color: #a0aec0;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  display: inline-block;
  position: relative;
}

.footer-menu a:hover {
  color: #fff;
  padding-left: 5px; /* Slide effect */
}

.footer-menu a::before {
  content: "›";
  position: absolute;
  left: -15px;
  opacity: 0;
  transition: all 0.2s ease;
  color: var(--color-primary);
  font-weight: bold;
}

.footer-menu a:hover::before {
  opacity: 1;
  left: -10px;
}

/* Contact List */
.contact-list {
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.5;
}

.contact-list i {
  color: var(--color-primary);
  margin-top: 3px;
  font-size: 1rem;
  flex-shrink: 0;
}

.contact-list a {
  color: #a0aec0;
  transition: 0.2s;
}

.contact-list a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Bottom Bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 25px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.copyright {
  font-size: 0.85rem;
  color: #718096;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-bottom-links a {
  font-size: 0.85rem;
  color: #718096;
  text-decoration: none;
  transition: 0.2s;
}

.footer-bottom-links a:hover {
  color: #fff;
}

.footer-bottom-links .sep {
  color: rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
}

/* Responsive Footer */
@media (max-width: 991px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-content-wrapper {
    padding-top: 60px;
  }

  .footer-wave svg {
    height: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* -------------------------------------------
   12. GLOBAL RESPONSIVE STYLES
------------------------------------------- */

/* General Mobile Adjustments */
@media (max-width: 991px) {
  :root {
    --header-height: 80px;
  }

  body {
    padding-top: 130px; /* Adjust for fixed header + topbar */
  }

  .container {
    padding: 0 15px;
  }

  /* Typography */
  .hero-title,
  .page-title {
    font-size: 2.2rem;
  }

  .section-heading,
  .dean-section-title {
    font-size: 1.8rem;
  }

  /* Grids to Single Column */
  .content-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }

  .intro-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile Navigation */
@media (max-width: 991px) {
  /* Top Bar */
  .top-bar-inner {
    flex-direction: column;
    gap: 5px;
    text-align: center;
    padding-bottom: 5px;
  }

  .top-links {
    display: none; /* Simplify top bar on mobile */
  }

  /* Header & Nav */
  .nav-inner {
    padding: 10px 15px;
    height: auto;
  }

  .nav-logo img {
    height: 40px;
  }

  .mobile-menu-toggle {
    display: block;
    font-size: 1.8rem;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    margin-left: 15px;
  }

  .nav-right {
    display: flex;
    align-items: center;
  }

  .btn-pendaftaran {
    padding: 8px 15px;
    font-size: 0.8rem;
  }

  /* Main Menu Wrapper */
  .navbar-menu {
    position: fixed;
    top: 0;
    right: -100%; /* Slide out by default */
    width: 280px;
    height: 100vh;
    background-color: var(--color-nav-bg);
    z-index: 9999;
    transition: 0.3s ease-in-out;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    padding-top: 20px;
    overflow-y: auto;
  }

  .navbar-menu.active {
    right: 0;
  }

  .nav-links {
    flex-direction: column;
    gap: 0;
  }

  .nav-links li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav-links a {
    padding: 15px 25px;
    font-size: 1rem;
  }

  /* Mobile Dropdown */
  .nav-links ul {
    position: static;
    visibility: visible;
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: none;
    transform: none;
    width: 100%;
    display: none; /* JS toggle ideally, or CSS hover fallback won't work well on touch. 
                        For simplicity here, we make them display block on hover of parent or always block? 
                        Let's make them always visible for now to ensure access. */
    display: block;
    padding-left: 0;
    border-top: none;
  }

  .nav-links ul li a {
    padding: 10px 20px 10px 40px; /* Indent sub-items */
    font-size: 0.9rem;
    color: #ddd;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .nav-links ul li a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
  }

  .item-icon {
    display: none; /* Hide chevron to simplify */
  }
}

/* Table Responsiveness */
.semester-block {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.curr-table {
  min-width: 600px; /* Force scroll */
}

/* Dean Image Fix */
@media (max-width: 768px) {
  .intro-right-image img {
    margin-top: 0;
  }

  .dean-section-title {
    text-align: center;
    margin-bottom: 30px;
  }

  .intro-left-content {
    text-align: center;
  }

  .dean-divider-left {
    margin: 0 auto 25px auto;
  }

  .intro-actions-left {
    justify-content: center;
  }
}

/* Animation Classes */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

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

/* -------------------------------------------
   13. ADDITIONAL RESPONSIVE FIXES
------------------------------------------- */

@media (max-width: 991px) {
  /* Hero Section Height Adjustment */
  .hero {
    height: auto;
    min-height: 500px; /* Ensure enough height */
    padding: 80px 0;
  }

  .hero-content {
    margin-top: 0;
    padding: 0 15px; /* Add padding for text */
  }

  /* Reset hero slider position if needed */
  .hero-slider,
  .hero-slide {
    position: absolute;
    height: 100%;
  }

  /* Layanan Section Overlap Adjustment */
  .layanan-section {
    margin-top: -40px; /* Reduce negative margin */
  }

  .layanan-container {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  /* Further adjust Hero for smaller screens */
  .hero {
    min-height: 400px;
    padding: 60px 0;
  }

  .hero-title {
    font-size: 2rem; /* Smaller title */
  }

  /* Adjust section padding */
  .section {
    padding: 40px 0; /* Reduce padding between sections */
  }

  .section-heading {
    font-size: 1.5rem;
  }

  /* Layanan Grid to 2 columns (already handled but ensuring gap is small) */
  .layanan-grid {
    gap: 15px;
  }
}

@media (max-width: 480px) {
  /* Mobile Portrait specific tweaks */
  .hero-title {
    font-size: 1.8rem;
  }

  .btn-pendaftaran {
    padding: 8px 12px;
    font-size: 0.75rem;
  }

  .mitra-item {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Ensure logo doesn't break header */
  .nav-logo img {
    height: 35px;
  }
}

/* -------------------------------------------
   GLOBAL TABLE STYLES
------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); /* Matching curr-table shadow */
  border-radius: 8px; /* Matching curr-table border-radius */
  overflow: hidden; /* For border-radius */
}

table th,
table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

table th {
  background-color: var(--color-primary); /* Blue header */
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

table tr:nth-child(even) {
  background-color: #f9fcff; /* Matching curr-table even row */
}

table tr:hover {
  background-color: #f0f7ff;
}

/* -------------------------------------------
   SCROLL TO TOP LOGIC
------------------------------------------- */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.scroll-to-top:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-5px);
  color: #fff;
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

/* -------------------------------------------
   MOBILE HEADER FIX (NOT FIXED POSITION)
------------------------------------------- */
@media (max-width: 768px) {
  #master-header {
    position: relative;
    box-shadow: none; /* Optional: remove shadow when inline */
  }

  body {
    padding-top: 0;
  }

  /* Reset admin bar specific top if needed */
  body.admin-bar #master-header {
    top: 0;
  }
}