*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0
}

html {
 scroll-behavior: smooth;
 -webkit-text-size-adjust: 100%;
 text-size-adjust: 100%;
}


body {
 font-family: 'Plus Jakarta Sans', sans-serif;
 background-color: #f7f9fc;
 color: #161d1a;
 overflow-x: hidden;
 position: relative;
}

body>* {
 position: relative;
 z-index: 1;
}


img {
 display: block;
 max-width: 100%
}

a {
 text-decoration: none
}


:root {
 --green: #00880b;
 --green-dark: #006c06;
 --green-light: #eef5f0;
 --gold: #805600;
 --amber: #f97316;
 --dark: #161d1a;
 --gray: #6b7280;
 --white: #fff;
 --radius-lg: 24px;
 --radius-xl: 32px;
 --shadow-sm: 0 4px 16px rgba(22, 29, 26, .06);
 --shadow-md: 0 8px 32px rgba(22, 29, 26, .08);
 --shadow-lg: 0 20px 60px rgba(22, 29, 26, .10);
}


@keyframes fadeUp {
 from {
 opacity: 0;
 transform: translateY(28px)
 }

 to {
 opacity: 1;
 transform: translateY(0)
 }
}

@keyframes slideDown {
 from {
 opacity: 0;
 transform: translateY(-8px)
 }

 to {
 opacity: 1;
 transform: translateY(0)
 }
}

@keyframes float {

 0%,
 100% {
 transform: translateY(0) rotate(.3deg)
 }

 50% {
 transform: translateY(-14px) rotate(-.3deg)
 }
}

@keyframes blink {

 0%,
 100% {
 opacity: 1
 }

 50% {
 opacity: 0
 }
}

@keyframes shimmer {
 0% {
 background-position: -200% center
 }

 100% {
 background-position: 200% center
 }
}

@keyframes dcFloat {

 0%,
 100% {
 transform: translateY(0) rotate(0)
 }

 50% {
 transform: translateY(-20px) rotate(4deg)
 }
}

@keyframes waFloat {

 0%,
 100% {
 transform: translateY(0)
 }

 50% {
 transform: translateY(-6px)
 }
}

@keyframes revealUp {
 from {
 opacity: 0;
 transform: translateY(36px) scale(.97)
 }

 to {
 opacity: 1;
 transform: translateY(0) scale(1)
 }
}

@keyframes revealLeft {
 from {
 opacity: 0;
 transform: translateX(-36px)
 }

 to {
 opacity: 1;
 transform: translateX(0)
 }
}

@keyframes revealRight {
 from {
 opacity: 0;
 transform: translateX(36px)
 }

 to {
 opacity: 1;
 transform: translateX(0)
 }
}

@keyframes revealPop {
 from {
 opacity: 0;
 transform: scale(.90)
 }

 to {
 opacity: 1;
 transform: scale(1)
 }
}

@keyframes btnShine {
 0% {
 left: -80%;
 opacity: 0
 }

 20% {
 opacity: 1
 }

 80% {
 opacity: .8
 }

 100% {
 left: 130%;
 opacity: 0
 }
}


.reveal,
.reveal-l,
.reveal-r,
.reveal-pop {
 opacity: 0;
 transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1), filter .9s
}

.reveal {
 transform: translateY(36px) scale(.98);
 filter: blur(4px)
}

.reveal-l {
 transform: translateX(-36px);
 filter: blur(3px)
}

.reveal-r {
 transform: translateX(36px);
 filter: blur(3px)
}

.reveal-pop {
 transform: scale(.92);
 filter: blur(3px)
}

.reveal-active {
 opacity: 1 !important;
 transform: translate(0) scale(1) !important;
 filter: blur(0) !important
}


#site-header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 9999;
 
 background: transparent;
 transition: background .4s ease, box-shadow .4s ease;
}

#site-header.scrolled {
 background: rgba(255, 255, 255, 0.96);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 box-shadow: 0 4px 32px rgba(0, 136, 11, .08);
}


#topbar {
 position: relative;
 z-index: 100; 
 background-color: transparent; 
 border-bottom: 1px solid transparent; 
 color: #4b5563;
 height: 32px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 12.5px;
 font-weight: 500;
 transition: background .4s ease, border-color .4s ease, height .4s ease, opacity .3s ease;
}


#site-header.scrolled #topbar {
 height: 0;
 overflow: hidden;
 opacity: 0;
 border-bottom-color: transparent;
}

#topbar-inner {
 display: flex;
 align-items: center;
 gap: 20px;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 32px;
 width: 100%;
 justify-content: flex-end;
}

.tb-link {
 display: flex;
 align-items: center;
 gap: 6px;
 color: #4b5563;
 font-size: 10.5px;
 font-weight: 500;
 text-decoration: none;
 padding: 4px 10px;
 border-radius: 6px;
 transition: all .2s;
 white-space: nowrap;
}

.tb-link:hover {
 color: var(--green);
}

.tb-link svg {
 width: 14px;
 height: 14px;
 flex-shrink: 0;
}

.tb-divider {
 width: 1px;
 height: 14px;
 background: #e5e7eb;
 opacity: 0;
}


.tb-dropdown {
 position: relative;
 display: flex;
 align-items: center;
}

.tb-dropdown .tb-mega-menu.open {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}

.tb-mega-menu {
 position: fixed;
 top: 32px; 
 right: 120px;
 width: 500px;
 background: #ffffff;
 border-radius: 12px;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 136, 11, 0.08);
 opacity: 0;
 visibility: hidden;
 transform: translateY(10px);
 transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 z-index: 99999;
 overflow: hidden;
 border: 1px solid rgba(0, 136, 11, 0.12);
}

.tb-mega-header {
 background: linear-gradient(135deg, var(--green-dark), var(--green));
 color: #fff;
 padding: 16px 20px;
 font-size: 16px;
 font-weight: 700;
 text-align: center;
 position: relative;
}

.tb-mega-header-triangle {
 position: absolute;
 top: -6px;
 right: 100px;
 width: 12px;
 height: 12px;
 background: var(--green-dark);
 transform: rotate(45deg);
}

.tb-mega-body {
 padding: 24px;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 24px;
 background: #fff;
}

.tb-contact-title {
 font-size: 11px;
 font-weight: 800;
 color: #374151;
 display: block;
 margin-bottom: 4px;
}

.tb-contact-desc {
 font-size: 10px;
 color: #9ca3af;
 margin-bottom: 8px;
 line-height: 1.4;
}

.tb-contact-link,
.tb-contact-num {
 font-size: 12.5px;
 color: var(--dark);
 font-weight: 600;
 text-decoration: none;
 display: block;
 margin-bottom: 8px;
}

