/* =====================================
PROGRAM UNGGULAN PESANTREN
===================================== */

.program-section{

padding:90px 0;

}

.program-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:20px;

margin-top:40px;

}

.program-card{

background:white;

padding:25px 15px;

border-radius:24px;

text-align:center;

box-shadow:
0 10px 25px rgba(0,0,0,.08);

transition:.3s ease;

color:inherit;

position:relative;

overflow:hidden;

}

.program-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

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

}

.program-card:hover{

transform:translateY(-5px);

box-shadow:
0 20px 40px rgba(0,0,0,.12);

}

.program-icon{

width:70px;

height:70px;

margin:0 auto 15px;

display:flex;

align-items:center;

justify-content:center;

font-size:2.2rem;

border-radius:50%;

background:
linear-gradient(
135deg,
rgba(31,107,79,.08),
rgba(212,175,55,.12)
);

}

.program-card h3{

color:#1f6b4f;

font-size:1.1rem;

margin-bottom:8px;

font-weight:700;

}

.program-card p{

font-size:.85rem;

line-height:1.5;

color:#666;

}
.program-link{

display:inline-block;

margin-top:12px;

padding:8px 14px;

border-radius:999px;

background:
linear-gradient(
135deg,
#1f6b4f,
#2e8b68
);

color:white;

font-size:.75rem;

font-weight:600;

transition:.3s ease;

}

.program-card:hover .program-link{

transform:translateY(-2px);

}
/* =====================================
TOMBOL DETAIL PROGRAM
===================================== */

.detail-program-btn{

display:inline-flex;

align-items:center;

justify-content:center;

margin-top:15px;

padding:10px 18px;

border-radius:999px;

background:
linear-gradient(
135deg,
#1f6b4f,
#2e8b68
);

color:white;

font-size:.85rem;

font-weight:600;

transition:.3s ease;

}

.detail-program-btn:hover{

transform:translateY(-3px);

box-shadow:
0 8px 20px rgba(31,107,79,.25);

}
/* =====================================
PENDIDIKAN HOME
===================================== */

.pendidikan-home-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:25px;

margin-top:40px;

}

.pendidikan-card{

background:white;

border-radius:28px;

overflow:hidden;

box-shadow:
0 15px 35px rgba(0,0,0,.08);

transition:.3s ease;

display:flex;

flex-direction:column;

}

.pendidikan-card:hover{

transform:translateY(-5px);

}

.pendidikan-card img{

width:100%;

height:230px;

object-fit:cover;

display:block;

}

.pendidikan-content{

padding:20px;

display:flex;

flex-direction:column;

height:100%;

}

.pendidikan-content h3{

color:#1f6b4f;

margin-bottom:15px;

font-size:1.2rem;

}

/* ACCORDION */

.accordion-btn{

width:100%;

border:none;

cursor:pointer;

padding:12px 18px;

border-radius:999px;

background:
linear-gradient(
135deg,
#d4af37,
#f7d774
);

font-weight:700;

display:flex;

justify-content:space-between;

align-items:center;

transition:.3s ease;

}

.accordion-btn:hover{

transform:translateY(-2px);

}

.accordion-btn span{

transition:.35s ease;

}

.accordion-btn.active span{

transform:rotate(180deg);

}

.accordion-content{

max-height:0;

overflow:hidden;

transition:
max-height .4s ease;

}

.accordion-content p{

padding:15px 5px;

line-height:1.8;

color:#666;

font-size:.95rem;

}

/* CTA BAWAH */

.pendidikan-cta{

margin-top:50px;

text-align:center;

padding:40px;

background:
linear-gradient(
135deg,
rgba(31,107,79,.05),
rgba(212,175,55,.08)
);

border-radius:30px;

}

.pendidikan-cta h3{

color:#1f6b4f;

margin-bottom:10px;

font-size:1.8rem;

}

.pendidikan-cta p{

margin-bottom:25px;

color:#666;

line-height:1.8;

}
/* =====================================
PROGRAM UNGGULAN HP
===================================== */

@media(max-width:768px){

.program-grid{

grid-template-columns:
repeat(3,1fr);

gap:10px;

}

.program-card{

padding:15px 8px;

border-radius:18px;

}

.program-icon{

width:50px;

height:50px;

font-size:1.5rem;

margin-bottom:8px;

text-align:center;

word-break:normal;

overflow-wrap:break-word;

}

.program-card h3{

font-size:.68rem;

line-height:1.3;

margin-bottom:6px;

min-height:36px;

display:flex;

align-items:center;

justify-content:center;

}

.program-card p{

font-size:.62rem;

line-height:1.3;

}

}
/* =====================================
EKSTRAKURIKULER HOME
===================================== */

