/* =====================
PROBLEM PRODUK DIGITAL SEO
===================== */


.problem-section{

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

padding:110px 25px;

}




.problem-container{

max-width:1200px;

margin:auto;


display:grid;

grid-template-columns:
.9fr 1.1fr;


gap:70px;


align-items:center;

}







/* CONTENT */


.problem-content h2{

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


line-height:1.1;

letter-spacing:-1.5px;


font-weight:900;


color:white;


margin-bottom:25px;

}




.problem-content p{

font-size:17px;

line-height:1.8;

color:#bdbdbd;

}




.problem-content strong{

color:white;

}









/* HIGHLIGHT */


.problem-highlight{

margin-top:35px;


padding:28px;


display:flex;

gap:18px;


border-radius:28px;


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


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


color:#ddd;


line-height:1.7;

}





.problem-highlight span{

width:42px;

height:42px;

min-width:42px;


display:flex;

align-items:center;

justify-content:center;


border-radius:50%;


background:#d4af37;


color:#050505;


font-weight:900;

}









/* CARDS */


.problem-list{

display:grid;

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


gap:24px;

}






.problem-card{

padding:32px;


border-radius:30px;


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


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


transition:.35s;

}







.problem-card:hover{

transform:
translateY(-8px);


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

}






.problem-icon{

width:50px;

height:50px;


display:flex;

align-items:center;

justify-content:center;


border-radius:18px;


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


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


color:#d4af37;


font-weight:900;


font-size:22px;


margin-bottom:25px;

}








.problem-card h3{

font-size:21px;

font-weight:900;

color:white;

margin-bottom:15px;

}






.problem-card p{

font-size:15px;

line-height:1.7;

color:#aaa;

}









/* RESPONSIVE */


@media(max-width:900px){


.problem-container{

grid-template-columns:1fr;

gap:55px;

}



}





@media(max-width:600px){


.problem-section{

padding:

80px 20px;

}



.problem-list{

grid-template-columns:1fr;

}


}