*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI, sans-serif;
}


/* ================= BACKGROUND ================= */

body{

background:
linear-gradient(
135deg,
#0f172a,
#1e3a8a,
#2563eb,
#0ea5e9
);

min-height:100vh;
color:white;

}

body::before{
content:"";
position:fixed;
width:400px;
height:400px;
background:#38bdf8;
filter:blur(150px);
top:-100px;
left:-100px;
opacity:0.3;
}

body::after{
content:"";
position:fixed;
width:400px;
height:400px;
background:#a78bfa;
filter:blur(150px);
bottom:-100px;
right:-100px;
opacity:0.3;
}



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

.hero{
padding:40px 10px 40px;
max-width:1100px;
margin:auto;
position:relative;
}


/* logo */

.logo-center{

position:absolute;

left:50%;

top:0;

transform:translate(-50%, -50%);

z-index:20;

}

.logo-center img{

width:140px;
height:140px;

border-radius:50%;

background:white;
padding:10px;

box-shadow:
0 20px 40px rgba(0,0,0,0.3),
0 0 25px rgba(56,189,248,0.5);

}

/* ================= GLASS ================= */

.glass{

background:rgba(255,255,255,0.15);

border:1px solid rgba(255,255,255,0.2);

backdrop-filter:blur(12px);

border-radius:18px;

padding:12px 20px;

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

}


/* info */

.info-row{
align-items:center;
}

.info-box{
text-align:left;
padding:10px 20px;
}

.info-box:first-child{
border-right:1px solid rgba(255,255,255,0.2);
}

.info-label{
font-size:13px;
opacity:0.8;
}

.info-name{
font-size:16px;
font-weight:600;
}

.info-sub{
font-size:13px;
opacity:0.9;
}



/* ================= MAIN CARD ================= */

.main-card{

background:#f8fafc;

margin-top:60px;

border-radius:25px;

padding:110px 40px 50px 40px;

box-shadow:
0 20px 60px rgba(0,0,0,0.25);

position:relative;

}

.content-wrap{

max-width:1100px;

width:100%;

}

.modern-card,
.problem-card,
.chart-container,
.law-container{

color:#1e293b;

}

/* ================= MODERN CARD ================= */

.modern-card{

background:white;

border-radius:20px;

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

margin-bottom:30px;

overflow:hidden;
transition:0.2s;

}

.card-header-modern{

display:flex;

align-items:center;

gap:10px;

background:#eef2ff;

padding:12px 18px;

border-bottom:1px solid #e2e8f0;

}

.icon-title{

font-size:20px;

color:#4f46e5;

}

.card-header-modern h2{

font-size:18px;

margin:0;

color:#1e293b;

font-weight:700;

}

.card-body-modern{

padding:20px 25px;

color:#1e293b;

line-height:1.7;

font-size:15px;

}

/* ================= DASHBOARD CARD ================= */

.dash-card{

background:white;

border-radius:20px;

padding:20px;

box-shadow:0 12px 25px rgba(0,0,0,0.1);

display:flex;

flex-direction:column;

gap:10px;

height:100%;

}


.dash-card h3{

font-size:18px;

font-weight:700;

color:#1e293b;

}


.dash-card p{

font-size:14px;

color:#475569;

}


/* DARK CARD */

.dash-card.dark{

background:linear-gradient(
135deg,
#1e3a8a,
#2563eb,
#06b6d4
);

color:white;

}


.dash-card.dark h3{

color:white;

}

.dash-card.dark p{

color:#e2e8f0;

}


/* chart */

.dash-chart{

background:white;

border-radius:12px;

padding:10px;

}

.dash-card.dark .dash-chart{

background:rgba(255,255,255,0.15);

}


.dash-chart img{

width:100%;

border-radius:8px;

}


/* ================= GRADIENT TITLE ================= */

.section-gradient-title{

display:flex;

align-items:center;

gap:10px;

font-weight:700;

font-size:17px;

color:white;

padding:12px 18px;

border-radius:14px;

margin:30px 0 12px 0;

background:linear-gradient(
135deg,
#4f46e5,
#3b82f6,
#06b6d4
);

box-shadow:0 8px 20px rgba(0,0,0,0.15);

}

.section-gradient-title i{

font-size:18px;

color:white;

opacity:0.95;

}

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

.content-box{

width:100%;

background:white;

border-radius:20px;

padding:25px;

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

margin-bottom:30px;

}
/* ================= CHART ================= */

.chart-container{

background:white;

border-radius:18px;

padding:20px;

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

margin-bottom:0;

color:#1e293b;

height:100%;

display:flex;

flex-direction:column;

gap:10px;

}

.chart-container img{

width:100%;
height:auto;
border-radius:10px;

}

.chart-container ul{

margin-top:10px;

padding-left:18px;

font-size:14px;

color:#475569;

}


/* ================= PERMASALAHAN ================= */

