html { scroll-behavior: smooth; }
.navbar-blur { backdrop-filter: saturate(180%) blur(10px); background: rgba(255,255,255,.8); }

.hero {
  background: radial-gradient(1200px 400px at 10% 10%, #e8f5e9 0%, transparent 60%),
              radial-gradient(1000px 400px at 90% 20%, #e3f2fd 0%, transparent 60%),
              linear-gradient(180deg,#ffffff 0%, #f6f9fc 100%);
}

.sbp-theme{
  --sbp-green:#38D66B;
  --sbp-green-ink:#187A37;
  --sbp-teal:#1AD4CB;    
  --sbp-yellow:#FFD45A;   
  --sbp-rose:#FF7D7D;    
  --sbp-ink:#1e242b;
  --sbp-muted:#667085;
  --sbp-shadow: 0 14px 34px rgba(24, 122, 55, .18);
}

.sbp-theme .hero{
  position: relative; isolation:isolate;
}
.sbp-theme .hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1000px 420px at 14% -10%, rgba(26,212,203,.28), transparent 62%),
    radial-gradient(1100px 460px at 105% 8%,  rgba(56,214,107,.28), transparent 62%),
    radial-gradient(900px 360px  at 50% 100%, rgba(255,212,90,.22), transparent 60%);
  mix-blend-mode: screen;
}
.sbp-theme .hero::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.22; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg width='260' height='260' viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237fe9a3'%3E%3Cpath fill-opacity='.36' d='M30 40c18-22 42-22 60 0-18 22-42 22-60 0zM150 120c16-20 38-20 54 0-16 20-38 20-54 0zM220 60c14-18 34-18 48 0-14 18-34 18-48 0z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:220px 220px;
}

.sbp-theme .hero-cta .btn-cta-primary{
  background: linear-gradient(135deg, var(--sbp-green) 0%, #56F08E 100%) !important;
  box-shadow: 0 12px 24px rgba(56,214,107,.30);
}
.sbp-theme .hero-cta .btn-cta-ghost{
  border-width:2px; background:#fff;
}
.sbp-theme .btn-cta-strong{
  background: linear-gradient(135deg, var(--sbp-teal) 0%, #66F3EC 100%) !important;
  color:#063a36!important; box-shadow: 0 12px 26px rgba(26,212,203,.28);
}

.sbp-theme .stat-card,
.sbp-theme .action-card,
.sbp-theme {
  position:relative; overflow:clip;
  background: linear-gradient(180deg, #ffffff, #ffffffee);
  box-shadow: var(--sbp-shadow);
}
.sbp-theme .stat-card::before,
.sbp-theme .action-card::before{
  content:""; position:absolute; right:-28px; top:-28px;
  width:150px; height:150px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(26,212,203,.22), transparent 70%);
}
.sbp-theme .stat-card::after,
.sbp-theme .action-card::after{
  content:""; position:absolute; left:-14px; bottom:-14px;
  width:130px; height:130px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(56,214,107,.18), transparent 70%);
}

.sbp-theme #why{ background:
  radial-gradient(600px 240px at 12% 100%, rgba(255,212,90,.16), transparent 60%),
  radial-gradient(580px 220px at 100% 0%,  rgba(122,241,170,.18), transparent 60%); }

.sbp-theme #about{ background:
  linear-gradient(180deg, #F9FFFC 0%, #FFFFFF 100%); }

.sbp-theme #impact-flw{ background:
  linear-gradient(180deg, #F5FFF9 0%, #FFFFFF 100%); }

.sbp-theme #partners{ background:
  radial-gradient(700px 260px at 50% 0%, rgba(26,212,203,.12), transparent 60%); }

.sbp-theme #aksi-bersama{ background:
  linear-gradient(180deg, #F4FFFA 0%, #FFFFFF 100%); }

.sbp-theme .fact-icon{
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.02);
  background: #fff;
}

.sbp-theme .partner-card:hover .partner-logo{ filter: saturate(1.35) brightness(1.02); }

.sbp-theme #impact-flw .display-6{ color: var(--sbp-green-ink); letter-spacing:.2px }

.sbp-theme #contact{
  background:
    radial-gradient(580px 240px at 95% 18%, rgba(255,212,90,.22), transparent 60%),
    radial-gradient(520px 220px at 0% 100%,  rgba(122,241,170,.20), transparent 60%);
}
.sbp-theme .contact-card{ box-shadow: var(--sbp-shadow); }

