/* ==========================
NEWS
========================== */

.news{

padding:90px 0;

background:white;

}

.news-grid{

display:grid;

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

gap:35px;

}

.news-card{

background:white;

border-radius:20px;

overflow:hidden;

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

transition:.35s;

}

.news-card:hover{

transform:translateY(-10px);

}

.news-card img{

width:100%;

height:220px;

object-fit:cover;

}

.news-content{

padding:25px;

}

.category{

background:#d1fae5;

color:#047857;

padding:8px 15px;

border-radius:50px;

font-size:13px;

font-weight:600;

}

.news-content h3{

margin:20px 0 10px;

font-size:24px;

}

.date{

color:#64748b;

margin-bottom:15px;

}

.read-more{

display:inline-flex;

align-items:center;

gap:10px;

margin-top:20px;

color:#059669;

font-weight:700;

}

.read-more:hover{

gap:18px;

}

/*==============================
GALERI
==============================*/

.gallery{

padding:100px 0;

background:#f8fafc;

}

.gallery-grid{

display:grid;

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

gap:25px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:20px;

cursor:pointer;

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

}

.gallery-item img{

width:100%;

height:260px;

object-fit:cover;

transition:.4s;

}

.gallery-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:25px;

background:linear-gradient(

transparent,

rgba(0,0,0,.8)

);

color:white;

opacity:0;

transition:.4s;

}

.gallery-item:hover img{

transform:scale(1.1);

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

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

.footer{

background:#0f172a;

color:white;

padding:80px 0 20px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:40px;

margin-bottom:40px;

}

.footer-logo{

width:60px;

margin-bottom:15px;

}

.footer h3{

margin-bottom:15px;

}

.footer h4{

margin-bottom:20px;

}

.footer p{

color:#cbd5e1;

margin-bottom:10px;

line-height:1.8;

}

.footer ul li{

margin-bottom:10px;

}

.footer ul li a{

color:#cbd5e1;

transition:.3s;

}

.footer ul li a:hover{

color:#10b981;

}

.social{

display:flex;

gap:15px;

}

.social a{

width:45px;

height:45px;

background:#1e293b;

display:flex;

justify-content:center;

align-items:center;

border-radius:12px;

transition:.3s;

}

.social a:hover{

background:#10b981;

}

.footer hr{

margin:40px 0 20px;

border:1px solid #334155;

}

.copyright{

text-align:center;

color:#94a3b8;

}

/*============================
STRUKTUR
============================*/

.structure-page{

padding:120px 0;

}

.structure-grid{

display:grid;

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

gap:35px;

}

.member-card{

background:white;

border-radius:20px;

padding:30px;

text-align:center;

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

transition:.3s;

}

.member-card:hover{

transform:translateY(-8px);

}

.member-photo{

width:140px;

height:140px;

border-radius:50%;

margin:auto;

object-fit:cover;

margin-bottom:20px;

border:5px solid #10b981;

}

.member-card h3{

margin-bottom:10px;

}

.member-card h4{

color:#059669;

margin-bottom:15px;

font-weight:600;

}

.member-card p{

color:#64748b;

}

/*==============================
LAYANAN
==============================*/

.layanan-page{

padding:120px 0;

}

.layanan-grid{

display:grid;

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

gap:30px;

}

.service-card{

background:white;

padding:35px;

border-radius:20px;

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

text-align:center;

transition:.3s;

}

.service-card:hover{

transform:translateY(-10px);

}

.service-icon{

width:80px;

height:80px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

background:#d1fae5;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:#059669;

}

.service-card h3{

margin-bottom:15px;

}

.service-card p{

color:#64748b;

margin-bottom:20px;

}

.service-card span{

display:block;

margin-bottom:20px;

color:#059669;

font-weight:600;

}

.service-card button{

padding:14px 24px;

border:none;

border-radius:12px;

background:#059669;

color:white;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.service-card button:hover{

background:#047857;

}