.problem-row{

display:grid;

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

gap:18px;

margin-bottom:30px;

}

.problem-card{

background:white;

padding:18px;

border-radius:16px;

box-shadow:0 8px 18px rgba(0,0,0,0.08);

transition:0.2s;

height:100%;

display:flex;

flex-direction:column;

}

.problem-card h5{

color:#1e293b;

font-weight:700;

margin-top:5px;

}

.problem-card p{

color:#475569;

font-size:14px;

margin-top:4px;

}

.problem-card:hover{

transform:translateY(-5px);

box-shadow:0 12px 25px rgba(0,0,0,0.15);

}

.problem-card i{

font-size:26px;

color:#2563eb;

margin-bottom:8px;

}


/* ================= 2 COLUMN LAYOUT ================= */

.two-col-section{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin-top:25px;

align-items:stretch;

}

.two-col-section > div{

display:flex;

flex-direction:column;

}

/* ================= DASAR HUKUM ================= */

.law-section{

display:grid;

grid-template-columns:200px 1fr;

gap:20px;

margin-top:25px;

}



/* LEFT */

.law-left{

background:linear-gradient(
135deg,
#4f46e5,
#3b82f6,
#06b6d4
);

border-radius:18px;

color:white;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

padding:18px;

box-shadow:0 8px 18px rgba(0,0,0,0.15);

min-height:120px;

}

.law-left i{

font-size:22px;

margin-bottom:6px;

}

.law-left h3{

font-size:18px;

margin:0;

}

/* RIGHT */

.law-right{

background:white;

border-radius:18px;

padding:18px 20px;

box-shadow:0 8px 18px rgba(0,0,0,0.08);

}

.law-right ul{

list-style:none;

padding:0;

margin:0;

}

.law-right li{

margin-bottom:10px;

padding-bottom:8px;

border-bottom:1px solid #e5e7eb;

}

.law-right b{

color:#2563eb;

display:block;

}

.law-right span{

font-size:14px;

color:#475569;

}


/* responsive */

@media(max-width:900px){

.law-section{

grid-template-columns:1fr;

}

}

/* ================= QUOTE ================= */

.quote{

background:#f1f5f9;

padding:12px 15px;

border-left:4px solid #3b82f6;

border-radius:8px;

font-style:italic;

margin-top:10px;

}

.quote span{

display:block;

font-size:13px;

margin-top:5px;

opacity:0.8;

}

/* badge */

.badge-soft{

background:rgba(255,255,255,0.15);

padding:8px 18px;

border-radius:20px;

display:inline-block;

margin-bottom:10px;

}


/* title */

.title-big{
font-size:38px;
font-weight:600;
line-height:1.25;
margin-bottom:8px;
}

.subtitle{
font-size:34px;
font-weight:700;
margin-top:5px;
}

.text-highlight{
color:#e3ac2d;
}

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

@media(max-width:768px){

.container{
padding-left:12px;
padding-right:12px;
}

.hero{
padding:20px 10px;
text-align:left;
}

.title-big{
font-size:22px;
line-height:1.25;
padding-right:80px;
}

.subtitle{
font-size:20px;
padding-right:80px;
}

.info-name{
font-size:14px;
font-weight:600;
}

.main-card{

margin-top:40px;
padding:90px 12px 30px 12px;

}

.logo-center img{

width:90px;
height:90px;

}

.badge-soft{
font-size:12px;
padding:6px 12px;
}

/* GLASS */

.glass{
padding:10px;
}

/* INFO */

.info-row{
flex-direction:column;
}

.info-box{
padding:10px;
text-align:left;
}

.info-box:first-child{
border-right:none;
border-bottom:1px solid rgba(255,255,255,0.2);
}

/* CARD */

.card-body-modern{
padding:15px;
font-size:14px;
}

/* PROBLEM */

.problem-row{
grid-template-columns:1fr;
gap:12px;
}

/* 2 COL */

.two-col-section{
grid-template-columns:1fr;
gap:15px;
}

/* LAW */

.law-section{
grid-template-columns:1fr;
}

/* DASH */

.dash-card{
padding:12px;
}

.dash-card h3{
font-size:16px;
}

/* CHART */

.dash-chart img{
width:100%;
height:auto;
}

/* FOOTER */

.footer{
padding:20px;
font-size:14px;
}

}

/* ================= SMALL PHONE ================= */

@media(max-width:480px){

.title-big{
font-size:22px;
line-height:1.25;
padding-right:80px;
}

.subtitle{
font-size:22px;
padding-right:80px;
}


.info-name{
font-size:14px;
font-weight:600;
}


.main-card{

padding-top:80px;

}

.logo-center img{

width:75px;
height:75px;

}

.card-body-modern{
font-size:13px;
}

}


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

.footer{

background:#020617;

padding:40px;

text-align:center;

color:white;

margin-top:40px;

}