.sbp-wave{ position:relative; height:54px; overflow:hidden; }
.sbp-wave::before{
  content:""; position:absolute; inset:-1px 0 auto 0; height:100%;
  background:
    radial-gradient(70px 36px at 40px -8px, rgba(56,214,107,.20), transparent 70%),
    radial-gradient(70px 36px at 140px 24px, rgba(26,212,203,.20), transparent 70%),
    radial-gradient(70px 36px at 250px -6px, rgba(255,212,90,.22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,0));
  mask:
    radial-gradient(130px 46px at 40px 46px, #000 98%, transparent 100%),
    radial-gradient(130px 46px at 170px 0px, #000 98%, transparent 100%) 130px 0 / 260px 100% repeat-x;
}
.sbp-wave--flip{ transform: rotate(180deg); }

.sbp-theme .nav-badge-green{
  border-color: rgba(24,122,55,.35);
  background: rgba(56,214,107,.10);
}

@media (prefers-color-scheme: dark){
  .sbp-theme .hero::before{ opacity:.30 }
  .sbp-theme .hero::after{ opacity:.28 }
  .sbp-theme .contact-card{ background: rgba(255,255,255,.06) }
}

.sbp-theme .btn-cta-ghost {
  border: 2px solid var(--sbp-green);
  color: var(--sbp-green);
  background: transparent;
  transition: all .3s ease;
}

.sbp-theme .btn-cta-ghost:hover {
  background: rgba(56,214,107,.1);
  color: var(--sbp-green-ink);
  border-color: var(--sbp-green);
}

.sbp-theme .hero {
  position: relative;
  overflow: hidden;
}

.sbp-theme .hero-visual{
  position: relative;
  display:inline-block;
  z-index:1;
}

.sbp-theme .hero-outline-frame img{
  display:block; max-width:100%; height:auto;
  border-radius:30px 0 30px 0;
}

.sbp-theme .accent-pill{
  position:absolute; width:170px; height:20px;
  border-radius:10px;
}

.sbp-theme .accent-pill--top { background:#FFB000; box-shadow:0 6px 18px rgba(255,176,0,.25); top:5px; right:8%; }
.sbp-theme .accent-pill--bottom { background:#0f7a45; box-shadow:0 6px 18px rgba(0, 255, 98, 0.25); bottom:5px; right:75%; }

.sbp-theme .accent-dots{
  position:absolute; right:2.4%; top:26%;
  display:flex; flex-direction:column; gap:22px;
}

.sbp-theme .accent-dot{
  width:36px; height:36px; border-radius:999px; background:#0C8553;
  box-shadow:0 6px 16px rgba(12,133,83,.22);
}

.sbp-theme .accent-dot:nth-child(2){ background:#FFB000; }
.sbp-theme .accent-dot:nth-child(3){ background:#0C8553; }

@media (max-width: 991.98px){
  .sbp-theme .accent-pill,
  .sbp-theme .accent-dots{ display:none; }
  .sbp-theme .hero-top-strip{ height:14px; }
  .sbp-theme .hero-bottom-bar{ height:18px; }
}

.sbp-theme .btn-cta-ghost {
  border: 2px solid var(--sbp-green);
  color: var(--sbp-green);
  background: transparent;
  transition: all .3s ease;
}
.sbp-theme .btn-cta-ghost:hover {
  background: rgba(56,214,107,.1);
  color: var(--sbp-green-ink);
  border-color: var(--sbp-green);
}

.illustration-wrap { position: relative; overflow: hidden; }
.hero-illustration {
  width: clamp(240px, 90%, 560px);
  height: auto; object-fit: contain; display: inline-block;
}
.illustration-wrap::after {
  content: ""; position: absolute; left: 50%; bottom: 6px;
  width: clamp(120px, 40%, 260px); height: 10px; transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(0,0,0,.18), rgba(0,0,0,0));
  filter: blur(2px); animation: shadowPulse 4.5s ease-in-out infinite;
}

.stat-card:hover { transform: translateY(-4px); transition: .25s ease; }
.footer-link { color: inherit; text-decoration: none; }
.footer-link:hover { text-decoration: underline; }

.nav-badge-green {
  display: inline-flex; align-items: center; padding: 0.5rem 1rem;
  border-radius: 0.5rem; font-weight: 500; text-decoration: none;
  color: #198754; border: 2px solid #198754; background-color: transparent;
  transition: all 0.2s ease;
}
.nav-badge-green i { color: inherit; }
.nav-badge-green:hover { background-color: #198754; color: #fff; text-decoration: none; }

@keyframes bob { 0%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-12px) rotate(-1deg)} 100%{transform:translateY(0) rotate(0)} }
@keyframes shadowPulse {
  0%,100% { transform: translateX(-50%) scaleX(1); opacity: .9; }
  50%     { transform: translateX(-50%) scaleX(1.08); opacity: .75; }
}
.floating { animation: bob 4.5s ease-in-out infinite; will-change: transform; }

@media (max-width: 576px) { .hero-illustration { width: min(100%, 420px); } }
@media (prefers-reduced-motion: reduce) { .floating, .illustration-wrap::after { animation: none; } }

.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-cta-primary {
  --c:#198754; background: linear-gradient(180deg, #1ea26a, var(--c));
  color:#fff; border: 0; padding: .85rem 1.35rem; border-radius: .75rem;
  box-shadow: 0 6px 16px rgba(25,135,84,.25); font-weight: 700;
}
.btn-cta-primary:hover { filter: brightness(1.03); transform: translateY(-1px); }
.btn-cta-primary:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(25,135,84,.25); }

.btn-cta-ghost {
  padding: .85rem 1.35rem; border-radius: .75rem; border: 2px solid #198754;
  color: #198754; background: #fff; font-weight: 700;
}
.btn-cta-ghost:hover { background:#198754; color:#fff; }

@media (max-width: 576px) { .hero-cta .btn { width: 100%; } }

.section-box{
  background:#f8f9fa; border-radius:1rem; padding:2rem 1.25rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.04) inset;
}
@media (min-width: 992px){ .section-box{ padding:3rem 2.25rem; } }

.reveal-up{ opacity:0; transform: translateY(14px); transition: .6s ease; }
.reveal-up.show{ opacity:1; transform: translateY(0); }

.btn-cta-strong{
  --c:#198754; background: linear-gradient(180deg, #2ac082, var(--c));
  color:#fff; border:0; border-radius:.8rem; font-weight:800;
  box-shadow: 0 10px 22px rgba(25,135,84,.28), 0 0 0 2px rgba(255,255,255,.3) inset;
  position:relative; overflow:hidden;
}
.btn-cta-strong:hover{ filter: brightness(1.04); transform: translateY(-1px); }
.btn-cta-strong:active{ transform: translateY(0); }
.btn-cta-strong::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120px 40px at -10% 50%, rgba(255,255,255,.35), transparent 60%);
  transform: translateX(-20%); transition: .4s ease;
}
.btn-cta-strong:hover::after{ transform: translateX(40%); }

.count-up{ tab-size: 2; }

.partner-card { transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.partner-card:hover { transform: translateY(-4px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); }
.partner-logo { max-height: 60px; filter: grayscale(0%); opacity:.8; transition: filter .2s ease, opacity .2s ease, transform .2s ease; }
.partner-card:hover .partner-logo { filter: grayscale(0%); opacity:1; transform: scale(1.03); }
.action-card { border-radius: 1rem; }
.action-card .badge { font-weight: 600; }
#aksi-bersama .badge { color: var(--bs-secondary) !important; font-weight: 500; }

.flyer-grid {
  padding: 1.5rem 0;
}
.flyer-grid .col-lg-4 {
  padding: 0 0.5rem;
}

.flyer-frame {
  position: relative;
  background: #fff;          
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.1);
  overflow: hidden;
  aspect-ratio: 3/4;
  max-width:80%;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, border-color .25s ease;
}

.flyer-frame:hover {
  transform: translateY(-4px);
  border-color: rgb(16, 121, 0); 
}

.flyer-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .6s ease;
}
.carousel-item.active .flyer-image {
  transform: scale(1.02);
}

.flyer-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%);
  color: #fff;
  pointer-events: none;
}
.flyer-caption {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  border-radius: .6rem;
  display: inline-block;
  padding: .25rem .4rem;
  font-size: .9rem;
  color: #fff;
}

