/* ======================================================
GLOBAL SECTION SPACING
====================================================== */

.fc-section{
margin-top:32px;
}

.fc-section:first-of-type{
margin-top:0;
}


/* ======================================================
HERO
====================================================== */
.fc-hero{
    position:relative;
    width:100%;
    height:0;
    padding-bottom:75%;
    margin-top:-16px;
    margin-bottom:120px; /* dikurangi karena CTA overlap ke bawah */
    overflow:visible; /* ← ubah dari hidden, biar CTA bisa keluar */
}

.fc-hero-img-wrap{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:0 0 24px 24px; /* ← rounded bawah */
}

.fc-hero-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}



/* CTA mengambang */
.fc-hero-cta{
    position:absolute;
    left:16px;
    right:16px;
    bottom:-50px; /* ← keluar ke bawah hero */
    background:#fff;
    border-radius:16px;
    padding:18px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    z-index:10;
}

/* CTA */

.fc-hero-cta{
    position:absolute;
    left:16px;
    right:16px;
    bottom:-120px; /* ← naikan angkanya sampai pas di posisi lingkaran orange */
    background:#fff;
    border-radius:16px;
    padding:18px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    z-index:10;
}


/* ======================================================
EXPLORE MENU
====================================================== */

.section-title{
font-size:16px;
font-weight:700;
margin-bottom:12px;
}

.fc-title{
font-size:18px;
font-weight:700;
margin-bottom:8px;
}

.explore-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.explore-item{
background:#fff;
border:1px solid #e8eef3;
border-radius:12px;
padding:16px;
text-align:center;
text-decoration:none;
color:#222;
}

.explore-icon{
margin-bottom:6px;
}

.explore-icon img{
width:100px;
height:100px;
object-fit:contain;
}

.explore-label{
font-size:14px;
font-weight:600;
}


/* ======================================================
FILTER BAR
====================================================== */

.fc-filter-bar{
display:flex;
gap:8px;
overflow-x:auto;
margin-bottom:12px;
}

.fc-filter-chip{
padding:6px 14px;
border-radius:20px;
background:#f2f2f2;
font-size:13px;
text-decoration:none;
color:#333;
white-space:nowrap;
}

.fc-filter-chip.active{
background:#005698;
color:#fff;
}


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

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


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

.fc-card-link{
text-decoration:none;
color:inherit;
display:block;
}

.fc-card{
background:#fff;
border-radius:16px;
border:1px solid #eee;
overflow:hidden;

box-shadow:0 6px 16px rgba(0,0,0,0.06);

display:flex;
flex-direction:column;

transition:all .2s ease;
}

.fc-card:active{
transform:scale(0.98);
}


/* IMAGE */

.fc-card-img-wrap{
width:100%;
height:140px;
overflow:hidden;
position:relative;
}

.fc-card-img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}


/* BODY */

.fc-card-body{
padding:12px 12px 10px;
}


/* ORG */

.fc-org-name{
font-size:12px;
color:#888;
margin-bottom:4px;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}


/* TITLE */

.fc-card-title{
font-size:15px;
font-weight:600;
line-height:1.35;

margin-bottom:8px;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;

min-height:40px; /* biar grid rapi */
}


/* CATEGORY */

.fc-card-category{
display:inline-block;
background:#e9f3ff;
color:#005698;
font-size:11px;
padding:3px 10px;
border-radius:12px;
margin-bottom:8px;
}


/* PROGRESS */

.fc-progress{
height:6px;
background:#eee;
border-radius:10px;
overflow:hidden;
margin-bottom:8px;
}

.fc-progress-bar{
height:100%;
background:#16c784;
border-radius:10px;
}


/* AMOUNT */

.fc-amount{
font-size:13px;
margin-bottom:8px;

display:flex;
justify-content:space-between;
align-items:center;
}

.fc-amount b{
font-weight:700;
}


/* META */

.fc-meta{
font-size:12px;
color:#777;

display:flex;
justify-content:space-between;
align-items:center;
}

.fc-meta span{
display:flex;
align-items:center;
gap:4px;
}

/* ======================================================
SOCIAL MEDIA
====================================================== */

.social-links{
display:flex;
gap:12px;
}

.social-item{
background:#fff;
border:1px solid #eee;
border-radius:10px;
padding:8px 14px;
font-size:14px;
text-decoration:none;
color:#333;
}


/* ============================================
SLIDER SINGLE
============================================ */

.fc-slide-single{
flex:0 0 100%;
scroll-snap-align:start;
}

/* ============================================
   SLIDER SYSTEM
============================================ */

.fc-slider{
display:flex;
overflow-x:auto;

gap:16px;
padding-bottom:14px;

scroll-snap-type:x mandatory;
scroll-behavior:smooth;

-webkit-overflow-scrolling:touch;
}

/* ============================================
   SLIDE - SINGLE (campaign terbaru)
============================================ */

.fc-slide-single{
flex:0 0 100%;
min-width:100%;

scroll-snap-align:start;
}

/* ============================================
   SLIDE - DOUBLE (legacy slider)
============================================ */

.fc-slide{
flex:0 0 100%;
min-width:100%;

display:flex;
gap:16px;

scroll-snap-align:start;
}

/* ============================================
   CARD WRAP (2 card layout)
============================================ */

.fc-card-wrap{
flex:0 0 calc(50% - 8px);
max-width:calc(50% - 8px);

display:block;
}

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

.fc-card-slider-img{
width:100%;
height:140px;
object-fit:cover;
display:block;
}


/* ============================================
COVER SLIDER CARD
============================================ */

.fc-cover-card{
display:block;
text-decoration:none;
color:#fff;
}

.fc-cover-img-wrap{
position:relative;
height:230px;
border-radius:16px;
overflow:hidden;
}

.fc-cover-img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* overlay */

.fc-cover-overlay{
position:absolute;
left:0;
right:0;
bottom:0;

padding:16px;

background:linear-gradient(
to top,
rgba(0,0,0,0.65),
rgba(0,0,0,0)
);
}

.fc-cover-title{
font-size:16px;
font-weight:600;
line-height:1.3;
}

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

.fc-card-more{

display:flex;
align-items:center;     /* center vertikal */
justify-content:center; /* center horizontal */

height:100%;

background:#f3f7fb;
border:1px dashed #cbd7e3;
border-radius:16px;

text-decoration:none;
color:#2f8edc;
padding:20px;

}

.fc-card-more-inner{
text-align:center;
}

.fc-card-more-icon{
font-size:28px;
margin-bottom:8px;
}

.fc-card-more-text{
font-size:14px;
font-weight:600;
line-height:1.3;
}



.fc-campaign-grid{
display:grid;
grid-template-columns:repeat(2,1fr);

gap:16px 14px; /* row 16, column 14 */

align-items:start;
}

.fc-campaign-grid > *{
transition:transform .2s ease;
}

.fc-campaign-grid > *:hover{
transform:translateY(-3px);
}