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


.area-section{


background:

radial-gradient(

circle at right,

rgba(212,175,55,.13),

transparent 35%

),

#050505;



padding:

110px 25px;


}









.area-container{


max-width:1200px;


margin:auto;



display:grid;


grid-template-columns:

.9fr 1.1fr;



gap:70px;



align-items:center;


}









/* =====================
CONTENT
===================== */


.area-content h2{


font-size:

clamp(34px,4vw,56px);



line-height:1.1;



letter-spacing:-1.5px;



font-weight:900;



color:#ffffff;



margin-bottom:25px;


}








.area-content p{


font-size:17px;



line-height:1.8;



color:#bdbdbd;


}







.area-content strong{


color:#ffffff;


}









/* =====================
HIGHLIGHT BOX
===================== */


.area-highlight{


margin-top:35px;



padding:

28px;



display:flex;



gap:18px;



align-items:flex-start;



border-radius:28px;




background:

linear-gradient(

145deg,

rgba(255,255,255,.08),

rgba(255,255,255,.02)

);




border:

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



box-shadow:

0 25px 60px rgba(0,0,0,.35);


}









.area-icon{


width:46px;



height:46px;



border-radius:50%;



display:flex;



align-items:center;



justify-content:center;




background:

linear-gradient(

135deg,

#d4af37,

#fff1a8

);




color:#050505;




font-weight:900;




flex-shrink:0;


}








.area-highlight strong{


display:block;



font-size:18px;



font-weight:900;



color:#ffffff;



margin-bottom:8px;


}







.area-highlight p{


font-size:14px;



line-height:1.7;


}










/* =====================
CITY GRID
===================== */


.city-wrapper{


display:grid;



grid-template-columns:

repeat(4,1fr);



gap:16px;


}











.city-card{


height:70px;



display:flex;


align-items:center;


justify-content:center;



border-radius:20px;




background:

linear-gradient(

145deg,

rgba(255,255,255,.08),

rgba(255,255,255,.02)

);




border:

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




color:#ffffff;



font-size:15px;



font-weight:800;



text-decoration:none;




transition:.35s;


}









.city-card:hover{


transform:

translateY(-6px);




border-color:

rgba(212,175,55,.65);




box-shadow:

0 15px 35px rgba(212,175,55,.15);



color:#d4af37;


}









/* ACTIVE CITY */


.city-card.active{


background:

linear-gradient(

135deg,

#d4af37,

#fff1a8

);



color:#050505;




box-shadow:

0 15px 45px rgba(212,175,55,.35);


}










.city-card.active:hover{


color:#050505;


}









/* =====================
RESPONSIVE
===================== */


@media(max-width:950px){



.area-container{


grid-template-columns:1fr;



gap:55px;


}




.city-wrapper{


grid-template-columns:

repeat(3,1fr);


}



}










@media(max-width:520px){



.area-section{


padding:

80px 20px;


}





.city-wrapper{


grid-template-columns:

repeat(2,1fr);



gap:14px;


}






.city-card{


height:60px;



font-size:14px;



border-radius:16px;


}






.area-highlight{


padding:24px;



border-radius:22px;


}



}