#aksi-bersama .carousel {
  padding: 1.5rem 0 2rem;
}

@media (min-width: 992px) { .navbar .dropdown:hover .dropdown-menu { display:block; margin-top:0; } }

footer a { transition: color .2s ease; }
footer a:hover, footer .hover-text-success:hover { color: #198754 !important; }

html, body { height: 100%; }
body { min-height: 100dvh; display: flex; flex-direction: column; padding-top: 72px; }
main { flex: 1 0 auto; }
footer { margin-top: auto; }

.dropdown-menu.dropdown-success{
  --bs-dropdown-bg: var(--bs-white);
  --bs-dropdown-color: #fff;
  --bs-dropdown-link-color: #000000ff;
  --bs-dropdown-link-hover-color: var(--bs-success);
  --bs-dropdown-link-hover-bg: rgba(255,255,255,.12);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--bs-success);
  --bs-dropdown-border-color: rgba(0,0,0,.12);
  --bs-dropdown-divider-bg: rgba(255,255,255,.25);
  --bs-dropdown-link-disabled-color: rgba(255,255,255,.55);
}

.fact-icon{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  flex: 0 0 auto; font-size: 1.1rem;
}

#contact{ position: relative; z-index:1; }
.contact-bg-blob{
  position:absolute; left:-10%; bottom:-80px; width:420px; height:420px;
  background: radial-gradient(closest-side, rgba(25,135,84,.18), rgba(25,135,84,0));
  filter: blur(8px); pointer-events:none; z-index:0;
}
@media (max-width: 576px){
  .contact-bg-blob{ width:300px; height:300px; left:-20%; bottom:-60px; }}

