/* Font global */
body, h1, h2, h3, h4, h5, h6, p, a, li {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
}

/* Ukuran container mirip UPN */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

/* TOP BAR */
.top-bar {
    background: linear-gradient(to right, #0155c4, #0f376b);
    font-size: 13px;
    min-height: 45px;
    display: flex;
    align-items: center; /* ⬅️ tengah vertikal */
}

/* Container dalam top bar agar tetap fleksibel */
.top-bar .container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* Navigasi atas */
.top-nav {
    list-style: none;
    display: flex;
    gap: 18px;
    align-items: center;
    margin: 0;
    padding: 0;
}

.top-nav li a {
    text-decoration: none;
    color: #ffffff;
    transition: color 0.2s;
}

.top-nav li a:hover {
    color: #fdd835;
}

.blu-speed {
    font-weight: bold;
    color:  #fdd835;
}

/* Header fixed di atas */
.header-upn-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

/* Gabungan top-bar + main-nav */
.header-upn-inner {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* MAIN HEADER */
.main-nav {
    background-color: #fff;
    border-bottom: none; /* atau hapus saja baris ini */
}

.nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    flex-wrap: wrap;
}

/* LOGO + TEXT */
.logo-upn {
    display: flex;
    align-items: center;
    gap: 6px; /* jarak antar logo dan teks diperkecil */
}

.logo-upn img {
    height: 50px; /* sedikit kecil biar proporsional */
    object-fit: contain;
}

.title-logo h1 {
    font-size: 16px; /* perkecil ukuran judul */
    font-weight: 600;
    color: #004080;
    line-height: 1.1;
    margin-bottom: 1px; /* jarak bawah lebih rapat */
}

.title-logo p {
    font-size: 11px; /* teks deskripsi lebih kecil */
    color: #555;
    margin: 0;
}

/* NAVIGATION MENU */
.main-menu {
    list-style: none;
    display: flex;
    gap: 18px;
    align-items: center;
    margin: 0;
    padding: 0;
}

.main-menu li a {
    text-decoration: none;
    color: #004080;
    font-weight: 600;
    font-size: 14px;
    padding-bottom: 23px;      /* atur jarak dari teks ke garis */
    margin-bottom: 10px;       /* geser garis lebih ke bawah */
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.main-menu li a:hover {
    color: #fdd835;
    border-bottom: 6px solid #fdd835; /* Tebal garis saat hover */
}

.main-menu li a:hover {
    color:  #fdd835;
}

/* PPDB highlight kotak penuh */
.ppdb-highlight {
  background-color: #fdd835; /* kuning agak gelap */
  padding: 13px 19px;
  font-weight: 600;
  color: #000 !important;
  border-radius: 0; /* tidak melengkung */
  display: inline-block;
  height: 100%; /* agar penuh tingginya */
}

.ppdb-highlight:hover {
  background-color:#fab908;
  color: #000;
}

/* --- Dropdown Gaya UPN --- */
.has-dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  min-width: 100px;
  margin-top: 26.9px; /* ✅ Jarak ke bawah supaya tidak menutupi header */
  padding: 0px 0;
  z-index: 999;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  list-style: none; /* ✅ Hilangkan bullet */
}

.dropdown-menu li {
  width: 100%;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  color: #004080;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.dropdown-menu li a:hover {
  background-color:  #004080;
  color: #ffffff;
}

/* Hover: tampilkan menu */
.has-dropdown:hover .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* ========== ICON HEADER & SEARCH ========== */
.nav-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  margin-left: 1rem; /* jarak dari menu terakhir (Kontak) */
}

.nav-icons button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #fff; /* jadi putih */
  transition: color 0.3s ease;
}

.nav-icons button:hover {
  color: #fdd835;
}

.nav-icons {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Wrapper umum untuk ikon */
.icon-wrapper {
  display: inline-flex;
  align-items: center;
}

.icon-wrapper button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

/* Search wrapper */
.search-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Input tersembunyi default */
.search-input {
  display: none;
  padding: 6px 10px;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
  transition: all 0.3s ease;
}

/* Saat hover ikon pencarian, munculkan input */
.nav-icons:hover .search-input {
  display: inline-block;
  margin-left: 0.5rem;
}


/* NAV Flex: Menu dan Icon sejajar */
.nav-with-icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.5rem;
}

/* Menu tetap horizontal */
.main-menu {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* DARK MODE STYLES */
body.dark-mode {
  background-color: #121212;
  color: #f0f0f0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .header-upn,
body.dark-mode .top-bar,
body.dark-mode .main-nav {
  background-color: #1e1e1e;
}

body.dark-mode a {
  color: #f0f0f0;
}

body.dark-mode .nav-icons button {
  color: #f0f0f0;
}

body.dark-mode .nav-icons button:hover {
  color: #00BFFF;
}

body.dark-mode .search-input {
  background-color: #222;
  border-color: #444;
  color: #f0f0f0;
}

/* ===== Reset & Global ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* hilangkan highlight biru saat tap */
}

body {
  font-family: 'Poppins', sans-serif;
  background: #fff;
  color: #333;
  padding-top: 60px; /* biar konten tidak ketimpa header */
}