:root{--dark:#0f2742;--dark-2:#142a44;--primary:#ffa62b;--primary-600:#e59110;--body:#f6f8fb}
:root{--topbar-h:34px}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:#1b2430;background:var(--body)}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  border: 2px solid rgba(255, 255, 255, 0.9);
  line-height: 1;
}

.back-to-top i {
  display: inline-block;
  transition: transform 0.3s ease;
}

.back-to-top:hover {
  background: var(--primary-600);
  color: white;
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Navbar */
.navbar{transition:all .25s ease}
.navbar.navbar-transparent{background:transparent}
.navbar.scrolled{background:var(--dark-2);box-shadow:0 6px 24px rgba(0,0,0,.2)}
.navbar.fixed-top{top:var(--topbar-h)}
.navbar .navbar-brand .brand-mark{display:inline-block;width:14px;height:14px;border-radius:3px;background:linear-gradient(135deg,var(--primary),#ffd99a)}
.navbar .nav-link{color:#fff;opacity:.9}
.navbar.scrolled .nav-link{color:#e6edf7}

/* Navbar link hover effects: gradient underline + soft highlight */
.navbar .nav-link{position:relative;transition:color .25s ease, opacity .25s ease}
.navbar .nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:.15rem;height:2px;
  background:linear-gradient(90deg,var(--primary),#ffd99a);
  transform:scaleX(0);transform-origin:10% 50%;transition:transform .35s cubic-bezier(.2,.8,.2,1);
  border-radius:2px;opacity:.95
}
.navbar .nav-link::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:-.35rem;width:58%;height:140%;border-radius:999px;
  background:rgba(255,255,255,.06);filter:blur(8px);opacity:0;transition:opacity .35s ease
}
.navbar .nav-link:hover,.navbar .nav-link:focus{opacity:1}
.navbar .nav-link:hover::after,.navbar .nav-link:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.navbar .nav-link:hover::before,.navbar .nav-link:focus-visible::before{opacity:1}

/* Active state mirrors hover state */
.navbar .nav-link.active{opacity:1}
.navbar .nav-link.active::after{transform:scaleX(1);transform-origin:0 50%}
.navbar .nav-link.active::before{opacity:1}

/* Adjust effect colors on solid navbar */
.navbar.scrolled .nav-link::after{background:linear-gradient(90deg,var(--primary),#ffc76a)}
.navbar.scrolled .nav-link::before{background:rgba(230,237,247,.06)}

/* Navbar brand: logo, title, taglines, and divider */
.navbar .navbar-brand{gap:.5rem}
.navbar .navbar-brand .brand-logo{width:40px;height:40px;display:block}
.navbar .navbar-brand .brand-text{line-height:1.08}
.navbar .navbar-brand .brand-title{color:#fff;font-size:1.08rem}
.navbar .navbar-brand .brand-tagline{color:rgba(255,255,255,.8);font-size:.7rem;letter-spacing:.08px}
.navbar .navbar-brand .brand-divider{display:inline-block;width:1px;height:34px;background:rgba(255,255,255,.45)}

/* When navbar gains solid background */
.navbar.scrolled .navbar-brand .brand-title{color:#e6edf7}
.navbar.scrolled .navbar-brand .brand-tagline{color:rgba(230,237,247,.85)}
.navbar.scrolled .navbar-brand .brand-divider{background:rgba(230,237,247,.5)}

@media (min-width: 992px){
  .navbar .navbar-brand{gap:.6rem}
  .navbar .navbar-brand .brand-logo{width:44px;height:44px}
  .navbar .navbar-brand .brand-divider{height:38px}
  .navbar .navbar-brand .brand-title{font-size:1.15rem}
  .navbar .navbar-brand .brand-tagline{font-size:.70rem}
}

/* Hero */
.hero{position:relative;background:url('https://images.unsplash.com/photo-1600880292089-90e7f78a0e0e?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,42,68,.6),rgba(20,42,68,.7))}
.hero .container{z-index:1}

/* Adaptive hero background sizing to always show full image elegantly */
#home{background-position:center 30%;background-repeat:no-repeat;background-size:cover}
@media (min-width: 992px){
  #home{background-position:center 40%}
}

/* Floating stats separator between hero and next section */
.floating-stats{position:relative;z-index:3;margin-top:-56px;margin-bottom:24px}
.floating-stats .card{border-radius:18px}
.floating-stats .stat-card{background:#fff}
.floating-stats .stat-card .card-body{padding:18px 18px}
.floating-stats .icon-wrap{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px}
.floating-stats .stat-label{font-size:.85rem;color:#6b7a90}
.floating-stats .stat-value{font-size:1.1rem;font-weight:600;color:#142a44}

@media (min-width: 768px){
  .floating-stats{margin-top:-72px}
  .floating-stats .stat-card .card-body{padding:22px 22px}
  .floating-stats .stat-value{font-size:1.25rem}
}

@media (max-width: 575.98px){
  .floating-stats{margin-top:-36px}
}

/* Topbar */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:1045;
  background:rgba(20,42,68,.85);backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);color:#e6edf7}
.topbar .container{height:100%}
.topbar .link-contrast{color:#e6edf7;text-decoration:none;opacity:.9;transition:opacity .2s ease,color .2s ease}
.topbar .link-contrast:hover{opacity:1;color:#fff}
.topbar .bi{line-height:1;opacity:.9}
@media (max-width: 575.98px){
  :root{--topbar-h:30px}
  .topbar{font-size:.8rem}
}

/* Cards */
.program-card{border:0;border-radius:1rem;box-shadow:0 10px 30px rgba(20,42,68,.08)}
.program-card .icon-wrap{width:48px;height:48px;border-radius:12px;display:inline-grid;place-items:center;font-size:20px}

/* Buttons */
.btn-primary{--bs-btn-bg:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-bg:var(--primary-600);--bs-btn-hover-border-color:var(--primary-600);--bs-btn-active-bg:var(--primary-600)}

/* Utilities */
.bg-body{background:var(--body)!important}
.bg-primary{background:var(--dark-2)!important}

/* Footer styling to match header background */
footer.bg-dark{background:var(--dark-2)!important;border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -16px 24px -24px rgba(20,42,68,.5) inset}
footer.bg-dark hr{border-color:rgba(255,255,255,.08)}
footer.bg-dark .text-white-50{color:rgba(230,237,247,.7)!important}
footer.bg-dark a.text-white-50:hover{color:var(--primary)!important}
footer.bg-dark .social-links a{opacity:.9;transition:opacity .2s ease,color .2s ease}
footer.bg-dark .social-links a:hover{opacity:1;color:var(--primary)}
.text-primary{color:var(--primary)!important}
.bg-primary-subtle{background:rgba(255,166,43,.15)!important}

/* Footer */
footer{background:#fff}

/* Split CTA (Donasi | Login) */
.split-cta{display:flex;align-items:center;gap:0;overflow:hidden;border-radius:999px;position:relative;isolation:isolate}
.split-cta a{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .9rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:all .35s cubic-bezier(.2,.8,.2,1)}
.split-cta .donasi{background:var(--primary);color:#1b2430;border:none}
.split-cta .login{background:var(--dark-2);color:#e6edf7;border:none}
.split-cta .donasi i,.split-cta .login i{font-size:1rem;line-height:1}
/* Remove diagonal divider */
.split-cta::after{content:none;display:none}

/* Equal halves by default */
.split-cta .donasi,.split-cta .login{flex:1 1 0%}

/* Hover effects */
.split-cta .donasi:hover{filter:brightness(1.05)}
.split-cta .login:hover{filter:brightness(1.08)}

/* When hovering Login: shrink Donasi toward left corner, give emphasis to Login */
.split-cta:has(.login:hover) .donasi{flex:.2 1 0%; transform:translateX(-8%) scale(.82); transform-origin:left center; opacity:0; pointer-events:none}
.split-cta:has(.login:hover){box-shadow:0 10px 30px rgba(20,42,68,.12)}
.split-cta:has(.login:hover) .login{flex:1.3 1 0%}

/* Symmetric: when hovering Donasi, shrink/hide Login and emphasize Donasi */
.split-cta:has(.donasi:hover) .login{flex:.2 1 0%; transform:translateX(8%) scale(.82); transform-origin:right center; opacity:0; pointer-events:none}
.split-cta:has(.donasi:hover){box-shadow:0 10px 30px rgba(20,42,68,.12)}
.split-cta:has(.donasi:hover) .donasi{flex:1.3 1 0%}

/* Small screens adjustments */
@media (max-width: 575.98px){
  .split-cta a{padding:.35rem .75rem;font-size:.9rem}
}