#agenda { --cal-success:#198754; --cal-success-soft:#d1e7dd; }

#agenda .cal-header .btn{ border-color:var(--cal-success); color:var(--cal-success); }
#agenda .cal-header .btn:hover{ background:var(--cal-success); color:#fff; }
#agenda .cal-title{ color:var(--cal-success); }

#agenda .cal-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  gap:.5rem;
}

#agenda .cal-weekday{
  font-weight:600; color:var(--cal-success);
  text-transform:uppercase; font-size:.75rem; letter-spacing:.02em;
}

#agenda .cal-cell{
  background:#fff; border:1px solid #e9ecef; border-radius:.75rem;
  min-height:clamp(64px, 12vw, 104px);
  padding:.5rem; position:relative; transition:box-shadow .2s,border-color .2s,transform .06s;
  cursor:pointer;
}
#agenda .cal-cell:hover{ border-color:var(--cal-success); box-shadow:0 6px 18px rgba(25,135,84,.12); }
#agenda .cal-date{ font-weight:700; font-size:.95rem; }
#agenda .cal-muted{ opacity:.45; }
#agenda .cal-today .cal-date{ color:var(--cal-success); }
#agenda .cal-today::after{
  content:''; position:absolute; right:.6rem; top:.65rem; width:.5rem; height:.5rem;
  border-radius:999px; background:var(--cal-success); box-shadow:0 0 0 3px var(--cal-success-soft);
}

#agenda .cal-dot{ width:8px;height:8px;border-radius:999px;background:var(--cal-success); }
#agenda .cal-chip{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; line-height:1;
  font-weight:600; background:var(--cal-success-soft); color:#0f5132; border:1px solid #badbcc;
  border-radius:999px; padding:.25rem .45rem; margin-top:.35rem; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

#agenda .day-panel .card{ border-color:var(--cal-success); }
#agenda .day-panel .card .card-title{ color:var(--cal-success); }

@media (min-width: 992px){
  #agenda .day-panel { position: sticky; top: 84px; }
}
@media (max-width: 991.98px){
  #agenda .cal-cell{ min-height:clamp(60px, 13vw, 92px); }
}
@media (max-width: 575.98px){
  #agenda .cal-grid{ gap:.35rem; }
  #agenda .cal-weekday{ font-size:.68rem; }
  #agenda .cal-date{ font-size:.9rem; }
  #agenda .cal-chip{ font-size:.66rem; }
}
@media (max-width: 420px){
  #agenda .cal-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #agenda .cal-wrap .cal-grid{ min-width:560px; }
}

#agenda .cal-legend-today{
  display:inline-block; width:.5rem; height:.5rem; border-radius:999px;
  background:var(--cal-success); box-shadow:0 0 0 3px var(--cal-success-soft); vertical-align:middle;
}

