/* =====================
STUDI KASUS KURSUS SEO
===================== */


.case-course-section{

background:
radial-gradient(
circle at right,
rgba(212,175,55,.12),
transparent 35%
),
#050505;

padding:110px 25px;

}





.case-course-container{

max-width:1200px;

margin:auto;

}







/* HEADING */


.case-course-heading{

max-width:850px;

margin-bottom:70px;

}





.case-course-heading h2{

font-size:
clamp(34px,4vw,56px);

line-height:1.1;

letter-spacing:-1.5px;

font-weight:900;

color:white;

margin-bottom:25px;

}





.case-course-heading p{

font-size:17px;

line-height:1.8;

color:#bdbdbd;

}




.case-course-heading strong{

color:white;

}








/* FEATURE */


.case-course-feature{

display:grid;

grid-template-columns:
.8fr 1.2fr;

gap:28px;

margin-bottom:30px;

}





.case-course-result,
.case-course-info{

padding:45px;


border-radius:34px;


background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.02)
);


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

}






.case-course-result span{

font-size:15px;

font-weight:900;

color:#d4af37;

}






.case-course-result strong{

display:block;

font-size:
clamp(60px,8vw,100px);

line-height:1;

font-weight:900;

color:white;

margin:20px 0;

}







.case-course-info h3{

font-size:30px;

font-weight:900;

color:white;

margin-bottom:20px;

}






.case-course-info p,
.case-course-result p{

font-size:16px;

line-height:1.8;

color:#aaa;

}









/* TAG */


.case-course-tags{

display:flex;

gap:12px;

flex-wrap:wrap;

margin-top:30px;

}






.case-course-tags span{

padding:

9px 15px;


border-radius:30px;


background:
rgba(212,175,55,.12);


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


color:#d4af37;


font-size:13px;


font-weight:800;

}









/* GRID */


.case-course-grid{

display:grid;

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

gap:24px;

}






.case-course-card{

padding:32px;


border-radius:28px;


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


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


transition:.35s;

}






.case-course-card:hover{

transform:
translateY(-7px);


border-color:
rgba(212,175,55,.55);

}







.case-course-card span{

display:block;

font-size:18px;

font-weight:900;

color:#d4af37;

margin-bottom:20px;

}







.case-course-card h3{

font-size:20px;

font-weight:900;

color:white;

margin-bottom:15px;

}






.case-course-card p{

font-size:15px;

line-height:1.7;

color:#aaa;

}








/* NOTE */


.case-course-note{

margin-top:40px;


padding:28px;


border-radius:28px;


background:
rgba(212,175,55,.08);


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


font-size:16px;

line-height:1.7;

color:#ddd;

}








/* RESPONSIVE */


@media(max-width:950px){


.case-course-feature{

grid-template-columns:1fr;

}



.case-course-grid{

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

}


}





@media(max-width:600px){


.case-course-section{

padding:

80px 20px;

}



.case-course-grid{

grid-template-columns:1fr;

}



.case-course-result,
.case-course-info{

padding:32px;

}


}