*{
box-sizing:border-box;
}


body{

margin:0;
font-family:Arial,sans-serif;
background:#f5f7fa;
color:#333;

}


.container{

width:90%;
max-width:1200px;
margin:auto;

}


/* ================= HEADER ================= */

header{

background:#111;
padding:15px 0;

}


.logo{

display:flex;
align-items:center;
gap:15px;
color:white;
font-size:22px;
font-weight:bold;

}


.logo img{

width:60px;
height:60px;
object-fit:contain;

}


.navbar{

display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;

}


.navbar a{

color:white;
text-decoration:none;
padding:8px 12px;

}



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

footer{

background:#111;
color:white;
padding:30px 0;
margin-top:50px;

}



/* ================= UMUM ================= */


.title{

text-align:center;
font-size:32px;
margin:40px 0;

}


.cards{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;

}



.card{

position:relative;
background:white;
padding:15px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,.1);
transition:.3s;
overflow:hidden;

}


.card:hover{

transform:translateY(-5px);

}



/* ================= PRODUK ================= */


.card img,
.produk-list-img{


width:100%;
height:220px;
object-fit:contain;
background:white;
padding:10px;
border-radius:12px;

}


.badge{

position:absolute;
top:20px;
left:20px;
background:#0066ff;
color:white;
padding:6px 15px;
border-radius:20px;
font-size:12px;

}



.btn,
.btn-detail{

display:inline-block;
background:#0066ff;
color:white;
padding:10px 20px;
border-radius:8px;
text-decoration:none;

}



.filter{

text-align:center;
margin:30px 0;

}


.filter a{

background:#111;
color:white;
padding:10px 15px;
border-radius:20px;
text-decoration:none;
margin:5px;
display:inline-block;

}



/* ================= TESTIMONI ================= */


.testimoni{

background:#f5f7fb;
padding:50px 0;

}



.testimoni-card{

text-align:center;

}


.foto-testimoni{

width:90px;
height:90px;
border-radius:50%;
object-fit:cover;
margin-bottom:15px;

}



.bintang{

font-size:26px;
color:#ffc107;
margin-bottom:10px;

}



.pekerjaan{

color:#777;
font-size:14px;

}



.isi-testimoni{

font-style:italic;
line-height:1.6;

}




/* ================= PORTOFOLIO ================= */


.portfolio-page{

padding:50px 0;
background:#f5f7fb;

}



.sub-title{

text-align:center;
color:#666;
margin-bottom:30px;

}



.portfolio-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;

}



.portfolio-card{

background:white;
border-radius:15px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,.1);
transition:.3s;

}



.portfolio-card:hover{

transform:translateY(-5px);

}



.portfolio-img{

width:100%;
height:220px;
object-fit:cover;

}



.portfolio-content{

padding:20px;

}



.portfolio-content h3{

color:#0066ff;

}



.lokasi{

font-weight:bold;
color:#555;

}



/* ================= DETAIL PORTOFOLIO ================= */


.detail-portofolio{

padding-top:80px;
padding-bottom:50px;

}



.detail-box{

background:white;
padding:30px;
margin-top:30px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,.1);

}



.detail-img{

width:100%;
height:450px;
object-fit:contain;
background:#f5f5f5;
border-radius:15px;
margin-bottom:25px;

}



.detail-box h1{

color:#0066ff;

}




/* ================= WHATSAPP ================= */


.wa-float{

position:fixed;
right:20px;
bottom:20px;
background:#25D366;
color:white;
padding:15px 20px;
border-radius:50px;
text-decoration:none;
font-weight:bold;

}



/* ================= ADMIN ================= */


.sidebar{

position:fixed;
left:0;
top:0;
width:230px;
height:100vh;
background:#111827;
padding:20px;
color:white;
z-index:1000;

}



.logo-admin{

text-align:center;
margin-bottom:35px;

}



.logo-admin img{

width:100px;
height:100px;
object-fit:contain;
background:white;
border-radius:15px;

}



.sidebar ul{

list-style:none;
padding:0;

}



.sidebar a{

display:block;
padding:12px;
color:white;
text-decoration:none;
border-radius:10px;

}