#agenda{ --cal-chip-fs:.42rem; }
#agenda #calGrid .cal-chip{ font-size: var(--cal-chip-fs); }
@media (max-width:575.98px){ #agenda{ --cal-chip-fs:.36rem; } }

:root{ --acc:#198754; --acc-soft:#d1e7dd; }

.doc-toolbar .btn { border-color: var(--acc); color: var(--acc); }
.doc-toolbar .btn:hover { background: var(--acc); color: #fff; }
.doc-title { color: var(--acc); }

.doc-card { border-radius: 1rem; position: relative; overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease; }
.doc-card:hover { border-color: var(--acc); box-shadow: 0 8px 24px rgba(25,135,84,.15); }

.doc-cover { position: relative; background: #f8f9fa; }
.doc-icon {
  width:56px; height:56px; border-radius:14px; background: var(--acc-soft); color:#0f5132;
  display:flex; align-items:center; justify-content:center; box-shadow: inset 0 0 0 1px #badbcc;
}
.doc-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.pdf-canvas { display:block; width:100% !important; height:100% !important; }

.doc-skel { position:absolute; inset:0; background: linear-gradient(90deg,#f3f4f6 25%,#e9ecef 37%,#f3f4f6 63%); background-size: 400% 100%; animation: skel 1.2s ease-in-out infinite; }
@keyframes skel { 0%{background-position: 100% 50%} 100%{background-position: 0 50%} }

.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; line-clamp: 2; -webkit-box-orient:vertical; overflow:hidden; }
.badge.text-black { color:#000 !important; }

.doc-overlay { position:absolute; inset:0; display:flex; align-items:end; justify-content:stretch;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45) 70%); opacity:0; transition: opacity .25s ease; pointer-events:none; }
.doc-card:hover .doc-overlay { opacity:1; }
.overlay-inner{ color:#fff; width:100%; padding:.65rem .9rem; display:flex; align-items:center; gap:.5rem; font-weight:600; text-shadow:0 2px 8px rgba(0,0,0,.35); }

#docs-gallery .btn-outline-success.active,
#docs-gallery .btn-outline-success:active { color:#fff; background-color:var(--acc); border-color:var(--acc); }
#docs-gallery .btn:focus-visible,
#docs-gallery .card:focus-within { outline:2px solid var(--acc); outline-offset:2px; }

.search-input:focus { border-color: var(--acc); box-shadow: 0 0 0 .2rem rgba(25,135,84,.15); }

.doc-actions { display:flex; gap:.5rem; margin-top:.6rem; }
@media (min-width: 992px){
  .doc-actions { opacity:0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
  .doc-card:hover .doc-actions { opacity:1; transform: translateY(0); }
}

.gallery-card { border-radius: .6rem; position: relative; }
.gallery-card img { transition: transform .35s ease; }
.gallery-card:hover img { transform: scale(1.04); }

.gallery-overlay {
  position:absolute; inset:0; display:flex; align-items:end; justify-content:stretch;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.45) 60%);
  opacity:0; transition: opacity .25s ease; pointer-events: none;
}
.gallery-card:hover .gallery-overlay { opacity:1; }

@media (min-width: 992px) {
  .col-lg-2-4 {
    flex: 0 0 auto;
    width: 20%;
  }
}

#photos-gallery .gallery-card .ratio{
  aspect-ratio: 4 / 3;
  height: 260px; 
}

@media (min-width: 768px){
  #photos-gallery .gallery-card .ratio{ height: 300px; }
}
@media (min-width: 1200px){
  #photos-gallery .gallery-card .ratio{ height: 340px; }
}


#photos-gallery .gallery-card img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#infographic-gallery .gallery-card{
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

#infographic-gallery figcaption{
  background: #fff;
  border-top: 1px solid #eef2f6;
}

@media (min-width: 992px){
  .col-lg-2-4 { flex: 0 0 auto; width: 20%; }
}

#infographic-gallery .gallery-card .ratio { aspect-ratio: 4/3; height: 260px; }
@media (min-width: 768px){  #infographic-gallery .gallery-card .ratio { height: 300px; } }
@media (min-width: 1200px){ #infographic-gallery .gallery-card .ratio { height: 340px; } }

#infographic-gallery .gallery-card img{
  object-fit: cover;
  width: 100%; height: 100%;
}

#infographic-gallery .inf-card{
  display:flex; flex-direction:column;
  border:1px solid #eef2f6;       
  border-radius:0;                
  background:#fff;
  transition: box-shadow .2s ease, transform .06s ease, border-color .2s ease;
  cursor:pointer;
}

#infographic-gallery .inf-card:hover{
  box-shadow:0 10px 28px rgba(15,23,42,.10);
  border-color:#e4e7ec;
  transform: translateY(-2px);
}

#infographic-gallery .inf-card:focus-visible{
  outline:2px solid rgba(25,135,84,.25);
  outline-offset:2px;
}

#infographic-gallery .inf-card .thumb-wrap{
  position:relative; overflow:hidden; background:#f3f4f6;
}

#infographic-gallery .inf-card .ratio{ height:260px; }
@media (min-width:768px){  #infographic-gallery .inf-card .ratio{ height:300px; } }
@media (min-width:1200px){ #infographic-gallery .inf-card .ratio{ height:340px; } }

#infographic-gallery .inf-card .thumb-img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .35s ease, filter .25s ease;
}
#infographic-gallery .inf-card:hover .thumb-img{
  transform: scale(1.035);      
  filter: saturate(1.04);
}

#infographic-gallery .inf-card .thumb-img.is-fallback{
  object-fit:contain; padding:12px; background:#fff;
}

#infographic-gallery .inf-card .thumb-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:.5rem; color:#fff; font-weight:700; letter-spacing:.2px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.42) 70%);
  opacity:0; transition:opacity .2s ease;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
#infographic-gallery .inf-card:hover .thumb-overlay{ opacity:1; }
#infographic-gallery .inf-card .thumb-overlay i{ font-size:1.1rem; }