.tb-contact-link:hover {
 color: var(--green);
}

.tb-contact-btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 background: #25D366; 
 color: #fff !important;
 font-size: 11px;
 font-weight: 700;
 padding: 6px 12px;
 border-radius: 4px;
 text-decoration: none;
 transition: background 0.2s;
}

.tb-contact-btn svg {
 width: 14px;
 height: 14px;
}

.tb-contact-btn:hover {
 background: #1da851;
}


#navbar {
 position: relative;
 top: auto;
 left: 0;
 width: 100%;
 max-width: 100%;
 transform: none;
 border-radius: 0;
 z-index: 1; 
 transition: box-shadow .3s ease;
 background-color: transparent;
 border: none;
}



#navbar-inner {
 padding: 0 32px;
 display: flex;
 align-items: center;
 gap: 40px;
 transition: height .35s ease;
 height: 76px;
 max-width: 1200px;
 margin: 0 auto;
 width: 100%;
 position: relative;
}

#navbar.scrolled #navbar-inner {
 height: 75px
}

.nav-brand {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-shrink: 0
}

.nav-brand img {
 width: 65px;
 height: 65px;
 object-fit: contain
}

.nav-brand-text p {
 font-weight: 900;
 font-size: 21px;
 line-height: 1.1;
 letter-spacing: -.02em;
 background: linear-gradient(120deg, #14532d, #00880b, #a16207, #005c00, #00880b);
 background-size: 250% auto;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 animation: shimmer 5s linear infinite;
}

.nav-brand-text small {
 display: block;
 font-size: 13.5px;
 font-weight: 600;
 letter-spacing: .04em;
 color: #6b7280;
}

.nav-links {
 display: flex;
 align-items: center;
 gap: 1px;
 margin-left: auto;
}

.nav-link {
 padding: 7px 11px;
 border-radius: 9px;
 font-size: 14.5px;
 font-weight: 600;
 color: #374151;
 transition: all .2s;
 white-space: nowrap;
}

.nav-link:hover {
 color: var(--green);
}

.nav-link.active {
 color: var(--green);
 font-weight: 700;
}


.nav-dropdown {
 position: relative;
}

.dropdown-toggle {
 display: inline-flex;
 align-items: center;
 gap: 6px;
}

.dropdown-toggle::after {
 content: '';
 display: inline-block;
 width: 6px;
 height: 6px;
 border-right: 2px solid currentColor;
 border-bottom: 2px solid currentColor;
 transform: rotate(45deg) translateY(-3px);
 transition: transform .2s;
}

.nav-dropdown:hover .dropdown-toggle::after {
 transform: rotate(-135deg) translateY(-2px);
}

.mega-menu {
 position: absolute;
 top: 100%;
 right: -50%;
 width: 520px;
 background: rgba(255, 255, 255, 0.97);
 backdrop-filter: blur(24px);
 -webkit-backdrop-filter: blur(24px);
 border-radius: 20px;
 box-shadow: 0 24px 50px rgba(0, 136, 11, 0.08), 0 4px 16px rgba(0,0,0,0.03);
 padding: 32px;
 margin-top: 24px;
 opacity: 0;
 visibility: hidden;
 transform: translateY(15px) scale(0.98);
 transition: all .35s cubic-bezier(0.16, 1, 0.3, 1);
 border: 1px solid rgba(0, 136, 11, 0.08);
}

.mega-menu.menu-ekosistem {
 right: -30px;
 left: auto;
 transform: translateY(15px) scale(0.98);
 transform-origin: top right;
 width: 900px;
}

.nav-dropdown:hover .mega-menu {
 opacity: 1;
 visibility: visible;
 transform: translateY(0) scale(1);
 margin-top: 14px;
}

.nav-dropdown:hover .mega-menu.menu-ekosistem {
 transform: translateY(0) scale(1);
}

.mega-cols {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 32px;
 position: relative;
 z-index: 2;
}

.mega-col h4 {
 font-size: 11px;
 text-transform: uppercase;
 letter-spacing: .1em;
 color: var(--green);
 opacity: 0.85;
 margin-top: 0;
 margin-bottom: 16px;
 font-weight: 800;
 padding-bottom: 12px;
 border-bottom: 1px dashed rgba(0, 136, 11, 0.15);
}

.mega-link {
 display: flex;
 align-items: flex-start;
 gap: 14px;
 text-decoration: none;
 padding: 10px 12px;
 margin-left: -12px;
 margin-bottom: 4px;
 border-radius: 12px;
 transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
 border: 1px solid transparent;
}

.mega-link:hover {
 background: linear-gradient(135deg, rgba(240, 253, 244, 0.8), rgba(255, 255, 255, 1));
 transform: translateY(-2px);
 box-shadow: 0 8px 20px rgba(0, 136, 11, 0.06);
 border-color: rgba(0, 136, 11, 0.1);
}

.m-icon {
 font-size: 20px;
 flex-shrink: 0;
 width: 38px;
 height: 38px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, rgba(0, 136, 11, 0.08), rgba(0, 136, 11, 0.02));
 border-radius: 10px;
 color: var(--green);
 transition: transform .3s, background .3s, box-shadow .3s;
}

.mega-link:hover .m-icon {
 transform: scale(1.08) rotate(2deg);
 background: linear-gradient(135deg, var(--green), var(--green-dark));
 color: #fff;
 box-shadow: 0 4px 12px rgba(0, 136, 11, 0.25);
}

.m-text {
 padding-top: 2px;
 flex: 1;
}

.m-text strong {
 display: block;
 font-size: 13.5px;
 color: #111827;
 font-weight: 800;
 margin-bottom: 5px;
 transition: color .2s;
 line-height: 1.25;
}

.mega-link:hover .m-text strong {
 color: var(--green);
}

.m-text p {
 font-size: 11px;
 color: #6b7280;
 line-height: 1.5;
 margin: 0;
}


.wpu-col {
 display: flex;
 flex-direction: column;
}

.wpu-link {
 font-size: 13px;
 color: #4b5563;
 text-decoration: none;
 font-weight: 500;
 transition: color 0.2s;
 display: flex;
 align-items: center;
 gap: 8px;
}

.wpu-link:hover {
 color: var(--green);
}

.wpu-text {
 font-size: 13px;
 color: #9ca3af;
 font-weight: 500;
 display: flex;
 align-items: center;
 gap: 8px;
 cursor: default;
}

