/* =================================================
   GWI PUSAT HOMEPAGE FINAL
================================================= */


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

.hero{

height:430px;

background:

linear-gradient(
90deg,
rgba(15,23,42,.85),
rgba(15,23,42,.35)
),

url('../img/hero.jpg');


background-size:cover;

background-position:center;

display:flex;

align-items:center;

padding:0 8%;

color:white;

}



.hero-content{

max-width:650px;

}



.hero-content span{

background:#dc2626;

padding:8px 18px;

border-radius:30px;

font-size:13px;

font-weight:bold;

}



.hero-content h1{

font-size:48px;

line-height:1.2;

margin:20px 0;

}



.hero-content p{

font-size:18px;

}



.hero-content a{

display:inline-block;

margin-top:20px;

background:#dc2626;

color:white;

padding:13px 30px;

border-radius:30px;

text-decoration:none;

}





/* =====================
 MAIN LAYOUT
===================== */


.home-layout{

    width:100%;

    max-width:1200px;

    margin:40px auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:minmax(0, 1fr) 300px;

    gap:25px;

    align-items:start;

}


.main-content{

min-width:0;

}




.main-content h2{

font-size:28px;

margin-bottom:30px;

}




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


.news-grid{


display:grid;


grid-template-columns:

repeat(2,1fr);


gap:25px;


}



.news-card{

background:white;

border-radius:10px;

overflow:hidden;


box-shadow:

0 8px 25px rgba(0,0,0,.08);


}



.news-card img,
.no-image{


width:100%;


height:230px;


object-fit:cover;


display:block;


}



.no-image{


background:#e5e7eb;


display:flex;


align-items:center;


justify-content:center;


font-size:35px;


font-weight:bold;


color:#334155;


}



.news-body{


padding:25px;


}



.meta{


font-size:14px;

color:#dc2626;

margin-bottom:15px;

font-weight:600;

}



.news-body h3{


font-size:21px;


line-height:1.4;


margin:0 0 15px;


}



.news-body p{


color:#64748b;


line-height:1.6;


}



.news-body a{


color:#dc2626;


font-weight:bold;


text-decoration:none;


}




/* =====================
 PAGINATION
===================== */


.pagination{

display:flex;

gap:10px;

margin:40px 0;

}



.pagination a{


width:40px;

height:40px;


display:flex;

align-items:center;

justify-content:center;


background:white;


border-radius:20%;


text-decoration:none;


color:#334155;


}



.pagination a:hover{


background:#dc2626;

color:white;


}





/* =====================
 RECENT CAROUSEL
===================== */


.carousel{


display:flex;


align-items:center;


gap:15px;


width:100%;


}



.carousel button{


width:42px;

height:42px;


border-radius:50%;


border:none;


background:#dc2626;


color:white;


cursor:pointer;


flex-shrink:0;


}



.carousel-window{


overflow:hidden;


width:100%;


}



.carousel-track{


display:flex;


gap:20px;


transition:.5s ease;


}



.slide-card{


flex:0 0 calc(33.333% - 14px);


background:white;


border-radius:10px;


padding:15px;


box-shadow:

0 8px 25px rgba(0,0,0,.08);


}



.slide-card img{


width:100%;


height:160px;


object-fit:cover;


border-radius:15px;


}



.slide-card h3{


font-size:17px;


line-height:1.4;


margin:15px 0;


}



.slide-card a{


color:#dc2626;


font-weight:bold;


text-decoration:none;


}





/* =====================
 SIDEBAR
===================== */


.sidebar-home{


width:100%;


}



.side-card{


background:white;


border-radius:20px;


padding:30px;


margin-bottom:25px;


box-shadow:

0 8px 25px rgba(0,0,0,.08);


}



.side-card h3{


display:flex;


align-items:center;


gap:10px;


margin-bottom:25px;


}



.side-card h3 i{


color:#dc2626;


}




/* CALENDAR */


.calendar{


height:130px;


background:#dc2626;


border-radius:20px;


color:white;


display:flex;


flex-direction:column;


justify-content:center;


align-items:center;


}



.calendar strong{


font-size:55px;


}



.calendar span{


font-size:17px;


}





/* YOUTUBE */


.side-card iframe{


width:100%;


height:200px;


border:0;


border-radius:15px;


margin-bottom:20px;


}





/* POPULAR */


.popular-item{


display:flex;


gap:15px;


padding:15px 0;


border-bottom:1px solid #eee;


}



.popular-item img{


width:85px;


height:65px;


object-fit:cover;


border-radius:12px;


}



.popular-item h4{


font-size:15px;


line-height:1.4;


margin:0;


}





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


@media(max-width:900px){


.home-layout{


grid-template-columns:1fr;


}



.news-grid{


grid-template-columns:1fr;


}



.hero{


height:350px;


}

.hero{

width:100%;

max-width:100vw;

overflow:hidden;

}

.hero-content h1{


font-size:32px;


}



.slide-card{


flex:0 0 85%;


}



}