#infographic-gallery .inf-caption {
  display: flex;
  align-items: flex-start;
  gap: .25rem;
  padding: .55rem .7rem .65rem;
  border-top: 1px solid #eef2f6;
  font-weight: 600;
  color: #0f766e;
  min-height: 46px;
  font-size: 0.82rem;
  line-height: 1.25;
}

#infographic-gallery .inf-caption .text-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-break: break-word;
}

.overlay-inner {
  color:#fff; width:100%; padding:.65rem .9rem;
  display:flex; align-items:center; gap:.5rem; font-weight:600;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; line-clamp: 1; -webkit-box-orient:vertical; overflow:hidden; }
.object-fit-cover { object-fit: cover; }
.object-fit-contain { object-fit: contain; }

:root{
  --acc-primary:#198754;
  --acc-teal:#0f766e;
  --acc-ink:#344054;
  --acc-muted:#667085;
  --acc-border:#d0d5dd;
  --acc-soft:#f3f4f6;
}

#photos-gallery .btn-outline-success,
#videos-gallery .btn-outline-success,
#infographic-gallery .btn-outline-success,
#photos-gallery select.btn-outline-success,
#videos-gallery select.btn-outline-success,
#infographic-gallery select.btn-outline-success{
  border-color:var(--acc-border);
  color:var(--acc-ink);
  background:#fff;
}
#photos-gallery .btn-outline-success:hover,
#videos-gallery .btn-outline-success:hover,
#infographic-gallery .btn-outline-success:hover,
#photos-gallery select.btn-outline-success:hover,
#videos-gallery select.btn-outline-success:hover,
#infographic-gallery select.btn-outline-success:hover{
  background:var(--acc-soft);
  color:#111827;
  border-color:#cbd5e1;
}
#photos-gallery .btn-outline-success.active,
#videos-gallery .btn-outline-success.active,
#photos-gallery .btn-outline-success.active,
#infographic-gallery .btn-outline-success:active,
#videos-gallery .btn-outline-success:active,
#infographic-gallery .btn-outline-success:active{
  background-color:var(--acc-primary);
  border-color:var(--acc-primary);
  color:#fff;
}

#photos-gallery select.btn-outline-success.is-active,
#videos-gallery select.btn-outline-success.is-active,
#infographic-gallery select.btn-outline-success.is-active{
  background:#e8f5ee;
  border-color:#9ad7b7;
  color:#0f5132;
}

#photos-gallery .filter-select-wrap i,
#infographic-gallery .filter-select-wrap i,
#videos-gallery .filter-select-wrap i{ color:#98a2b3; }
#photos-gallery .filter-select-wrap select.is-active + i,
#infographic-gallery .filter-select-wrap select.is-active + i,
#videos-gallery .filter-select-wrap select.is-active + i{ color:var(--acc-primary); }

#photos-gallery .btn:focus-visible,
#videos-gallery .btn:focus-visible,
#infographic-gallery .btn:focus-visible,
#photos-gallery select:focus,
#videos-gallery select:focus,
#infographic-gallery select:focus,
#photos-gallery .card:focus-within,
#infographic-gallery .card:focus-within,
#videos-gallery .card:focus-within{
  outline:2px solid rgba(25,135,84,.25);
  outline-offset:2px;
  box-shadow:none;
}

#photos-gallery .filter-select-wrap{ position:relative; }
#photos-gallery select.btn-outline-success.is-active + i{ color:var(--acc-primary); }

#photos-gallery .text-success{ color:var(--acc-teal)!important; }
#photos-gallery .badge,
#photos-gallery .text-bg-success-subtle{
  background:#eef6ff;
  border:1px solid #dbeafe;
  color:#1e3a8a;
}

#photos-gallery .gallery-card{ border:1px solid #eef2f6; }
#photos-gallery .gallery-card:hover{ box-shadow:0 8px 24px rgba(15,23,42,.08); }

#photos-gallery .small.text-secondary{ color:var(--acc-muted)!important; }
#photos-gallery .small.text-muted{ color:#98a2b3!important; }

#infographic-gallery .filter-select-wrap{ position:relative; }
#infographic-gallery select.btn-outline-success.is-active + i{ color:var(--acc-primary); }

#infographic-gallery .text-success{ color:var(--acc-teal)!important; }
#infographic-gallery .badge,
#infographic-gallery .text-bg-success-subtle{
  background:#eef6ff;
  border:1px solid #dbeafe;
  color:#1e3a8a;
}

#infographic-gallery .gallery-card{ border:1px solid #eef2f6; }
#infographic-gallery .gallery-card:hover{ box-shadow:0 8px 24px rgba(15,23,42,.08); }