.badge-hadir {
 font-size: 9px;
 font-weight: 800;
 background: #f3f4f6;
 color: #6b7280;
 padding: 2px 8px;
 border-radius: 12px;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 border: 1px solid #e5e7eb;
}

.nav-btn {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 padding: 6px 6px 6px 18px;
 border-radius: 30px;
 font-size: 13px;
 font-weight: 800;
 background: var(--amber);
 color: var(--dark);
 transition: all .3s ease;
 white-space: nowrap;
 text-decoration: none;
}

.nav-btn:hover {
 background: #fb923c;
 transform: translateY(-2px);
 box-shadow: 0 8px 16px rgba(249, 115, 22, .3);
}

.nav-btn-icon {
 width: 26px;
 height: 26px;
 background: #fff;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}

.nav-btn-icon svg {
 width: 14px;
 height: 14px;
 stroke: var(--dark);
 transition: transform .3s ease;
}

.nav-btn:hover .nav-btn-icon svg {
 transform: translate(2px, -2px);
}

#burger {
 display: none;
 background: none;
 border: none;
 cursor: pointer;
 color: var(--green);
 padding: 8px;
 border-radius: 10px;
 margin-left: auto;
 transition: background .2s ease;
}

#burger:hover {
 background: rgba(0, 136, 11, .08);
}

#burger svg {
 width: 28px;
 height: 28px;
 stroke: currentColor;
 stroke-width: 2.2;
 stroke-linecap: round;
 fill: none
}

#mobile-menu {
 display: none;
 background: #fff;
 border-top: 1px solid #e5e7eb;
 padding: 16px 24px 20px;
}

#mobile-menu a {
 display: block;
 padding: 12px 0;
 color: #374151;
 font-size: 14px;
 font-weight: 600;
 border-bottom: 1px solid #f0f4f2;
 transition: color .2s;
}

#mobile-menu a:last-child {
 border-bottom: none
}

#mobile-menu a:hover {
 color: var(--green)
}

#mobile-menu .mob-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 margin-top: 14px;
 padding: 13px;
 border-radius: 10px;
 background: linear-gradient(135deg, var(--green-dark), var(--green));
 color: #fff;
 font-size: 14px;
 font-weight: 800;
 border-bottom: none;
}


#hero {
 margin-top: 0;
 padding-top: 130px; 
 padding-bottom: 100px;
 padding-left: 24px;
 padding-right: 24px;
 min-height: 100vh;
 display: flex;
 align-items: center;
 position: relative;
 overflow: hidden;
 
 background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 40%, #f4fbf6 100%);
}

.hero-mesh {
 position: absolute;
 inset: 0;
 background:
 radial-gradient(at 0% 0%, rgba(0, 136, 11, .03) 0%, transparent 50%),
 radial-gradient(at 100% 0%, rgba(0, 136, 11, .03) 0%, transparent 50%),
 radial-gradient(at 50% 100%, rgba(0, 136, 11, .05) 0%, transparent 55%);
}

.hero-leaf {
 display: none;
}

.hero-grid {
 position: absolute;
 inset: 0;
 pointer-events: none;
 background-image:
 repeating-radial-gradient(circle at 0% 0%, transparent 0, transparent 36px, rgba(0, 136, 11, .05) 36px, rgba(0, 136, 11, .05) 37.5px);
 -webkit-mask-image: radial-gradient(circle at 0% 0%, black 10%, transparent 65%);
 mask-image: radial-gradient(circle at 0% 0%, black 10%, transparent 65%);
}

.deco {
 position: absolute;
 pointer-events: none;
 border-radius: 50%;
 border: 1px solid rgba(0, 136, 11, .08)
}

.deco1 {
 width: 460px;
 height: 460px;
 top: -12%;
 right: -8%;
 animation: dcFloat 16s ease-in-out infinite
}

.deco2 {
 width: 280px;
 height: 280px;
 bottom: -6%;
 left: -6%;
 animation: dcFloat 20s ease-in-out infinite reverse
}

.hero-inner {
 max-width: 1100px;
 margin: 0 auto;
 width: 100%;
 position: relative;
 z-index: 2
}

.hero-grid-cols {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 40px;
 align-items: center
}

.hero-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 7px 16px;
 background: #f0fdf4;
 border: 1px solid rgba(0, 136, 11, .2);
 border-radius: 30px;
 margin-bottom: 22px;
}

.hero-badge-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--green);
 box-shadow: 0 0 8px rgba(0, 136, 11, .5)
}

.hero-badge span {
 font-size: 11px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .12em;
 color: var(--green);
}

h1.hero-title {
 font-size: clamp(2rem, 7vw, 3.8rem);
 font-weight: 900;
 line-height: 1;
 letter-spacing: -.04em;
 margin-top: 0;
 margin-bottom: 18px
}

h1.hero-title .small-label {
 font-size: .4em;
 display: block;
 color: var(--green);
 margin-bottom: 10px;
 font-weight: 800;
 letter-spacing: .14em;
 text-transform: uppercase
}