.sidebar a:hover{

background:#0066ff;

}



.content-admin{

margin-left:250px;
padding:30px;

}



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


@media(max-width:768px){


.portfolio-grid{

grid-template-columns:1fr;

}



.detail-img{

height:300px;

}



.sidebar{

width:100px;

}


.content-admin{

margin-left:120px;

}



}



@media(max-width:600px){


.container{

width:92%;

}


.cards{

grid-template-columns:1fr;

}


.navbar{

flex-direction:column;
align-items:center;

}


.card img{

height:180px;

}



}

/* ================= HOME MODERN MCR SOLUTION ================= */


.hero{

background:
linear-gradient(135deg,#0066ff,#00c6ff);

color:white;

padding:80px 0;

}


.hero-content{

text-align:center;

}


.hero h1{

font-size:45px;
margin-bottom:20px;

}


.hero p{

font-size:20px;
max-width:700px;
margin:auto;
line-height:1.6;

}



.hero .btn{

margin-top:30px;

background:white;

color:#0066ff;

font-weight:bold;

padding:14px 30px;

border-radius:30px;

}





/* LAYANAN */


.cards .card{


border-top:5px solid #0066ff;

transition:.3s;


}



.cards .card:nth-child(2){

border-color:#00b894;

}


.cards .card:nth-child(3){

border-color:#ff9800;

}


.cards .card:nth-child(4){

border-color:#e91e63;

}




.card h3{

font-size:22px;

color:#0066ff;

}





.card p{

line-height:1.7;

color:#555;

}



/* KEUNGGULAN */


.about-home{

background:white;

padding:50px 0;

}



.about-home h2{

text-align:center;

color:#0066ff;

}



.about-home ul{

max-width:600px;

margin:auto;

font-size:18px;

line-height:2;

}




/* TESTIMONI */


.testimoni-card{

border-top:5px solid #ffc107;

}




/* CTA */


.cta{


background:

linear-gradient(135deg,#111827,#0066ff);

color:white;

text-align:center;

padding:60px 0;

margin-top:50px;


}



.cta h2{

font-size:35px;

}



.cta .btn{


background:white;

color:#0066ff;

font-weight:bold;


}



/* WHATSAPP */


.wa-float{


z-index:999;

box-shadow:0 5px 15px rgba(0,0,0,.3);


}


.wa-float:hover{


transform:scale(1.1);


}




@media(max-width:600px){


.hero h1{

font-size:30px;

}


.hero p{

font-size:16px;

}


}

/* ==================================================
   MCR SOLUTION CORPORATE HOMEPAGE
================================================== */


/* HERO */

.hero-premium{

height:600px;

background:
linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.65)
),
url('../images/hero.jpg');

background-size:cover;

background-position:center;

position:relative;

}


.hero-overlay{

height:100%;

display:flex;

align-items:center;

}



.hero-text{

max-width:700px;

color:white;

}



.hero-text h1{

font-size:52px;

line-height:1.2;

margin-bottom:25px;

font-weight:700;

}



.hero-text p{

font-size:20px;

line-height:1.7;

margin-bottom:35px;

}




.btn-primary{

display:inline-block;

background:#0066ff;

color:white;

padding:15px 35px;

border-radius:30px;

text-decoration:none;

font-weight:bold;

margin-right:10px;

}



.btn-primary:hover{

background:#004dcc;

}



.btn-secondary{

display:inline-block;

border:2px solid white;

color:white;

padding:13px 30px;

border-radius:30px;

text-decoration:none;

font-weight:bold;

}





/* STATISTIK */


.statistik{

background:white;

padding:40px 0;

}



.stat-box{


display:grid;

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

gap:20px;

text-align:center;

}



.stat-box h2{

font-size:40px;

color:#0066ff;

margin:0;

}



.stat-box p{

color:#555;

}





/* LAYANAN */


.layanan-home{

padding:70px 0;

background:#f5f7fb;

}



.layanan-home h2{

text-align:center;

font-size:36px;

color:#111;

}



.sub{

text-align:center;

color:#777;

margin-bottom:40px;

}