#infographic-gallery .small.text-secondary{ color:var(--acc-muted)!important; }
#infographic-gallery .small.text-muted{ color:#98a2b3!important; }

.play-btn{
  width:64px; height:64px; border-radius:999px;
  background:#ffffffdd; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.play-btn i{ font-size:1.5rem; color:#198754; margin-left:.15rem; }

.badge.text-black{ color:#000!important; }

.video-card { border-radius: 1rem; position: relative; overflow: hidden; }
.video-card img { transition: transform .35s ease; }
.video-card:hover img { transform: scale(1.04); }

.video-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.45) 70%);
  opacity:0; transition: opacity .25s ease; pointer-events: none;
}
.video-card:hover .video-overlay { opacity:1; }

.play-btn {
  width:64px; height:64px; border-radius:999px; background:#ffffffdd; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.play-btn i { font-size: 1.5rem; color:#198754; margin-left: .15rem; }

#docs-gallery .btn-outline-success,
#docs-gallery select.btn-outline-success {
  border-color: var(--acc-border);
  color: var(--acc-ink);
  background: #fff;
}
#docs-gallery .btn-outline-success:hover,
#docs-gallery select.btn-outline-success:hover {
  background: var(--acc-soft);
  color: #111827;
  border-color: #cbd5e1;
}
#docs-gallery select.btn-outline-success.is-active {
  background: #e8f5ee;
  border-color: #9ad7b7;
  color: #0f5132;
}
#docs-gallery .filter-select-wrap i { color:#98a2b3; }
#docs-gallery .filter-select-wrap select.is-active + i { color:var(--acc-primary); }

.media-modal .modal-dialog{
  max-width: min(1200px, 96vw);
}
.media-modal .modal-content{
  height: min(92vh, 980px);        
  display: flex; flex-direction: column;
  border-radius: .75rem;
}
.media-modal .modal-header,
.media-modal .modal-footer{
  background: #fff;
}

.media-viewport{
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bs-secondary-bg, #f1f3f5);
  border-radius: .5rem; margin: .75rem .75rem 0 .75rem;
  overflow: hidden;
}
.media-viewport > img,
.media-viewport > video{
  width: 100%; height: 100%; object-fit: contain;
}
.media-viewport > iframe{
  width: 100%; height: 100%; border: 0; display: block;
}

.media-info{
  padding: .75rem .75rem 1rem .75rem;
}
.media-info .meta{
  max-width: min(900px, 100%);
}

.media-modal .btn:focus-visible{
  outline: 2px solid rgba(25,135,84,.25);
  outline-offset: 2px; box-shadow: none;
}
.media-modal .btn-outline-secondary:hover{
  background: var(--acc-soft, #f3f4f6);
  color:#111827; border-color:#cbd5e1;
}

.back-to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(25,135,84,.95);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 1080;
}
.back-to-top:hover{ filter: brightness(1.05); }
.back-to-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.map-wrap iframe{ width:100%; height:100%; display:block; }

#mapId { width:100%; height:520px; border-radius:.75rem; }
.apexcharts-canvas { border-radius:.75rem; }