h1.hero-title .pon,
.hero-title .pes {
 background: linear-gradient(120deg, #14532d 0%, #00880b 35%, #a16207 65%, #14532d 100%);
 background-size: 280% auto;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 animation: shimmer 4s linear infinite;
}

h1.hero-title .loc {
 color: #6b7280;
 font-size: .48em;
 font-weight: 700;
 margin-top: 10px;
 display: block
}

.hero-typed {
 font-size: clamp(1rem, 1.2vw, 1.15rem);
 color: #4b5563;
 line-height: 1.7;
 margin-bottom: 36px;
 font-weight: 500;
 min-height: 56px;
 max-width: 480px
}

.cursor {
 display: inline-block;
 width: 2.5px;
 height: 1em;
 background: var(--green);
 margin-left: 3px;
 vertical-align: middle;
 animation: blink 1s infinite;
}

.hero-btns {
 display: flex;
 flex-wrap: wrap;
 gap: 12px
}

.btn-primary {
 padding: 11px 11px 11px 24px;
 background: var(--amber);
 color: var(--dark);
 border: none;
 border-radius: 30px;
 font-size: 14px;
 font-weight: 900;
 display: inline-flex;
 align-items: center;
 gap: 12px;
 transition: all .3s cubic-bezier(.16, 1, .3, 1);
 position: relative;
 overflow: hidden;
 text-decoration: none;
}

.btn-primary::after {
 content: '';
 position: absolute;
 top: 0;
 left: -80%;
 width: 55%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
 animation: btnShine 2.5s linear infinite;
 pointer-events: none;
}

.btn-primary:hover {
 background: #fcd34d;
 box-shadow: 0 15px 35px rgba(245, 158, 11, .3);
 transform: translateY(-3px)
}

.btn-primary-icon {
 width: 30px;
 height: 30px;
 background: #fff;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}

.btn-primary-icon svg {
 width: 15px;
 height: 15px;
 stroke: var(--dark);
 transition: transform .3s ease;
}

.btn-primary:hover .btn-primary-icon svg {
 transform: translate(2px, -2px);
}

.btn-secondary {
 padding: 14px 30px;
 background: rgba(255, 255, 255, 0.8);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 color: var(--dark);
 border-radius: 30px;
 font-size: 14px;
 font-weight: 800;
 border: 2px solid rgba(22, 29, 26, .1);
 display: inline-flex;
 align-items: center;
 gap: 8px;
 transition: all .3s cubic-bezier(.16, 1, .3, 1);
 text-decoration: none;
 min-height: 52px;
}

.btn-secondary:hover {
 background: #fff;
 border-color: var(--amber);
 color: var(--amber);
 box-shadow: 0 15px 35px rgba(245, 158, 11, .3);
 transform: translateY(-3px)
}

.hero-img-wrap {
 position: relative;
 height: 520px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.hero-img-box {
 width: 100%;
 height: 100%;
 max-width: 480px;
 position: relative;
}

.hero-img-box img {
 width: 100%;
 height: 100%;
 object-fit: contain;
}


section {
 padding: 60px 24px
}

.section-inner {
 max-width: 1100px;
 margin: 0 auto
}

.section-label {
 font-size: 11px;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: .14em;
 color: var(--green);
 margin-bottom: 8px
}

.section-title {
 font-size: clamp(1.5rem, 2.5vw, 2rem);
 font-weight: 900;
 letter-spacing: -.03em;
 line-height: 1.2;
 margin-bottom: 12px;
 background: linear-gradient(120deg, #14532d, #00880b, #854d0e, #a16207, #16a34a, #006c06);
 background-size: 250% auto;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 animation: shimmer 5s linear infinite;
}

.section-sub {
 font-size: 14px;
 color: var(--gray);
 line-height: 1.8;
 max-width: 580px
}

.section-head {
 text-align: center;
 margin-bottom: 36px
}

.section-head .section-sub {
 margin: 0 auto
}

.divider-line {
 width: 36px;
 height: 3px;
 background: var(--gold);
 border-radius: 2px;
 margin: 12px auto 0
}


.glass-card {
 background: rgba(255, 255, 255, .85);
 backdrop-filter: blur(12px);
 border: 1px solid rgba(0, 136, 11, .08);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-sm);
}


#profil {
 background: #fff;
 position: relative;
 margin: -50px 20px 40px;
 border-radius: 40px;
 box-shadow: var(--shadow-lg);
 z-index: 10;
 padding: 60px 40px;
}

.profil-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 40px;
 align-items: start
}

.profil-video {
 border-radius: 20px;
 overflow: hidden;
 background: #000;
 aspect-ratio: 16/9;
}

.profil-video iframe {
 width: 100%;
 height: 100%;
 border: none
}


.profil-accordion {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.accordion-item {
 border: 1px solid rgba(0, 136, 11, .1);
 border-radius: 16px;
 overflow: hidden;
 transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
 background: rgba(255, 255, 255, 0.6);
}

.accordion-item[open] {
 background: #fff;
 box-shadow: 0 10px 40px rgba(0, 136, 11, .06);
 border-color: rgba(0, 136, 11, .2);
}

.accordion-header {
 padding: 16px 20px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 cursor: pointer;
 font-weight: 800;
 font-size: 15px;
 color: var(--dark);
 user-select: none;
 list-style: none;
}

.accordion-header::-webkit-details-marker {
 display: none;
}

.accordion-icon {
 display: flex;
 align-items: center;
 gap: 14px;
}

.a-icon-wrap {
 width: 36px;
 height: 36px;
 border-radius: 10px;
 background: rgba(0, 136, 11, .07);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--green);
}

.a-chevron {
 transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
 color: #9ca3af;
}

.accordion-item[open] .a-chevron {
 transform: rotate(180deg);
 color: var(--green);
}

.accordion-content {
 padding: 0 20px 20px 70px;
 font-size: 14.5px;
 line-height: 1.7;
 color: #374151;
 animation: sweepDown .3s ease-out;
}

@keyframes sweepDown {
 0% {
 opacity: 0;
 transform: translateY(-5px);
 }

 100% {
 opacity: 1;
 transform: translateY(0);
 }
}

.accordion-content ol {
 margin: 0;
 padding-left: 18px;
}

.accordion-content li {
 margin-bottom: 8px;
}

.accordion-content p {
 margin: 0 0 8px 0;
}

.accordion-content p:last-child {
 margin-bottom: 0;
}

.accordion-content strong {
 display: block;
 color: var(--green);
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 margin-bottom: 4px;
}

.accordion-content strong:not(:first-child) {
 margin-top: 12px;
}


#pengurus {
 position: relative;
 background: linear-gradient(135deg, #022c16 0%, #005c00 100%);
 padding-top: 80px;
 padding-bottom: 80px;
 overflow: hidden;
}

#pengurus .section-inner {
 position: relative;
 z-index: 1;
}

#pengurus .section-label {
 color: #ffffff;
 opacity: 0.9;
 font-size: 11px;
}

#pengurus .section-title {
 background: linear-gradient(120deg, #fff, #a7f3d0, rgba(255, 255, 255, .8), #bbf7d0, #fff);
 background-size: 250% auto;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 animation: shimmer 5s linear infinite;
 display: inline-block;
}

#pengurus .divider-line {
 background: rgba(255, 255, 255, 0.2);
}

#pengurus .divider-line::after {
 background: var(--amber);
}

.pengurus-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
}

.pengurus-card {
 background: #fff;
 border-radius: 22px;
 padding: 30px 20px 24px;
 text-align: center;
 border: 1px solid #f3f4f6;
 transition: all .4s cubic-bezier(.16, 1, .3, 1);
 box-shadow: 0 4px 24px rgba(0, 0, 0, .03);
 position: relative;
}

.pengurus-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 24px 56px rgba(0, 0, 0, .15);
 border-color: rgba(0, 136, 11, .15);
}

.pengurus-avatar {
 width: 110px;
 height: 130px;
 border-radius: 14px;
 margin: 0 auto 20px;
 background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 26px;
 font-weight: 900;
 color: var(--green-dark);
 letter-spacing: -.02em;
 position: relative;
 overflow: hidden;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
 border: 4px solid #fff;
}

.pengurus-avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: top center;
 border-radius: 10px;
 display: block;
}

