:root {
  /* Warna utama UMM */
  --bg-color-main-header: #820000;
  --border-color: #e9e9e9;
  --lead-text-color: #e9e9e9;

  /* Logo */
  --nav-logo: url("../../img/LC/logo.png");

  /* Icon apps */
  --img-linux: url("../../img/LC/app/Linux.png");
  --img-windows: url("../../img/LC/app/Windows.png");
  --img-macos: url("../../img/LC/app/macOS.png");
  --img-android: url("../../img/LC/app/Android.png");
  --img-ios: url("../../img/LC/app/iOS.png");
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --nav-logo: url("../../img/LC/umm2.png");

    --img-macos: url("../../img/LC/app/macOS-dark.png");
    --img-ios: url("../../img/LC/app/iOS-dark.png");

    --bg-color-main-header: #000000;
    --border-color: #e9e9e9;
    --lead-text-color: #e9e9e9;
  }
}

/* ===== NAVBAR ===== */
nav {
  background-image: var(--nav-logo);
  background-size: 180px 45px;
  background-repeat: no-repeat;
  background-position: 20px 50%; /* logo kiri */

  height: 70px; /* tinggi navbar */
  background-color: #820000 !important;
  border-bottom: 3px solid #710000;

  /* Flex agar menu center vertikal */
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 20px;
}

/* NAV MENU */
nav ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  gap : 0;
}

nav ul li {
  margin: 0 0px;
}

/* WARNA TEXT NAVBAR PUTIH */
nav a,
nav ul li a {
  color: white !important;
  font-weight: 600;
  text-decoration: none;
display: block;
width: fit-content;
}
/* ===== HEADER ===== */
header.main h1 {
  background-color: var(--bg-color-main-header) !important;
  color: white !important;
}

/* ===== BLOCKQUOTE ===== */
blockquote {
  border-left: 0.2em solid var(--border-color);
}

blockquote:lang(ar-MA) {
  border-right: 0.2em solid var(--border-color);
}

/* ===== APPS ===== */
ul.apps {
  list-style: none;
  padding: 0;
  text-align: center;
}

ul.apps li {
  display: inline-block;
  padding: 2em;
  transition: transform .2s ease;
}

ul.apps li:hover {
  transform: translateY(-6px);
}

ul.apps li a {
  display: block;
  background-repeat: no-repeat;
  background-size: 64px 64px;
  background-position: 50% 0;
  min-height: calc(64px + 2em);
  padding: calc(64px + 0.5em) 0 0 0;
  min-width: 64px;
  color: #e9e9e9;
  font-weight: 600;
}

/* OS icon mapping */
ul.apps li a.Windows { background-image: var(--img-windows); }
ul.apps li a.macOS   { background-image: var(--img-macos); }
ul.apps li a.Android { background-image: var(--img-android); }
ul.apps li a.iOS     { background-image: var(--img-ios); }
ul.apps li a.Linux   { background-image: var(--img-linux); }

/* ===== TEXT ===== */
p.lead {
  color: var(--lead-text-color);
  font-weight: 500;
}

/* DESKTOP */
@media screen and (min-width: 800px) {
  nav {
    background-position: 20px 50%; /* logo tetap kiri */
  }

  nav ul {
    margin-left: calc(180px + 40px); /* sedikit lebih lega di desktop */
  }
}
body{
  background-color: #000000 important;
  color: #ffffff;
}
.main{
  background-color: #000000 important;
  color: #ffffff;
}

button.btn-logout{
background: none;
border: none;
color: #fff;
font-weight: 700;
}
.eduvpn-desc {
  text-align: justify;            /* ratakan kiri & kanan */
  text-justify: inter-word;       /* cara pemisahan kata */
  line-height: 1.5;               /* jarak baris agar mudah dibaca */
  max-width: 700px;               /* batasi lebar paragraf jika perlu */
  margin: 2rem auto;              /* tengah secara horisontal */
  color: #ddd;                    /* sesuai tema gelap pada screenshot */
  font-size: 16px;
  text-align-last: justify;       /* usahakan baris terakhir ikut ter-justify (browser modern) */
}
.judul-eduvpn{
  text-align: center;            /* ratakan kiri & kanan */
  text-justify: inter-word;       /* cara pemisahan kata */
  line-height: 1.7;               /* jarak baris agar mudah dibaca */
  max-width: 900px;               /* batasi lebar paragraf jika perlu */
  margin: 2rem auto;              /* tengah secara horisontal */
  color: #ddd;                    /* sesuai tema gelap pada screenshot */
  font-size: 15px;
  text-align-last: center;       /* usahakan baris terakhir ikut ter-justify (browser modern) */

}
/* Trik untuk memaksa baris terakhir ikut justified di browser yang tidak mendukung text-align-last */
.eduvpn-desc::after {
  content: "";
  display: inline-block;
  width: 100%;
}