/*
  Custom theme variables agar mudah diubah dan dikembangkan.
*/
:root {
  --brand-primary: #0d3b66;
  --brand-secondary: #145da0;
  --brand-accent: #f4a259;
  --text-dark: #1f2937;
  --bg-soft: #f8fafc;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-dark);
  line-height: 1.7;
}

/* Navbar */
.bg-brand {
  background: linear-gradient(120deg, var(--brand-primary), var(--brand-secondary));
}

.text-brand {
  color: var(--brand-primary);
}

/* Spasi section seragam untuk konsistensi layout */
.section-padding {
  padding: 80px 0;
}

/* Hero */
.hero-section {
  min-height: 88vh;
  color: #ffffff;
  background:
    linear-gradient(rgba(13, 59, 102, 0.88), rgba(20, 93, 160, 0.8)),
    url("https://images.unsplash.com/photo-1556911220-bff31c812dba?auto=format&fit=crop&w=1600&q=80")
      center / cover no-repeat;
}

.hero-card {
  border-radius: 16px;
  background: rgba(4, 15, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(3px);
}

.text-light-subtle {
  color: rgba(248, 250, 252, 0.78);
}

.btn-brand {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

.btn-brand:hover {
  background-color: #0a2f52;
  border-color: #0a2f52;
  color: #ffffff;
}

/* Services */
.service-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1rem 2rem rgba(13, 59, 102, 0.14);
}

.icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20, 93, 160, 0.12);
  color: var(--brand-primary);
  font-size: 1.3rem;
}

/* Footer */
.footer-section {
  background: #0b2239;
}

.social-link {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  margin-left: 8px;
  color: #ffffff;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.12);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.social-link:hover {
  background-color: var(--brand-accent);
  color: #0b2239;
  transform: translateY(-2px);
}

/* Responsif tambahan untuk perangkat kecil */
@media (max-width: 767.98px) {
  .section-padding {
    padding: 60px 0;
  }

  .hero-section {
    min-height: 78vh;
    text-align: center;
  }

  .hero-card {
    text-align: left;
  }

  .social-link {
    margin: 0 4px;
  }
}