.pengurus-card:hover .pengurus-avatar {
 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
 border-color: #f0fdf4;
 transform: translateY(-3px);
 transition: all .4s cubic-bezier(.16, 1, .3, 1);
}

.pengurus-jabatan {
 display: inline-block;
 font-size: 10.5px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .14em;
 color: var(--green);
 background: rgba(0, 136, 11, .06);
 padding: 5px 14px;
 border-radius: 20px;
 margin-bottom: 14px;
}

.pengurus-nama {
 font-size: 16px;
 font-weight: 800;
 color: var(--dark);
 line-height: 1.35;
 margin-bottom: 6px;
}

.pengurus-sub {
 font-size: 12.5px;
 color: #6b7280;
 line-height: 1.5;
}

@media (max-width: 900px) {
 .pengurus-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (max-width: 520px) {
 .pengurus-grid {
 grid-template-columns: 1fr;
 gap: 20px;
 }
}


#pendidikan {
 background: #f8fafc;
}

.didik-tabs-wrap {
 display: flex;
 justify-content: center;
 margin-bottom: 24px;
}

.didik-tab-switcher {
 display: inline-flex;
 background: rgba(255,255,255,0.7);
 border: 1px solid rgba(0, 136, 11, 0.12);
 border-radius: 60px;
 padding: 5px;
 gap: 6px;
 box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
 backdrop-filter: blur(8px);
}

.didik-tab-btn {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 7px 26px;
 border-radius: 50px;
 border: 1px solid transparent;
 background: transparent;
 cursor: pointer;
 font-size: 15px;
 font-weight: 800;
 color: #6b7280;
 transition: all .3s cubic-bezier(.4, 0, .2, 1);
 white-space: nowrap;
 position: relative;
 overflow: hidden;
 letter-spacing: -0.01em;
}

.didik-tab-btn .dtb-icon {
 width: 28px;
 height: 28px;
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all .3s ease;
 background: transparent;
}

.didik-tab-btn .dtb-icon svg {
 width: 16px;
 height: 16px;
 stroke: #9ca3af;
 stroke-width: 2;
 fill: none;
 stroke-linecap: round;
 stroke-linejoin: round;
 transition: stroke .3s ease;
}

.didik-tab-btn:hover {
 color: var(--dark);
}

.didik-tab-btn.active-green {
 background: linear-gradient(120deg, rgba(0,136,11,0.08), rgba(22,163,74,0.12), rgba(0,136,11,0.06));
 background-size: 200% auto;
 animation: shimmer 4s linear infinite;
 color: var(--green-dark);
 border-color: rgba(0, 136, 11, 0.25);
 box-shadow: 0 2px 10px rgba(0, 136, 11, .12);
}

.didik-tab-btn.active-green .dtb-icon {
 background: rgba(0, 136, 11, .1);
}

.didik-tab-btn.active-green .dtb-icon svg {
 stroke: var(--green);
}

.didik-tab-btn.active-gold {
 background: linear-gradient(120deg, rgba(146,64,14,0.07), rgba(217,119,6,0.12), rgba(146,64,14,0.06));
 background-size: 200% auto;
 animation: shimmer 4s linear infinite;
 color: #92400e;
 border-color: rgba(217, 119, 6, 0.3);
 box-shadow: 0 2px 10px rgba(146, 64, 14, .1);
}

.didik-tab-btn.active-gold .dtb-icon {
 background: rgba(217, 119, 6, .1);
}

.didik-tab-btn.active-gold .dtb-icon svg {
 stroke: #d97706;
}

.didik-tab-content {
 display: none;
 animation: sweepDown .35s ease-out;
}

.didik-tab-content.active {
 display: block;
}

.didik-rows {
 display: flex;
 flex-direction: column;
 gap: 8px;
 max-width: 820px;
 margin: 0 auto;
}

.didik-row {
 background: #fff;
 border-radius: 14px;
 border: 1px solid #f3f4f6;
 display: flex;
 align-items: flex-start;
 gap: 16px;
 padding: 14px 20px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, .02);
 transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.didik-row:hover {
 transform: translateX(6px);
 border-color: rgba(0, 136, 11, .18);
 box-shadow: 0 8px 32px rgba(0, 136, 11, .07);
}

.didik-tab-content.tab-formal .didik-row:hover {
 border-color: rgba(217, 119, 6, .2);
 box-shadow: 0 8px 32px rgba(146, 64, 14, .07);
}

.didik-row-icon {
 width: 38px;
 height: 38px;
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 background: rgba(0, 136, 11, .07);
}

.didik-row-icon svg {
 width: 20px;
 height: 20px;
 stroke: var(--green);
 stroke-width: 2;
 fill: none;
 stroke-linecap: round;
 stroke-linejoin: round;
}

.tab-formal .didik-row-icon {
 background: rgba(146, 64, 14, .07);
}

.tab-formal .didik-row-icon svg {
 stroke: #92400e;
}

.didik-row-body {
 flex: 1;
}

.didik-row-body h4 {
 font-size: 15px;
 font-weight: 800;
 color: var(--dark);
 margin-bottom: 4px;
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 6px;
}

.didik-row-body p {
 font-size: 13px;
 color: #6b7280;
 line-height: 1.6;
}

.didik-sub-list {
 margin-top: 8px;
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}

.didik-sub-chip {
 font-size: 12px;
 font-weight: 700;
 padding: 4px 12px;
 border-radius: 20px;
 background: rgba(0, 136, 11, .06);
 color: var(--green);
 border: 1px solid rgba(0, 136, 11, .1);
}

.tab-formal .didik-sub-chip {
 background: rgba(146, 64, 14, .06);
 color: #92400e;
 border-color: rgba(146, 64, 14, .1);
}

.didik-badge {
 display: inline-block;
 font-size: 10px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .08em;
 padding: 2px 9px;
 border-radius: 20px;
 vertical-align: middle;
}

.badge-green {
 background: rgba(0, 136, 11, .08);
 color: var(--green);
}

.badge-gold {
 background: rgba(217, 119, 6, .1);
 color: #d97706;
}

@media (max-width: 620px) {
 .didik-tab-btn {
 padding: 10px 16px;
 font-size: 13px;
 }

 .didik-tab-btn span {
 display: none;
 }
}


#daurah {
 background: linear-gradient(160deg, #f0fdf4 0%, #f8fafc 60%, #fffbeb 100%);
 position: relative;
 padding: 50px 24px;
}

