:root {
  --smansa-navy: #0b1728;
  --smansa-blue: #1d5fd1;
  --smansa-cyan: #20b7d8;
  --smansa-gold: #f4b63f;
  --smansa-red: #dc3545;
  --smansa-ink: #172033;
  --smansa-muted: #667085;
  --smansa-line: #e6edf5;
  --smansa-soft: #f5f8fc;
}

body {
  background: #fbfcfe;
  color: var(--smansa-ink);
}

#header.overlay-header {
  padding: 14px 0;
  transition: background .2s ease, box-shadow .2s ease, padding .2s ease;
}

#header.header-scrolled,
#header.detail {
  background: rgba(11, 23, 40, .96) !important;
  box-shadow: 0 18px 45px rgba(11, 23, 40, .16);
}

#header #logo span {
  line-height: 1.15;
  letter-spacing: 0;
}

#nav-menu-container .nav-menu > li > a {
  border-radius: 999px;
  font-weight: 700;
  padding: 9px 12px !important;
}

#nav-menu-container .nav-menu > li.menu-active > a,
#nav-menu-container .nav-menu > li > a:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

#intro {
  min-height: 560px;
  overflow: hidden;
}

#intro .base-bg img,
#intro .for-image img,
#berita-pilihan img,
#news .card img {
  object-fit: cover;
}

#intro .base-bg img {
  filter: brightness(1.18) contrast(1.04);
}

#intro .overlay {
  background: linear-gradient(110deg, rgba(8, 21, 38, .62), rgba(17, 57, 112, .38) 56%, rgba(32, 183, 216, .12));
}

#intro h1 {
  font-size: 54px;
  letter-spacing: 0;
  line-height: 1.05;
}

#intro p {
  color: rgba(255, 255, 255, .88);
  max-width: 680px;
}

.btn-selengkapnya,
.btn-primary {
  border: 0;
  border-radius: 999px;
  box-shadow: 0 14px 28px rgba(29, 95, 209, .22);
}

.btn-info,
.btn-primary {
  background: linear-gradient(135deg, var(--smansa-blue), var(--smansa-cyan));
}

#event .kiri {
  background: var(--smansa-navy);
}

#event .kanan {
  background: linear-gradient(135deg, var(--smansa-blue), var(--smansa-cyan));
}

#kalendar h2,
#sambutan h2,
#statistik h2,
#news h1 {
  color: var(--smansa-ink) !important;
  letter-spacing: 0;
}

#berita-pilihan {
  background: linear-gradient(135deg, var(--smansa-navy), #163b70);
  margin-top: 0 !important;
  padding-bottom: 56px;
}

#berita-pilihan .card,
#news .card,
.security-card {
  border-radius: 8px !important;
  box-shadow: 0 18px 50px rgba(15, 35, 66, .12);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

#berita-pilihan .card:hover,
#news .card:hover,
.security-card:hover {
  box-shadow: 0 22px 60px rgba(15, 35, 66, .18);
  transform: translateY(-3px);
}

#berita-pilihan figcaption,
#news .tipe-1 figcaption,
#news .tipe-5 figcaption {
  background: linear-gradient(180deg, rgba(11, 23, 40, 0), rgba(11, 23, 40, .88));
}

#news .tipe-6 .inner,
#news .tipe-4 .inner {
  background: #fff;
}

#berita .per-berita,
#pengumuman .card {
  background: #fff;
  border: 1px solid var(--smansa-line);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(15, 35, 66, .1);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

#berita .per-berita:hover,
#pengumuman .card:hover {
  box-shadow: 0 20px 54px rgba(15, 35, 66, .16);
  transform: translateY(-3px);
}

#berita .per-berita figure {
  min-height: 220px;
  overflow: hidden;
}

.section-kicker {
  color: var(--smansa-blue);
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.security-updates {
  background: linear-gradient(180deg, #fff, #f6f9fe);
  border: 1px solid var(--smansa-line);
  border-radius: 8px;
}

.security-card {
  background: #fff;
  border: 1px solid var(--smansa-line);
  color: inherit;
  padding: 22px;
}

.security-card:hover {
  color: inherit;
  text-decoration: none;
}

.security-badge {
  background: rgba(220, 53, 69, .1);
  border-radius: 999px;
  color: var(--smansa-red);
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  text-transform: uppercase;
}

.detailnya > .row:first-child .col-12 {
  background: #fff;
  border: 1px solid var(--smansa-line);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(15, 35, 66, .08);
  padding: 36px;
}

.detailnya figure.brr {
  border-radius: 8px;
  max-height: 560px;
  overflow: hidden;
}

.detailnya .isi {
  color: #344054;
  font-size: 17px;
}

.ratio {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.ratio::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.ratio > iframe {
  border: 0;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

@media (max-width: 991px) {
  #intro {
    min-height: 480px;
  }

  #intro h1 {
    font-size: 38px;
  }

  .detailnya > .row:first-child .col-12 {
    padding: 24px;
  }
}

@media (max-width: 576px) {
  #header #logo span {
    font-size: 15px;
  }

  #intro h1 {
    font-size: 32px;
  }

  #intro p {
    font-size: 15px;
  }
}