.ekstrakurikuler-home-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:25px;

margin-top:40px;

}

.ekstrakurikuler-card{

background:white;

border-radius:28px;

overflow:hidden;

box-shadow:
0 15px 35px rgba(0,0,0,.08);

transition:
all .35s ease;

display:flex;

flex-direction:column;

}

.ekstrakurikuler-card:hover{

transform:
translateY(-8px);

box-shadow:
0 25px 50px rgba(0,0,0,.12);

}

.ekstrakurikuler-card img{

width:100%;

height:220px;

object-fit:cover;

transition:
transform .5s ease;

}

.ekstrakurikuler-card:hover img{

transform:scale(1.05);

}

.ekstrakurikuler-content{

padding:20px;

display:flex;

flex-direction:column;

flex:1;

}

.ekstrakurikuler-content h3{

margin-bottom:15px;

color:#1f6b4f;

text-align:center;

}

.ekstrakurikuler-card-center{

grid-column:1 / -1;

max-width:500px;

width:100%;

margin:0 auto;

}

.ekstrakurikuler-accordion-btn{

width:100%;
border:none;
cursor:pointer;
padding:14px 18px;
border-radius:999px;
background:#d4af37;
color:#1a1a1a;
font-weight:600;
display:flex;
align-items:center;
justify-content:space-between;
transition:.3s ease;
margin-bottom:10px;

}

.ekstrakurikuler-accordion-btn:hover{

transform:translateY(-2px);

}

.ekstrakurikuler-accordion-btn span{

transition:
transform .4s ease;

}

.ekstrakurikuler-accordion-btn.active span{

transform:
rotate(180deg);

}

.ekstrakurikuler-accordion-content{

max-height:0;

overflow:hidden;

opacity:0;

transition:
max-height .45s ease,
opacity .35s ease;

}

.ekstrakurikuler-accordion-content.show{

opacity:1;

}

.ekstrakurikuler-accordion-content p{

padding:15px 5px;

line-height:1.8;

color:#666;

font-size:.95rem;

}

/* CTA */

.ekstrakurikuler-cta{

margin-top:50px;

text-align:center;

padding:40px;

background:
linear-gradient(
135deg,
rgba(31,107,79,.05),
rgba(212,175,55,.08)
);

border-radius:30px;

}

.ekstrakurikuler-cta h3{

color:#1f6b4f;

margin-bottom:10px;

font-size:1.8rem;

}

.ekstrakurikuler-cta p{

margin-bottom:25px;

color:#666;

line-height:1.8;

}

/* =====================================
EKSTRAKURIKULER HOME HP
===================================== */

@media(max-width:768px){

.ekstrakurikuler-home-grid{

grid-template-columns:
repeat(2,1fr);

gap:12px;

}

.ekstrakurikuler-card img{

height:120px;

}

.ekstrakurikuler-content{

padding:12px;

}

.ekstrakurikuler-content h3{

font-size:.85rem;

text-align:center;

}

.ekstrakurikuler-accordion-btn{

padding:10px;

font-size:.7rem;

}

.ekstrakurikuler-accordion-content p{

font-size:.72rem;

line-height:1.5;

}

.detail-program-btn{

font-size:.7rem;

padding:8px 12px;

}

.ekstrakurikuler-card-center{

max-width:240px;

}

.ekstrakurikuler-cta{

padding:25px 15px;

}

.ekstrakurikuler-cta h3{

font-size:1.2rem;

}

}
/* =====================================
PENDIDIKAN HOME HP
===================================== */

@media(max-width:768px){

.pendidikan-home-grid{

grid-template-columns:
repeat(2,1fr);

gap:12px;

}

.pendidikan-card img{

height:120px;

}

.pendidikan-content{

padding:12px;

}

.pendidikan-content h3{

font-size:.85rem;

text-align:center;

}

.accordion-btn{

padding:10px;

font-size:.7rem;

}

.accordion-content p{

font-size:.72rem;

line-height:1.5;

}

.detail-program-btn{

font-size:.7rem;

padding:8px 12px;

}

.pendidikan-cta{

padding:25px 15px;

}

.pendidikan-cta h3{

font-size:1.2rem;

}

}