.jb-split-layout {
 display: grid;
 grid-template-columns: 4fr 5fr;
 gap: 30px;
 margin-top: 40px;
 border-radius: 24px;
 overflow: hidden;
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

@media (max-width: 992px) {
 .jb-split-layout {
 grid-template-columns: 1fr;
 }
}

.jb-jadwal-panel {
 background: linear-gradient(135deg, var(--green-dark), var(--green));
 color: #fff;
 padding: 36px 32px;
 display: flex;
 flex-direction: column;
}

.jb-jadwal-title {
 font-size: 24px;
 font-weight: 800;
 margin-bottom: 30px;
 display: flex;
 align-items: center;
 gap: 12px;
 color: #fff;
}

.jb-jadwal-title svg {
 stroke: rgba(255, 255, 255, 0.8);
}

.jadwal-timeline {
 position: relative;
}



.jadwal-row {
 display: flex;
 align-items: center;
 gap: 16px;
 padding: 14px 0;
 border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

.jadwal-row:last-child {
 border-bottom: none;
}

.jadwal-time {
 font-size: 13px;
 font-weight: 800;
 color: #a7f3d0;
 text-align: left;
 flex-shrink: 0;
 order: 2;
 min-width: 45px;
}

.jadwal-dot {
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: #fff;
 flex-shrink: 0;
 box-shadow: 0 0 0 4px rgba(255, 255, 255, .2);
 order: 1;
 position: relative;
 z-index: 2;
}

.jadwal-row.gold .jadwal-dot {
 background: var(--gold);
 box-shadow: 0 0 0 4px rgba(217, 119, 6, .3);
}

.jadwal-row.gold .jadwal-time {
 color: var(--gold);
}

.jadwal-activity {
 font-size: 15px;
 font-weight: 700;
 color: #fff;
 order: 3;
}

.jadwal-activity span {
 display: block;
 font-size: 12.5px;
 font-weight: 400;
 color: rgba(255, 255, 255, 0.7);
 margin-top: 3px;
}

.jb-biaya-panel {
 background: #fff;
 padding: 36px 32px;
 display: flex;
 flex-direction: column;
}

.jb-biaya-title {
 font-size: 24px;
 font-weight: 800;
 margin-bottom: 30px;
 display: flex;
 align-items: center;
 gap: 12px;
 color: var(--dark);
}

.jb-biaya-title svg {
 stroke: var(--green);
}

.biaya-cols {
 display: flex;
 flex-direction: column;
 gap: 24px;
}

.biaya-table-wrap {
 border-radius: 16px;
 border: 1px solid #f3f4f6;
 overflow: hidden;
 box-shadow: 0 2px 10px rgba(0, 0, 0, .02);
}

.biaya-table-head {
 padding: 16px 20px;
 border-bottom: 1px solid #f3f4f6;
 background: #f9fafb;
}

.biaya-table-head h3 {
 font-size: 16px;
 font-weight: 900;
 color: var(--dark);
 display: flex;
 align-items: center;
 gap: 8px;
}

.biaya-total {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 18px 20px;
 background: linear-gradient(135deg, var(--green-dark), var(--green));
 color: #fff;
 font-size: 14px;
 font-weight: 800;
}

.biaya-section-label {
 font-size: 10px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .1em;
 color: var(--green);
 padding: 8px 20px;
 background: rgba(0, 136, 11, .03);
}

.biaya-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 12.5px;
}

.biaya-table tr {
 border-bottom: 1px solid #f9fafb;
}

.biaya-table td {
 padding: 10px 14px;
 color: var(--dark);
 vertical-align: middle;
}

.biaya-table td:first-child {
 color: #9ca3af;
 font-size: 10.5px;
 width: 22px;
 padding-right: 0;
}

.biaya-table td:nth-child(2) {
 line-height: 1.4;
}

.biaya-table td:last-child {
 font-weight: 800;
 color: var(--green);
 text-align: right;
 white-space: nowrap;
}

.badge-bln,
.badge-thn,
.badge-skb {
 display: inline-block;
 font-size: 9px;
 font-weight: 800;
 padding: 2px 7px;
 border-radius: 10px;
 margin-left: 4px;
 vertical-align: middle;
 white-space: nowrap;
 margin-top: 2px;
}

.badge-bln {
 background: rgba(0, 136, 11, .08);
 color: var(--green);
}

.badge-thn {
 background: rgba(161, 98, 7, .08);
 color: #92400e;
}

.badge-skb {
 background: rgba(59, 130, 246, .08);
 color: #2563eb;
}

.biaya-note {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 background: #fffbeb;
 border: 1px solid #fde68a;
 border-radius: 12px;
 padding: 16px;
 margin-top: 24px;
}

.biaya-note-icon {
 width: 28px;
 height: 28px;
 flex-shrink: 0;
 background: #fef3c7;
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.biaya-note-icon svg {
 width: 16px;
 height: 16px;
 stroke: #d97706;
 stroke-width: 2;
 fill: none;
 stroke-linecap: round;
}

@media (max-width: 768px) {

 .jb-jadwal-panel,
 .jb-biaya-panel {
 padding: 24px;
 }
}


#kegiatan {
 background: #fff;
 padding: 50px 24px;
}

.kegiatan-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px
}

.kegiatan-card {
 border-radius: 18px;
 overflow: hidden;
 aspect-ratio: 4/3;
 background: linear-gradient(135deg, var(--green-dark), var(--green));
 position: relative;
 cursor: pointer;
 transition: transform .3s ease, box-shadow .3s ease;
}

.kegiatan-card:hover {
 transform: scale(1.03);
 box-shadow: 0 20px 40px rgba(0, 136, 11, .2)
}

.kegiatan-card img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform .4s ease
}

.kegiatan-card:hover img {
 transform: scale(1.06)
}

.kegiatan-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(to top, rgba(0, 50, 10, .65) 0%, transparent 60%);
 display: flex;
 align-items: flex-end;
 padding: 16px;
}

.kegiatan-label {
 font-size: 13px;
 font-weight: 700;
 color: #fff
}


#cta {
 padding: 50px 24px;
 background-color: transparent;
 display: flex;
 justify-content: center;
 position: relative;
 z-index: 10;
}

.cta-inner {
 position: relative;
 width: 100%;
 max-width: 1100px;
 background: linear-gradient(135deg, #022c16 0%, #005c00 100%);
 border-radius: 28px;
 overflow: hidden;
 padding: 48px 60px;
 box-shadow: 0 24px 50px rgba(0, 136, 11, 0.12), inset 0 2px 0 rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(255,255,255,0.05);
}

.cta-glow {
 position: absolute;
 width: 500px;
 height: 500px;
 border-radius: 50%;
 filter: blur(100px);
 z-index: 0;
 pointer-events: none;
}

.cta-glow-1 {
 top: -200px;
 left: -200px;
 background: rgba(16, 185, 129, 0.4);
}

.cta-glow-2 {
 bottom: -250px;
 right: -200px;
 background: rgba(245, 158, 11, 0.35); 
}

.cta-content {
 position: relative;
 z-index: 2;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}

.cta-badge {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 8px 20px;
 background: rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.2);
 border-radius: 30px;
 backdrop-filter: blur(10px);
 margin-bottom: 24px;
}