.card-home{


background:white;

padding:35px 25px;

border-radius:20px;

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

transition:.3s;

text-align:center;

border-bottom:5px solid #0066ff;


}



.card-home:hover{

transform:translateY(-10px);

}



.card-home h3{

font-size:24px;

color:#0066ff;

}





.card-home p{

line-height:1.7;

color:#555;

}





/* KEUNGGULAN */


.keunggulan{


background:
linear-gradient(135deg,#111827,#0066ff);

color:white;

padding:70px 0;

}



.keunggulan h2{

text-align:center;

font-size:36px;

margin-bottom:40px;

}



.keunggulan-grid{


display:grid;

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

gap:20px;


}



.keunggulan-grid div{


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

padding:25px;

border-radius:15px;

font-size:18px;

text-align:center;

}





/* TESTIMONI */


.testimoni{

padding:70px 0;

background:#f5f7fb;

}



.testimoni-card{


background:white;

padding:30px;

border-radius:20px;

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

text-align:center;


}



.bintang{

font-size:30px;

color:#ffc107;

}





/* CTA */


.cta-premium{


padding:80px 0;

background:

linear-gradient(
135deg,
#0066ff,
#00c6ff
);


color:white;

text-align:center;


}



.cta-premium h2{

font-size:40px;

}





.cta-premium .btn-primary{


background:white;

color:#0066ff;

}





/* RESPONSIVE */


@media(max-width:900px){


.stat-box{

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

}



.keunggulan-grid{

grid-template-columns:1fr;

}



.hero-text h1{

font-size:38px;

}



}



@media(max-width:600px){


.hero-premium{

height:500px;

}



.hero-text h1{

font-size:30px;

}



.hero-text p{

font-size:16px;

}



.stat-box{

grid-template-columns:1fr;

}



}

/* ================= PARTNER BRAND ================= */


.partner{

padding:70px 0;

background:white;

}



.partner h2{

text-align:center;

font-size:36px;

margin-bottom:10px;

}



.partner-grid{


display:grid;

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

gap:25px;

margin-top:40px;


}



.partner-box{


height:120px;

background:white;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

display:flex;

align-items:center;

justify-content:center;

padding:20px;

transition:.3s;


}



.partner-box:hover{


transform:translateY(-8px);

}



.partner-box img{


max-width:100%;

max-height:70px;

object-fit:contain;


}





@media(max-width:900px){


.partner-grid{

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

}


}



@media(max-width:600px){


.partner-grid{

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

}


}

/* ================= STATISTIK BUBBLE ================= */


.statistik{

padding:60px 0;
background:#f5f7fb;

}



.stat-box{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}



.stat-box div{


background:white;

height:170px;

border-radius:50%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

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

transition:.3s;

border:5px solid #0066ff;


}



.stat-box div:hover{


transform:translateY(-10px) scale(1.05);

box-shadow:
0 15px 40px rgba(0,102,255,.25);


}



.stat-box h2{


font-size:45px;

color:#0066ff;

margin:0;

font-weight:bold;


}



.stat-box p{


margin-top:10px;

font-size:16px;

color:#555;

text-align:center;


}



/* warna berbeda */


.stat-box div:nth-child(2){

border-color:#00b894;

}


.stat-box div:nth-child(2) h2{

color:#00b894;

}



.stat-box div:nth-child(3){

border-color:#ff9800;

}


.stat-box div:nth-child(3) h2{

color:#ff9800;

}



.stat-box div:nth-child(4){

border-color:#e91e63;

}


.stat-box div:nth-child(4) h2{

color:#e91e63;

}




@media(max-width:900px){


.stat-box{

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

}



}



@media(max-width:600px){


.stat-box{

grid-template-columns:1fr;

}



}

/* =====================================================
   MCR SOLUTION MODERN CORPORATE TEMPLATE
===================================================== */


/* GLOBAL */

body{
font-family:'Poppins',Arial,sans-serif;
background:#f6f8fc;
color:#333;
}


.container{
width:90%;
max-width:1200px;
margin:auto;
}



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


.hero-premium{

height:650px;

background:
linear-gradient(
90deg,
rgba(0,20,60,.85),
rgba(0,102,255,.45)
),
url('../images/hero.jpg');

background-size:cover;

background-position:center;

display:flex;

align-items:center;

}



.hero-text{

max-width:750px;

color:white;

}



.hero-text h1{

font-size:55px;

font-weight:800;

line-height:1.2;

margin-bottom:20px;

}



.hero-text p{

font-size:20px;

line-height:1.7;

color:#eee;

}



.btn-primary,
.btn-secondary{

padding:15px 35px;

border-radius:50px;

font-weight:bold;

display:inline-block;

margin-top:25px;

transition:.3s;

}



.btn-primary{

background:#00c6ff;

color:white;

}



.btn-primary:hover{

background:#0066ff;

transform:translateY(-3px);

}



.btn-secondary{

border:2px solid white;

color:white;

margin-left:10px;

}





/* ================= STATISTIK ================= */


.statistik{

margin-top:-80px;

position:relative;

z-index:5;

}



.stat-box{


display:grid;

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

gap:25px;

}



.stat-box div{


background:white;

padding:35px 20px;

border-radius:25px;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,.12);

transition:.3s;

}



