:root {
  --brand: #0ea5e9;
  --brand-strong: #0284c7;
  --brand-light: #38bdf8;
  --surface: rgba(15, 23, 42, 0.68);
}
body {
  background-color: #0f172a;
  background-image: radial-gradient(1200px 600px at 20% 0%, rgba(56,189,248,0.18), transparent 60%), radial-gradient(1000px 500px at 90% 10%, rgba(14,165,233,0.16), transparent 60%);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,6,23,0.55) 0%, rgba(2,6,23,0.78) 100%);
  z-index: -1;
}
.navbar {
  background: rgba(2, 6, 23, 0.44) !important;
  backdrop-filter: blur(7px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar .nav-link,
.navbar .navbar-brand {
  color: #f8fafc !important;
}
.navbar .navbar-toggler {
  border: 2px solid rgba(255,255,255,0.9) !important;
  background: rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 0.38rem 0.52rem;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.28), 0 8px 18px rgba(2,6,23,0.35);
  backdrop-filter: blur(6px);
}
.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.22rem rgba(255,255,255,0.35), 0 8px 18px rgba(2,6,23,0.35);
}
.navbar .navbar-toggler-icon {
  width: 1.3rem;
  height: 1.3rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.98)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.8' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  background-size: 100% 100% !important;
}
.jumbotron,
.about,
.konsul,
footer,
.card,
.card-about,
.card-featured,
.modal-content,
.card-footers,
.card-footers2 {
  background: var(--surface) !important;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(7px);
}
.card,
.card-featured,
.modal-content {
  border-radius: 22px !important;
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.4);
}
h1, h2, h3, h4, p, li, a, span {
  color: #e2e8f0;
}
.title,
.display-4,
.navbar .nav-link:hover,
footer h1 {
  color: #f8fafc !important;
}
.tombol-transparan,
.btn,
a.btn {
  background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--brand-light) 55%, white) !important;
  color: #fff !important;
  border-radius: 14px !important;
}
.tombol-transparan:hover,
.btn:hover,
a.btn:hover {
  background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand-strong) 100%) !important;
}
.navbar-brand img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 14px;
  padding: 4px;
  background: rgba(255,255,255,0.08);
}
.fb-like, iframe {
  border-radius: 14px;
  overflow: hidden;
}
.wa-floating {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand) 100%);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--brand-light) 55%, white);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-strong) 38%, transparent);
  text-decoration: none;
}
.wa-floating i { color: #fff; }
@media (max-width: 768px) {
  .display-4 { font-size: 1.8rem !important; }
  .wa-floating { right: 12px; bottom: 12px; }
  body { background-attachment: scroll; }
}