/* Modern header + footer | Yayasan Soebono Mantofani
   Load AFTER Bootstrap and theme CSS. Scoped to existing header/footer classes. */
:root {
  --ysm-green: #176b45;
  --ysm-green-dark: #104a32;
  --ysm-green-soft: #eaf5ee;
  --ysm-lime: #b4d23b;
  --ysm-gold: #e5b84b;
  --ysm-ink: #1c2d25;
  --ysm-muted: #66756d;
  --ysm-footer: #102c22;
}

/* Top information strip */
.header-topbar {
  position: relative;
  z-index: 1040;
  color: #eaf5ee;
  background: linear-gradient(110deg, var(--ysm-green-dark), var(--ysm-green));
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  letter-spacing: .15px;
}
.header-topbar .container { max-width: 1240px; }
.header-topbar .row { display: flex; align-items: center; }
.header-top_address {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 25px;
  padding: 10px 0;
}
.header-top_list {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.9);
  line-height: 1.6;
}
.header-top_list span {
  color: var(--ysm-gold);
  font-size: 15px;
  transition: transform .25s ease, color .25s ease;
}
.header-top_list:hover span { color: #fff; transform: translateY(-2px); }
.header-top_login { text-align: right; }
.header-top_login a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: color .25s ease;
}
.header-top_login a:hover { color: var(--ysm-gold); }

/* Navigation bar */
[data-toggle="affix"] {
  position: relative;
  z-index: 1030;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 8px 28px rgba(21,58,39,.08);
  border-bottom: 1px solid rgba(23,107,69,.09);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-menu2 { max-width: 1240px; }
.nav-menu2 .row { display: flex; align-items: center; }
.nav-menu2 .navbar2 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  background: transparent !important;
}
.nav-menu2 .nav-brand2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  margin: 0 !important;
  color: var(--ysm-green-dark) !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .7px;
  line-height: 1.25;
  transition: transform .25s ease;
}
.nav-menu2 .nav-brand2:hover { transform: translateY(-2px); }
.nav-menu2 .nav-brand2 img {
  width: 48px !important;
  height: 48px;
  object-fit: contain;
  padding: 4px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(16,74,50,.12);
  transition: transform .3s ease;
}
.nav-menu2 .nav-brand2:hover img { transform: rotate(-4deg) scale(1.04); }
.nav-menu2 .navbar-collapse { flex-grow: 0; margin: 0 !important; background: transparent !important; }
.nav-menu2 .navbar-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}
.nav-menu2 .navbar-nav .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px !important;
  color: #33483b !important;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: color .22s ease, background .22s ease, transform .22s ease;
}
.nav-menu2 .navbar-nav .nav-link::after {
  position: absolute;
  right: 12px;
  bottom: 5px;
  left: 12px;
  height: 2px;
  content: "";
  background: var(--ysm-lime);
  border-radius: 4px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-menu2 .navbar-nav .nav-link:hover,
.nav-menu2 .navbar-nav .show > .nav-link {
  color: var(--ysm-green-dark) !important;
  background: var(--ysm-green-soft);
  transform: translateY(-1px);
}
.nav-menu2 .navbar-nav .nav-link:hover::after,
.nav-menu2 .navbar-nav .show > .nav-link::after { transform: scaleX(1); }
.nav-menu2 .dropdown-menu {
  min-width: 220px;
  margin-top: 8px;
  padding: 8px;
  background: #fff !important;
  border: 1px solid rgba(23,107,69,.1);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(16,50,33,.15);
  animation: ysm-menu-in .18s ease both;
}
.nav-menu2 .dropdown-item {
  padding: 10px 12px;
  color: #33483b;
  border-radius: 8px;
  font-size: 13px;
  transition: color .2s ease, background .2s ease, padding-left .2s ease;
}
.nav-menu2 .dropdown-item:hover,
.nav-menu2 .dropdown-item:focus {
  padding-left: 16px;
  color: var(--ysm-green-dark);
  background: var(--ysm-green-soft);
}
.nav-menu2 .navbar-toggler {
  padding: 8px 11px;
  color: var(--ysm-green-dark);
  background: var(--ysm-green-soft) !important;
  border: 1px solid rgba(23,107,69,.15);
  border-radius: 10px;
  outline: none;
}
.nav-menu2 .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(23,107,69,.12); }

