:root {
  --base-500: #006569;
  --base-600: #00575b;
  --base-700: #00464a;
  --base-100: #d9f1f2;
  --surface: #f2f8f8;
  --text-main: #1f2a2c;
  --text-soft: #5e6e70;
}

body {
  background: radial-gradient(circle at top, #f8ffff 0%, #edf6f6 45%, #e7f1f1 100%);
  color: var(--text-main);
}

.btn-primary {
  background-color: var(--base-500);
  border-color: var(--base-500);
  box-shadow: 0 10px 24px rgba(0, 101, 105, 0.3);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--base-600);
  border-color: var(--base-600);
  box-shadow: 0 14px 30px rgba(0, 101, 105, 0.35);
}

.text-primary {
  color: var(--base-500) !important;
}

.bg-primary {
  background-color: var(--base-500) !important;
}

.modern-section {
  position: relative;
  border-radius: 0;
  margin: 0;
  overflow: clip;
}

.modern-heading {
  color: var(--base-700);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.modern-subtext {
  color: var(--text-soft);
}

.masthead .container {
  position: relative;
  z-index: 1;
}

.glass-section {
  background: linear-gradient(135deg, var(--base-700) 0%, var(--base-500) 100%);
}

/* Stats section: frosted glass panels on teal gradient */
#stats .glass-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1rem;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

#stats .glass-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.glass-card .text-muted {
  color: rgba(255, 255, 255, 0.85) !important;
}

.glass-card h5 {
  color: #ffffff;
}

.glass-card .text-primary {
  color: #d4f6ff !important;
}

.soft-panel {
  background: rgba(0, 101, 105, 0.06);
  border: 1px solid rgba(0, 101, 105, 0.14);
  border-radius: 1rem;
  box-shadow: 0 10px 26px rgba(22, 54, 58, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#graphic-stat {
  background: linear-gradient(180deg, #f2fbfb 0%, #eef8f8 100%);
}

#info {
  background: linear-gradient(180deg, #edf8f8 0%, #e8f4f4 100%) !important;
}

#contact {
  background: linear-gradient(145deg, rgba(0, 101, 105, 0.08), rgba(255, 255, 255, 0.75));
}

#table-info-kerjasama thead th {
  background: var(--base-500);
  border-color: #0b7b80;
}

#table-info-kerjasama tbody tr:hover {
  background-color: rgba(0, 101, 105, 0.07);
}

#contact iframe {
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}

.modal-content {
  border: 1px solid rgba(0, 101, 105, 0.18);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 1rem;
}

/*
 * Welcome landing navbar only: transparent at scroll top, glass when scrolled.
 * (.navbar-shrink is toggled by public/js/landing.js when window.scrollY > 0)
 */
.welcome-landing #mainNav {
  background-color: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none !important;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease, border-color 0.25s ease, -webkit-backdrop-filter 0.25s ease;
}

.welcome-landing #mainNav.navbar-shrink {
  background-color: rgba(0, 101, 105, 0.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12) !important;
}

@media (min-width: 992px) {
  .welcome-landing #mainNav {
    background-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none !important;
  }

  .welcome-landing #mainNav.navbar-shrink {
    background-color: rgba(0, 101, 105, 0.88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 2px solid gold;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  }
}

/* Floating language control: high contrast on any background */
.language-switcher .btn,
.language-switcher .btn-primary {
  background-color: rgba(255, 255, 255, 0.96) !important;
  color: var(--base-700) !important;
  border: 2px solid rgba(0, 101, 105, 0.45) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.language-switcher .btn:hover,
.language-switcher .btn:focus,
.language-switcher .btn-primary:hover,
.language-switcher .btn-primary:focus {
  background-color: #ffffff !important;
  color: #003033 !important;
  border-color: rgba(0, 101, 105, 0.65) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22), inset 0 1px 0 #fff;
}

.language-switcher .dropdown-toggle::after {
  border-top-color: currentColor !important;
}

.language-switcher .dropdown-menu {
  border: 1px solid rgba(0, 101, 105, 0.2);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 0.5rem;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.modern-footer {
  margin: 0;
  border-radius: 0;
  background: linear-gradient(140deg, rgba(0, 70, 74, 0.95), rgba(0, 101, 105, 0.95));
  border: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modern-footer .footer-copy p {
  margin-bottom: 0.35rem;
  color: rgba(255, 255, 255, 0.92);
}

.modern-footer .footer-link {
  color: rgba(255, 255, 255, 0.9) !important;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.modern-footer .footer-link:hover {
  color: #ffffff !important;
  transform: translateX(2px);
}

.modern-footer .footer-social-link {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 131, 136, 0.28);
  border: 1px solid rgba(0, 189, 196, 0.35);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.modern-footer .footer-social-link:hover {
  transform: translateY(-2px);
  background: rgba(0, 189, 196, 0.35);
}

/* Guest auth pages (login, register, etc.) — align with welcome palette */
.auth-breadcrumb {
  background: linear-gradient(180deg, #f2fbfb 0%, #eef8f8 100%);
  border-bottom: 1px solid rgba(0, 101, 105, 0.12);
}

.auth-card-footer {
  background: rgba(0, 101, 105, 0.06);
  border-top: 1px solid rgba(0, 101, 105, 0.12);
}

.login-page .input-group-text {
  background: rgba(0, 101, 105, 0.08);
  border-color: rgba(0, 101, 105, 0.18);
  color: var(--base-600);
}

.login-page .form-control:focus {
  border-color: rgba(0, 101, 105, 0.45);
  box-shadow: 0 0 0 0.2rem rgba(0, 101, 105, 0.15);
}