.cta-badge span {
 font-size: 13px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 0.15em;
 color: #a7f3d0;
}

.cta-badge-dot {
 width: 8px;
 height: 8px;
 background: #34d399;
 border-radius: 50%;
 box-shadow: 0 0 10px #34d399;
 animation: blink 2s infinite ease-in-out;
}

.cta-title {
 font-size: clamp(1.8rem, 3.5vw, 2.8rem);
 font-weight: 900;
 line-height: 1.2;
 letter-spacing: -0.01em;
 margin: 0 0 16px 0;
 color: #fff;
}

.cta-title .highlight {
 background: linear-gradient(120deg, #fff, #a7f3d0, rgba(255, 255, 255, .8), #bbf7d0, #fff);
 background-size: 250% auto;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 animation: shimmer 5s linear infinite;
}

.cta-desc {
 max-width: 600px;
 font-size: 14.5px;
 line-height: 1.6;
 color: rgba(255, 255, 255, 0.85);
 margin: 0 0 32px 0;
 font-weight: 500;
}

.cta-actions {
 display: flex;
 gap: 16px;
 flex-wrap: wrap;
 justify-content: center;
}

.cta-btn {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 14px 28px;
 border-radius: 30px;
 font-size: 14px;
 font-weight: 800;
 transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 text-decoration: none;
}

.cta-btn.primary {
 background: var(--amber); 
 color: #111827;
 box-shadow: 0 10px 25px rgba(249, 115, 22, 0.4);
}

.cta-btn.primary:hover {
 background: #fb923c;
 transform: translateY(-4px);
 box-shadow: 0 15px 35px rgba(249, 115, 22, 0.5);
}

.cta-btn.primary svg {
 width: 18px;
 height: 18px;
 transition: transform 0.3s ease;
}

.cta-btn.primary:hover svg {
 transform: translateX(4px);
}

.cta-btn.secondary {
 background: transparent;
 color: #fff;
 border: 2px solid rgba(255, 255, 255, 0.3);
 backdrop-filter: blur(5px);
}

.cta-btn.secondary:hover {
 border-color: #fff;
 background: rgba(255, 255, 255, 0.1);
 transform: translateY(-4px);
}

.cta-btn.secondary svg {
 width: 20px;
 height: 20px;
}


footer {
 background: #000d08;
 padding: 48px 24px 24px;
 color: rgba(255, 255, 255, .55)
}

.footer-inner {
 max-width: 1100px;
 margin: 0 auto
}


#wa-btn {
 position: fixed;
 bottom: 24px;
 right: 24px;
 z-index: 999;
 width: 54px;
 height: 54px;
 border-radius: 16px;
 background: linear-gradient(135deg, var(--green-dark), var(--green));
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 10px 24px rgba(0, 136, 11, .3), 0 4px 10px rgba(22, 29, 26, .1);
 transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
 animation: waFloat 3s ease-in-out infinite;
}

#wa-btn:hover {
 transform: translateY(-5px) scale(1.05);
 box-shadow: 0 18px 36px rgba(0, 136, 11, .4)
}

#wa-btn svg {
 width: 26px;
 height: 26px;
 fill: #fff
}


#donasi-modal {
 position: fixed;
 inset: 0;
 z-index: 10000;
 background: rgba(4, 18, 9, 0.85);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 20px;
 opacity: 0;
 visibility: hidden;
 transition: all 0.5s ease;
 backdrop-filter: blur(8px);
}

#donasi-modal.show {
 opacity: 1;
 visibility: visible;
}

.donasi-banner {
 width: 100%;
 max-width: 600px;
 border-radius: 24px;
 position: relative;
 background: rgba(255, 255, 255, 0.01);
 transform: translateY(40px) scale(0.95);
 transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
 box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

#donasi-modal.show .donasi-banner {
 transform: translateY(0) scale(1);
}

.donasi-banner-top {
 background: linear-gradient(135deg, #00a651 0%, #036b37 100%);
 padding: 45px 30px 60px;
 color: #fff;
 text-align: center;
 position: relative;
}

.donasi-banner-top::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
 radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.2) 0%, transparent 40%);
 pointer-events: none;
}

.donasi-banner-badge {
 display: inline-block;
 background: rgba(255, 255, 255, 0.2);
 padding: 6px 14px;
 border-radius: 20px;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 1px;
 text-transform: uppercase;
 margin-bottom: 20px;
 backdrop-filter: blur(4px);
}

.donasi-banner-top h3 {
 font-size: 30px;
 font-weight: 900;
 margin: 0 0 10px;
 line-height: 1.2;
 letter-spacing: -0.5px;
}

.donasi-banner-top p {
 font-size: 14.5px;
 margin: 0;
 opacity: 0.95;
 line-height: 1.6;
}

.donasi-banner-bottom {
 padding: 0 30px 30px;
 display: flex;
 flex-direction: column;
 align-items: center;
 background: #fff;
}

.donasi-card-wrap {
 width: 100%;
 max-width: 460px;
 background: #fff;
 border-radius: 16px;
 padding: 28px 24px;
 text-align: center;
 margin-top: -40px;
 position: relative;
 z-index: 2;
 box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 border: 1px solid rgba(0, 0, 0, 0.04);
}

.donasi-progress-wrap {
 text-align: left;
 margin-bottom: 24px;
}

.donasi-stats {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 margin-bottom: 8px;
}

.donasi-stats span {
 font-size: 11px;
 color: #64748b;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.donasi-stats .stat-left strong {
 font-size: 18px;
 color: var(--green);
 font-weight: 900;
 display: block;
 margin-top: 2px;
}

.donasi-stats .stat-right {
 text-align: right;
}

.donasi-stats .stat-right strong {
 font-size: 14px;
 color: var(--dark);
 font-weight: 800;
 display: block;
 margin-top: 2px;
}

.progress-bar-bg {
 width: 100%;
 height: 10px;
 background: #e2e8f0;
 border-radius: 10px;
 overflow: hidden;
}

