/* ===================================== */
/* RESET */
/* ===================================== */

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:
linear-gradient(
180deg,
#071426,
#0b1f3a,
#071426
);

color:white;

overflow-x:hidden;
}

/* ===================================== */
/* CONTAINER */
/* ===================================== */

.container{

width:100%;
max-width:1280px;

margin:auto;

padding:0 24px;
}

/* ===================================== */
/* TOPBAR */
/* ===================================== */

.topbar-running{

position:fixed;

top:0;
left:0;

width:100%;
height:42px;

display:flex;
align-items:center;

overflow:hidden;

background:
linear-gradient(
90deg,
#d4af37,
#ffd700
);

color:#071426;

font-size:13px;
font-weight:700;

z-index:999999;
}

.topbar-running span{

display:inline-block;

white-space:nowrap;

padding-left:100%;

animation:runningDonor 22s linear infinite;
}

@keyframes runningDonor{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-100%);
}

}

/* ===================================== */
/* SECTION */
/* ===================================== */

.section{
padding:110px 0;
}

.dark{

background:
linear-gradient(
180deg,
#071426,
#0b1f3a
);
}

/* ===================================== */
/* HERO */
/* ===================================== */

.hero-ultra{

min-height:88vh;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

position:relative;

overflow:hidden;

padding:
170px 24px 110px;

background:
radial-gradient(
circle at top,
rgba(15,45,80,.95),
#071426 58%,
#020817 100%
);
}

/* GOLD LIGHT */

.hero-ultra::before{

content:'';

position:absolute;

top:-240px;
right:-140px;

width:780px;
height:780px;

background:
radial-gradient(
circle,
rgba(212,175,55,.16),
transparent 72%
);

filter:blur(40px);

animation:goldFloat 8s ease-in-out infinite;
}

/* BLUE LIGHT */

.hero-ultra::after{

content:'';

position:absolute;

left:-260px;
bottom:-260px;

width:700px;
height:700px;

background:
radial-gradient(
circle,
rgba(0,140,255,.14),
transparent 72%
);

filter:blur(55px);
}

@keyframes goldFloat{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(30px);
}

100%{
transform:translateY(0px);
}

}

/* CONTENT */

.hero-content{

position:relative;

z-index:2;

width:100%;

max-width:1100px;

margin:auto;

padding:0 6px;

display:flex;
flex-direction:column;

align-items:center;
justify-content:center;
}
/* TITLE */

.hero-title{

font-size:clamp(56px,7vw,118px);

line-height:.95;

font-weight:900;

letter-spacing:-4px;

margin:0;

color:white;

text-align:center;

text-shadow:
0 10px 35px rgba(0,0,0,.35);
}

/* GOLD */

.hero-title span{

display:block;

margin-top:12px;

background:
linear-gradient(
90deg,
#d4af37,
#ffd700,
#ffef9a
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* SUBTITLE */

.hero-sub{

max-width:760px;

margin:
34px auto 0;

font-size:22px;

line-height:1.9;

color:
rgba(255,255,255,.78);

text-align:center;
}

/* CTA */

.cta-ultra{

display:flex;
flex-wrap:wrap;

justify-content:center;

gap:18px;

margin-top:55px;
}

/* ===================================== */
/* BUTTON */
/* ===================================== */

.btn-primary,
.btn-outline,
.btn-ghost,
.btn-private{

height:58px;

padding:0 28px;

display:inline-flex;

align-items:center;
justify-content:center;

border-radius:18px;

font-size:14px;
font-weight:700;

text-decoration:none;

transition:.35s ease;

position:relative;

overflow:hidden;

backdrop-filter:blur(10px);
}

/* SHINE */

.btn-primary::before,
.btn-outline::before,
.btn-ghost::before,
.btn-private::before{

content:'';

position:absolute;

top:0;
left:-120%;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.22),
transparent
);

transition:.8s;
}

.btn-primary:hover::before,
.btn-outline:hover::before,
.btn-ghost:hover::before,
.btn-private:hover::before{

left:120%;
}

/* PRIMARY */

.btn-primary{

background:
linear-gradient(
90deg,
#d4af37,
#ffd700
);

color:#071426;

box-shadow:
0 15px 35px rgba(212,175,55,.28);
}

.btn-primary:hover{

transform:
translateY(-4px)
scale(1.02);
}

/* OUTLINE */

.btn-outline{

border:
1px solid rgba(212,175,55,.4);

color:#d4af37;

background:
rgba(255,255,255,.03);
}

.btn-outline:hover{

background:#d4af37;
color:#071426;
}

/* GHOST */

.btn-ghost{

background:
rgba(255,255,255,.05);

border:
1px solid rgba(255,255,255,.08);

color:white;
}

.btn-ghost:hover{

background:
rgba(255,255,255,.12);

transform:translateY(-4px);
}

/* PRIVATE */

.btn-private{

background:
linear-gradient(
90deg,
#00d2ff,
#0095ff
);

color:white;
}

.btn-private:hover{

transform:translateY(-4px);
}

/* ===================================== */
/* GRID */
/* ===================================== */

.grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:28px;
}

/* ===================================== */
/* CARD */
/* ===================================== */

.card,
.ecosystem-card,
.program-card,
.impact-item{

background:
linear-gradient(
180deg,
rgba(255,255,255,.06),
rgba(255,255,255,.025)
);

border:
1px solid rgba(255,255,255,.06);

border-radius:26px;

padding:30px;

transition:.35s ease;

position:relative;

overflow:hidden;

backdrop-filter:blur(18px);

box-shadow:
0 20px 45px rgba(0,0,0,.25);
}

.card::before,
.ecosystem-card::before,
.program-card::before,
.impact-item::before{

content:'';

position:absolute;

inset:0;

background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
transparent 45%
);