.stat-box div:hover{

transform:translateY(-10px);

}



.stat-box h2{

font-size:45px;

color:#0066ff;

margin:0;

}



.stat-box p{

font-size:16px;

color:#666;

}





/* ================= SECTION TITLE ================= */


.layanan-home,
.partner,
.testimoni{

padding:80px 0;

}



.layanan-home h2,
.partner h2,
.testimoni h2{


text-align:center;

font-size:38px;

font-weight:700;

color:#111;

}



.sub{

text-align:center;

color:#777;

margin-bottom:40px;

}





/* ================= SERVICE CARD ================= */


.cards{

display:grid;

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

gap:25px;

}



.card-home{


background:white;

padding:35px 25px;

border-radius:25px;

text-align:center;

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

transition:.3s;

}



.card-home:hover{

transform:translateY(-12px);

box-shadow:0 20px 40px rgba(0,102,255,.2);

}



.card-home h3{

font-size:22px;

color:#0066ff;

}





/* ================= KEUNGGULAN ================= */


.keunggulan{


padding:80px 0;

background:

linear-gradient(
135deg,
#111827,
#0066ff
);

color:white;

}



.keunggulan h2{

text-align:center;

font-size:38px;

}



.keunggulan-grid{


display:grid;

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

gap:20px;

margin-top:40px;

}



.keunggulan-grid div{


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

padding:25px;

border-radius:20px;

text-align:center;

font-size:18px;

}





/* ================= PARTNER ================= */


.partner-grid{


display:grid;

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

gap:20px;

margin-top:40px;

}



.partner-box{


background:white;

height:120px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

padding:20px;

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

}



.partner-box img{

max-width:100%;

max-height:70px;

object-fit:contain;

}





/* ================= TESTIMONI ================= */


.testimoni{

background:#f5f7fb;

}



.testimoni-card{


background:white;

border-radius:25px;

padding:30px;

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

}



.bintang{

font-size:28px;

color:#ffc107;

}





/* ================= CTA ================= */


.cta-premium{


padding:90px 0;

background:

linear-gradient(
135deg,
#0066ff,
#00c6ff
);

text-align:center;

color:white;

}



.cta-premium h2{

font-size:42px;

}





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


@media(max-width:1000px){


.cards{

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

}


.stat-box{

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

}


.partner-grid{

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

}


}



@media(max-width:600px){


.hero-premium{

height:500px;

}



.hero-text h1{

font-size:32px;

}



.cards,
.stat-box,
.partner-grid{

grid-template-columns:1fr;

}


}

/* LOGIN ADMIN BUTTON */

.login-admin-footer{

text-align:center;

margin-top:25px;

}



.login-admin-footer a{

display:inline-block;

background:#0066ff;

color:white;

padding:12px 25px;

border-radius:30px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}



.login-admin-footer a:hover{

background:#004dcc;

transform:translateY(-3px);

}