.progress-bar-fill {
 height: 100%;
 background: linear-gradient(90deg, #10b981, #00a651);
 border-radius: 10px;
 transition: 1s ease-out;
}

.donasi-close {
 position: absolute;
 top: 16px;
 right: 16px;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.2);
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 cursor: pointer;
 border: none;
 transition: .3s;
 z-index: 10;
}

.donasi-close:hover {
 background: #fff;
 color: #0f172a;
}


#darman-tv {
 background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
 position: relative;
 padding: 50px 24px;
}

.dtv-carousel-wrap {
 position: relative;
 width: 100%;
 padding: 0 44px;
}

.dtv-nav-btn {
 position: absolute;
 top: 40%;
 transform: translateY(-50%);
 width: 44px;
 height: 44px;
 background: #fff;
 border: 1px solid rgba(0, 136, 11, .15);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 z-index: 10;
 box-shadow: 0 4px 12px rgba(0,0,0,.08);
 color: var(--green);
 transition: all .3s ease;
}

.dtv-nav-btn:hover {
 background: var(--green);
 color: #fff;
 box-shadow: 0 8px 24px rgba(0,136,11,.2);
}

.dtv-nav-btn.prev {
 left: -10px;
}
.dtv-nav-btn.next {
 right: -10px;
}

.dtv-nav-btn svg {
 width: 22px;
 height: 22px;
 stroke: currentColor;
 stroke-width: 2.5;
 fill: none;
 stroke-linecap: round;
 stroke-linejoin: round;
}

.dtv-sidebar {
 display: flex;
 flex-direction: row;
 gap: 20px;
 overflow-x: auto;
 padding: 10px 0 20px;
 scroll-behavior: smooth;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 -ms-overflow-style: none;
}

.dtv-sidebar::-webkit-scrollbar {
 display: none;
}

.dtv-vid-card {
 width: min(440px, 85vw);
 min-width: min(440px, 85vw);
 aspect-ratio: 16/9;
 border-radius: 16px;
 overflow: hidden;
 background: #000;
 transition: transform .3s ease;
 flex-shrink: 0;
}

.dtv-vid-card:hover {
 transform: translateY(-6px);
}

.dtv-vid-card iframe {
 width: 100%;
 height: 100%;
 border: none;
 display: block;
}


@media(max-width:1024px) {
 .pendidikan-grid {
 grid-template-columns: 1fr 1fr
 }

 .daurah-grid {
 grid-template-columns: 1fr 1fr
 }
}

@media(max-width:768px) {

 #topbar {
 display: none;
 }

 .nav-links,
 .nav-btn-wrap {
 display: none
 }

 
 #navbar-inner {
 padding: 0 20px;
 gap: 0;
 }

 #burger {
 display: flex;
 margin-left: auto;
 }

 .nav-brand img {
 width: 45px;
 height: 45px;
 }

 .nav-brand-text p {
 font-size: 16.5px;
 }

 .nav-brand-text small {
 font-size: 11px;
 }

 
 .hero-img-wrap {
 display: none;
 }

 .hero-grid-cols {
 grid-template-columns: 1fr;
 gap: 12px;
 }

 h1.hero-title {
 font-size: 2.8rem;
 margin-bottom: 14px !important;
 line-height: 1.05;
 }

 h1.hero-title .small-label {
 font-size: 0.38em;
 margin-bottom: 8px;
 }

 h1.hero-title .loc {
 font-size: 0.5em;
 margin-top: 8px;
 }

 .hero-typed {
 font-size: 1.1rem;
 margin-bottom: 24px;
 min-height: auto;
 max-width: 100%;
 line-height: 1.7;
 }

 .hero-btns {
 flex-direction: column;
 flex-wrap: nowrap;
 gap: 10px;
 width: 100%;
 }

 .btn-primary,
 .btn-secondary {
 width: 100%;
 justify-content: center;
 padding: 14px 20px;
 font-size: 14px;
 white-space: normal;
 text-align: center;
 min-width: unset;
 box-sizing: border-box;
 }

 #hero {
 margin-top: -85px;
 padding-top: 100px;
 padding-bottom: 48px;
 padding-left: 20px;
 padding-right: 20px;
 }

 
 #profil {
 margin: 0 0 24px;
 border-radius: 0;
 padding: 40px 20px;
 box-shadow: none;
 border-top: 1px solid #e5e7eb;
 }

 .profil-grid {
 grid-template-columns: 1fr;
 gap: 24px;
 }

 
 .pengurus-grid {
 grid-template-columns: 1fr 1fr;
 gap: 14px;
 }

 .pengurus-card {
 padding: 24px 16px 20px;
 }

 
 .didik-tab-btn span {
 display: none;
 }

 .didik-tab-btn {
 padding: 10px 16px;
 }

 .didik-row {
 padding: 12px 14px;
 gap: 12px;
 }

 
 .jb-split-layout {
 grid-template-columns: 1fr;
 }

 
 .kegiatan-grid {
 grid-template-columns: 1fr 1fr;
 }

 
 .dtv-carousel-wrap {
 padding: 0 44px;
 overflow: visible;
 }

 #darman-tv {
 overflow: hidden;
 }

 .dtv-sidebar {
 padding: 8px 0 16px;
 }

 .dtv-vid-card {
 width: min(340px, 75vw);
 min-width: min(340px, 75vw);
 }

 .dtv-nav-btn {
 width: 38px;
 height: 38px;
 }

 
 .cta-inner {
 padding: 36px 24px;
 border-radius: 20px;
 }

 .cta-actions {
 flex-direction: column;
 align-items: stretch;
 }

 .cta-btn {
 justify-content: center;
 text-align: center;
 }

 
 .footer-grid {
 grid-template-columns: 1fr;
 }

 .footer-bottom {
 flex-direction: column;
 text-align: center;
 }
}

@media(max-width:480px) {

 h1.hero-title {
 font-size: 1.75rem;
 }

 .hero-typed {
 font-size: 13px;
 }

 .btn-primary,
 .btn-secondary {
 font-size: 12px;
 padding: 11px 12px;
 }

 .pengurus-grid {
 grid-template-columns: 1fr 1fr;
 }

 .pengurus-avatar {
 width: 90px;
 height: 110px;
 }

 .kegiatan-grid {
 grid-template-columns: 1fr;
 }

 .nav-brand img {
 width: 38px;
 height: 38px;
 }

 .nav-brand-text p {
 font-size: 14.5px;
 }

 .nav-brand-text small {
 font-size: 10px;
 }

 .cta-title {
 font-size: 1.5rem !important;
 }

 .cta-desc {
 font-size: 13.5px;
 }
}


html.lenis-scrolling iframe {
 pointer-events: none;
}