/* Footer */
footer {
  position: relative;
  overflow: hidden;
  margin-top: 60px;
  padding: 58px 0 0;
  color: rgba(255,255,255,.76);
  background: radial-gradient(circle at 85% 8%, rgba(180,210,59,.12), transparent 26%),
              linear-gradient(145deg, #163c2d 0%, var(--ysm-footer) 68%, #0b2119 100%);
  border-top: 4px solid var(--ysm-lime);
}
footer::before {
  position: absolute;
  top: -70px;
  left: -60px;
  width: 210px;
  height: 210px;
  content: "";
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.018), 0 0 0 46px rgba(255,255,255,.015);
  pointer-events: none;
}
footer > .container { position: relative; z-index: 1; }
footer .sitemap, footer .address { height: 100%; padding: 0 10px 24px; }
footer .sitemap h3, footer .address h3 {
  position: relative;
  margin: 0 0 24px;
  padding-bottom: 13px;
  color: #fff;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: .2px;
}
footer .sitemap h3::after, footer .address h3::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 42px;
  height: 3px;
  content: "";
  background: var(--ysm-lime);
  border-radius: 5px;
  transition: width .25s ease;
}
footer .sitemap:hover h3::after, footer .address:hover h3::after { width: 68px; }
footer .sitemap ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
footer .sitemap li { margin: 0 0 10px; }
footer .sitemap a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.73);
  text-decoration: none;
  font-size: 13px;
  transition: color .22s ease, transform .22s ease;
}
footer .sitemap a i {
  width: 18px;
  color: var(--ysm-lime);
  text-align: center;
  transition: transform .22s ease;
}
footer .sitemap a:hover { color: #fff; transform: translateX(4px); }
footer .sitemap a:hover i { transform: scale(1.12); }
footer .address p {
  margin: 0 0 15px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
footer .address p span[class*="icon-"] { color: var(--ysm-lime); }
footer .address .nav-link { display: inline-block; padding: 6px 0; }
footer .address .nav-link img {
  width: auto;
  max-width: 170px;
  max-height: 58px;
  object-fit: contain;
  transition: transform .25s ease, filter .25s ease;
}
footer .address .nav-link:hover img { transform: translateY(-3px); filter: brightness(1.08); }
footer .footer-social-icons { display: flex; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
footer .footer-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
  transition: background .22s ease, transform .22s ease;
}
footer .footer-social-icons a:hover { background: var(--ysm-green); transform: translateY(-3px); }
footer > .container:last-of-type {
  margin-top: 10px;
  padding-top: 18px;
  padding-bottom: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
}
footer > .container:last-of-type .col-md-12 {
  padding: 0 15px !important;
  color: rgba(255,255,255,.62) !important;
  font-size: 12px;
  line-height: 1.8;
  text-align: center !important;
}
footer a { transition: color .2s ease; }
footer > .container:last-of-type a { color: #e1f2a0; text-decoration: none; font-weight: 650; }
footer > .container:last-of-type a:hover { color: #fff; }

@keyframes ysm-menu-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 992px) {
  .nav-menu2 .navbar2 { min-height: 82px; }
}
@media (max-width: 1199.98px) {
  .nav-menu2 .navbar-nav .nav-link { padding-right: 9px !important; padding-left: 9px !important; font-size: 12px; }
  .nav-menu2 .nav-brand2 { font-size: 13px; }
}
@media (max-width: 991.98px) {
  .header-topbar { font-size: 11px; }
  .header-top_address { gap: 4px 15px; padding: 8px 0; }
  .nav-menu2 .navbar2 { flex-wrap: wrap; padding: 10px 0; }
  .nav-menu2 .navbar-collapse { flex-basis: 100%; width: 100%; margin-top: 12px !important; }
  .nav-menu2 .navbar-nav { align-items: stretch; gap: 2px; padding: 8px; background: #fff; border: 1px solid rgba(23,107,69,.1); border-radius: 14px; }
  .nav-menu2 .navbar-nav .nav-link { width: 100%; justify-content: space-between; padding: 10px 12px !important; font-size: 13px; }
  .nav-menu2 .navbar-nav .nav-link::after { display: none; }
  .nav-menu2 .dropdown-menu { margin: 2px 8px 8px; box-shadow: none; background: #f7fbf8 !important; }
  footer { margin-top: 42px; padding-top: 42px; }
  footer .sitemap, footer .address { padding-bottom: 25px; }
}
@media (max-width: 575.98px) {
  .header-topbar .row { display: block; }
  .header-topbar .col-xs-6, .header-topbar .col-sm-8, .header-topbar .col-md-9,
  .header-topbar .col-sm-4, .header-topbar .col-md-3 { width: 100%; max-width: 100%; }
  .header-top_address { display: grid; gap: 5px; padding: 8px 0; }
  .header-top_list { align-items: flex-start; font-size: 10px; }
  .header-top_login { display: none; }
  .nav-menu2 .nav-brand2 { gap: 9px; font-size: 12px; letter-spacing: .35px; }
  .nav-menu2 .nav-brand2 img { width: 42px !important; height: 42px; }
  footer { margin-top: 32px; padding-top: 35px; }
  footer .sitemap h3, footer .address h3 { margin-bottom: 16px; }
  footer .sitemap, footer .address { padding-right: 4px; padding-left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}