opacity:.4;

pointer-events:none;
}

.card:hover,
.ecosystem-card:hover,
.program-card:hover,
.impact-item:hover{

transform:
translateY(-10px);

border:
1px solid rgba(212,175,55,.28);

box-shadow:
0 30px 65px rgba(0,0,0,.35);
}

/* ===================================== */
/* TITLE */
/* ===================================== */

h2{

font-size:64px;

font-weight:900;

line-height:1.1;

margin-bottom:60px;

letter-spacing:-2px;

position:relative;
}

h2::after{

content:'';

position:absolute;

left:0;
bottom:-18px;

width:85px;
height:4px;

border-radius:999px;

background:
linear-gradient(
90deg,
#d4af37,
#ffd700
);
}

/* CENTER TITLE */

.center-title{

text-align:center;
}

.center-title::after{

left:50%;

transform:translateX(-50%);
}

/* ===================================== */
/* PROGRAM */
/* ===================================== */

.program-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:22px;

margin-top:55px;

max-width:1050px;

margin-left:auto;
margin-right:auto;
}

/* CARD */

.program-card{

min-height:220px;

display:flex;
flex-direction:column;
justify-content:space-between;

text-decoration:none;
}

/* TITLE */

.program-card h3{

font-size:30px;

line-height:1.25;

color:white;

margin-bottom:16px;
}

.program-card h3 span{
color:#d4af37;
}

/* TEXT */

.program-card p{

font-size:15px;

line-height:1.8;

color:
rgba(255,255,255,.72);
}

/* BUTTON */

.program-bottom{

margin-top:24px;
}

.program-mini-btn{

height:42px;

padding:0 18px;

display:inline-flex;

align-items:center;
justify-content:center;

border-radius:14px;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(212,175,55,.18);

color:#d4af37;

font-size:13px;
font-weight:700;

transition:.3s ease;
}

.program-card:hover .program-mini-btn{

background:
linear-gradient(
90deg,
#d4af37,
#ffd700
);

color:#071426;
}

/* ===================================== */
/* RED WHITE TITLE */
/* ===================================== */

.title-merah-putih{

font-size:64px;

font-weight:900;

line-height:1.1;

text-align:center;
}

.title-merah-putih::after{

left:50%;

transform:translateX(-50%);
}

.title-merah-putih span{

background:
linear-gradient(
90deg,
#ff2d2d,
white
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* SUBTITLE */

.subtitle{

max-width:900px;

margin:30px auto 0;

text-align:center;

font-size:18px;

line-height:1.9;

color:
rgba(255,255,255,.74);
}

/* ===================================== */
/* IMPACT */
/* ===================================== */

.impact{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:28px;

margin-top:60px;
}

.impact-item{

text-align:center;
}

.impact-item strong{

display:block;

font-size:62px;

font-weight:900;

color:#d4af37;

margin-bottom:12px;
}

.impact-item span{

font-size:18px;

opacity:.9;
}

/* ===================================== */
/* ECOSYSTEM */
/* ===================================== */

.ecosystem-badge{

display:inline-block;

padding:7px 14px;

border-radius:999px;

border:
1px solid rgba(212,175,55,.3);

color:#d4af37;

font-size:11px;
font-weight:700;

margin-bottom:16px;
}

.ecosystem-title{

font-size:28px;

font-weight:800;

line-height:1.3;

margin-bottom:14px;
}

.ecosystem-text{

font-size:15px;

line-height:1.8;

opacity:.82;
}

.ecosystem-stats{

margin-top:18px;

font-size:14px;

line-height:1.9;

color:#d4af37;
}

/* IMAGE */

.ecosystem-card img{

width:100%;
height:240px;

object-fit:cover;

border-radius:18px;

margin-bottom:18px;
}

/* ACTION */

.ecosystem-actions{

display:flex;
gap:14px;
flex-wrap:wrap;

margin-top:26px;
}

/* ===================================== */
/* DONOR */
/* ===================================== */

.donor-rank{

font-size:14px;

color:#d4af37;

margin-bottom:10px;
}

.donor-name{

font-size:30px;

font-weight:800;
}

.donor-badge{

margin-top:10px;

font-size:14px;

color:#d4af37;
}

.donor-total{

margin-top:24px;

font-size:22px;

font-weight:700;
}

/* ===================================== */
/* FOOTER */
/* ===================================== */

footer{

position:relative;

overflow:hidden;
}

footer::before{

content:'';

position:absolute;

top:-250px;
right:-250px;

width:500px;
height:500px;

background:
radial-gradient(
circle,
rgba(212,175,55,.08),
transparent 72%
);

pointer-events:none;
}

footer a{

color:white;

text-decoration:none;

opacity:.82;
}

footer a:hover{

color:#d4af37;
}

/* ===================================== */
/* MOBILE */
/* ===================================== */

@media(max-width:768px){

.section{
padding:75px 0;
}

.hero-ultra{

padding:
145px 20px 85px;

min-height:auto;
}

.hero-title{

font-size:clamp(34px,9vw,52px);

line-height:1.08;

letter-spacing:-1.5px;

word-break:break-word;

max-width:100%;
}

.hero-sub{

font-size:15px;

line-height:1.9;

margin-top:22px;

max-width:100%;
padding:0 4px;
}

.cta-ultra{

gap:14px;
}

.btn-primary,
.btn-outline,
.btn-ghost,
.btn-private{

width:100%;
}

h2{

font-size:42px;
}

.title-merah-putih{

font-size:42px;
}

.subtitle{

font-size:15px;
}

.program-card h3{

font-size:24px;
}

.impact-item strong{

font-size:46px;
}

.donor-name{

font-size:24px;
}

}