.apex-mini-tip{
  position:absolute; z-index:20; min-width:160px;
  background:#fff; border-radius:12px; padding:10px 12px;
  box-shadow:0 10px 25px rgba(0,0,0,.12); pointer-events:none;
  transform:translate(-50%,-50%);
}
.apex-mini-tip .t1{ font-weight:600; margin-bottom:2px; }
.apex-mini-tip .t2{ color:#333; }

.apexcharts-legend .apexcharts-inactive-legend .apexcharts-legend-text {
  text-decoration: line-through;
  opacity: .55;
}

.highcharts-legend-item-hidden text { text-decoration: line-through; opacity: .6; }

#donutChart { position: relative; }
.donut-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  text-align:center; pointer-events:none;
}
.donut-center .big{ font-weight:700; font-size:1.4rem; line-height:1; }
.donut-center .muted{ color:#9aa0a6; font-size:.85rem; }
.apex-mini-tip{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px;
  padding:8px 10px; box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.apex-mini-tip .t1{ font-weight:600; margin-bottom:2px; }
.apex-mini-tip .t2{ font-size:.9rem; }

  .col-5-custom {
    flex: 0 0 20%;
    max-width: 20%;
  }

  @media (max-width: 992px) {
    .col-5-custom {
      flex: 0 0 33.33%;
      max-width: 33.33%;
    }
  }

  @media (max-width: 768px) {
    .col-5-custom {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }

  @media (max-width: 576px) {
    .col-5-custom {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }

.form-floating > label { color:#6c757d; }
.sbp-map { width:100%; height:260px; border-radius:10px; background:#fff; }
.sbp-map-wrap { position:relative; overflow:hidden; }

.sbp-map-title{
  position:absolute; left:12px; bottom:10px; z-index:600;
  background: rgba(255,255,255,.6);
  color:#0f5132; font-weight:600; font-size:.95rem;
  padding:6px 10px; border-radius:6px; backdrop-filter: blur(4px);
}
.leaflet-tooltip.map-label {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.map-label span {
  font-size: 0.5rem !important; /* kecilkan tulisan */
  font-weight: 600 !important;
  color: #004d40 !important; /* warna teks hijau tua */
  text-shadow: 0 0 3px #fff, 0 0 6px rgba(255,255,255,0.7) !important; /* biar tetap terbaca di warna peta */
  pointer-events: none !important;
}
.map-label-div {
  color: #004d40;
  font-size: 0.5rem;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 0 3px #fff, 0 0 6px rgba(255,255,255,0.7);
  pointer-events: none !important;
  white-space: nowrap;
}

.sbp-map-legend{
  position:absolute; right:12px; top:12px; z-index:600;
  background: rgba(255,255,255,.5); border:1px solid rgba(0,0,0,.1);
  border-radius:.5rem; padding:.5rem .75rem; font-size:.82rem;
  box-shadow:0 6px 18px rgba(0,0,0,.08); backdrop-filter: blur(6px);
}
.sbp-map-legend .swatch{
  display:inline-block; width:14px; height:14px; border:1px solid rgba(0,0,0,.15);
  margin-right:6px; border-radius:3px; vertical-align:-2px;
}
.swatch-green{ background:#3cb371; }
.swatch-yellow{ background:#ffeb3b; }
.swatch-orange{ background:#ffa726; }
.swatch-white{ background:#ffffff; }

@media (min-width: 992px){
  .row.g-3 > .col-12 .sbp-map { height:280px; }
  .row.g-3 > [class*="col-lg-6"] .sbp-map { height:260px; }
}
@media (max-width: 991.98px){
  .sbp-map { height:240px; }
}

.sbp-map-legend--sm{
  position:absolute; right:12px; top:12px; z-index:600;
  background: rgba(255,255,255,.5); border:1px solid rgba(0,0,0,.1);
  border-radius:.5rem; padding:.5rem .75rem; font-size:.60rem;
  box-shadow:0 6px 18px rgba(0,0,0,.08); backdrop-filter: blur(6px);
}
.sbp-map-legend--sm .swatch{
    display:inline-block; width:10px; height:10px; border:1px solid rgba(0,0,0,.15);
  margin-right:6px; border-radius:3px; vertical-align:-2px;
}
@media (max-width: 768px) {
  .sbp-map {
    height: 340px !important;
  }

  .sbp-map-title {
    top: 8px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 0.65rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 6px 10px;
    border-radius: 6px;
    color: #0f5132;
    font-weight: 550;
    backdrop-filter: blur(4px);
  }

  .sbp-map-legend {
    top: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.9);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    text-align: left;
    width: 90%;
    max-width: 320px;
  }

  .sbp-map-legend .swatch {
    width: 12px;
    height: 12px;
    margin-right: 5px;
  }

  .sbp-map-legend--sm {
    top: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.9);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    text-align: left;
    width: 90%;
    max-width: 320px;
  }

  .sbp-map-legend--sm .swatch {
    width: 12px;
    height: 12px;
    margin-right: 5px;
  }
}

.leaflet-popup-content-wrapper { padding: 6px 8px; }
.leaflet-popup-content { margin: 6px 8px; }

.sbp-popup .title{
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.5;
  margin-bottom: 0px;  
}

.sbp-popup hr{
  margin: 2px 0 6px;
  border: 0;
  border-top: 1px solid #e1e5ea;
}

.sbp-popup div{
  font-size: 0.62rem;
  line-height: 1.5;
}

@media (max-width: 768px){
  .leaflet-popup-content-wrapper { padding: 6px 8px; border-radius: 8px; }
  .leaflet-popup-content { margin: 6px 8px; font-size: 12px; line-height: 1.25; }
  .sbp-popup .title{ font-size: 13px; margin-bottom: 2px; }
  .sbp-popup hr{ margin: 4px 0 6px; }
}

.leaflet-control-reset {
  display:block;
  width:32px; height:32px;
  line-height:28px; text-align:center;
  background:#fff; color:#333;
  border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  margin-top:4px;
  cursor:pointer;
  font-size:20px; 
  user-select:none;
}
.leaflet-control-reset:hover{ background:#f2f2f2; }

.donut-center .tiny{
  font-size: .62rem;
  line-height: 2.1;
}