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

.dashboard-hero{

position:relative;

padding:260px 0 100px;

background:

linear-gradient(rgba(5,28,70,.90),rgba(5,28,70,.88)),
url("../images/bannernew.png");

background-size:cover;

background-position:center;

overflow:hidden;

}

.dashboard-overlay{

position:absolute;

inset:0;

background:

radial-gradient(circle at right,
rgba(0,136,255,.30),
transparent 45%);

}

.dashboard-hero .container{

position:relative;

z-index:2;

}

.dashboard-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 24px;

border-radius:50px;

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

backdrop-filter:blur(18px);

color:white;

font-weight:600;

}

.dashboard-hero h1{

font-size:70px;

font-weight:800;

color:white;

margin:30px 0 20px;

line-height:1.1;

}

.dashboard-hero p{

font-size:21px;

color:#dce7ff;

max-width:650px;

line-height:1.9;

}

.dashboard-filter{

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

backdrop-filter:blur(25px);

border-radius:25px;

padding:35px;

border:1px solid rgba(255,255,255,.12);

}

.dashboard-filter label{

display:block;

color:white;

margin-bottom:15px;

font-weight:600;

}

.dashboard-filter select{

height:60px;

border-radius:15px;

}

/*==========================================
SUMMARY
==========================================*/

.summary-section{

margin-top:-70px;

position:relative;

z-index:20;

}

.summary-card{

background:white;

border-radius:25px;

padding:30px;

display:flex;

align-items:center;

justify-content:space-between;

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

transition:.35s;

height:100%;

}

.summary-card:hover{

transform:translateY(-8px);

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

}

.summary-icon{

width:72px;

height:72px;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

color:white;

font-size:30px;

}

.summary-card h2{

margin:0;

font-weight:800;

font-size:34px;

}

.summary-card span{

color:#64748b;

font-size:15px;

}

.summary-growth{

font-size:14px;

font-weight:700;

padding:8px 14px;

border-radius:30px;

}

.summary-growth.success{

background:#dcfce7;

color:#16a34a;

}

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

@media(max-width:992px){

.dashboard-hero{

padding:150px 0 100px;

text-align:center;

}

.dashboard-hero h1{

font-size:46px;

}

.dashboard-filter{

margin-top:40px;

}

}

@media(max-width:768px){

.summary-card{

flex-direction:column;

text-align:center;

gap:20px;

}

.dashboard-hero h1{

font-size:38px;

}

.dashboard-hero p{

font-size:17px;

}

}

/*==========================================
7 ASPEK PEMDI
==========================================*/

.aspect-section{

padding:90px 0;

background:#ffffff;

}

.section-header{

text-align:center;

margin-bottom:50px;

}

.section-badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 22px;

background:#e8f1ff;

color:#0d6efd;

border-radius:50px;

font-weight:600;

margin-bottom:20px;

}

.section-title{

font-size:42px;

font-weight:800;

margin-bottom:15px;

color:#071D43;

}

.section-header p{

max-width:700px;

margin:auto;

color:#64748b;

font-size:18px;

}

.aspect-card{

background:#fff;

padding:35px;

border-radius:25px;

box-shadow:0 20px 45px rgba(0,0,0,.06);

}

.aspect-item{

margin-bottom:28px;

}

.aspect-item:last-child{

margin-bottom:0;

}

.aspect-item strong{

font-size:16px;

color:#1e293b;

}

.aspect-item span{

font-weight:700;

color:#0d6efd;

}

.progress{

height:12px;

border-radius:20px;

background:#edf2f7;

overflow:hidden;

}

.progress-bar{

border-radius:20px;

transition:1.2s;

}

.score-card{

background:

linear-gradient(135deg,#0d6efd,#003f88);

border-radius:25px;

padding:45px;

text-align:center;

color:white;

height:100%;

display:flex;

flex-direction:column;

justify-content:center;

box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.score-circle{

width:170px;

height:170px;

margin:auto;

border-radius:50%;

border:8px solid rgba(255,255,255,.25);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

margin-bottom:25px;

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

backdrop-filter:blur(15px);

}

.score-circle h1{

font-size:60px;

font-weight:800;

margin:0;

line-height:1;

}

.score-circle small{

font-size:20px;

opacity:.8;

}

.score-card h4{

margin-bottom:15px;

font-weight:700;

}

.score-card p{

color:#d9e8ff;

line-height:1.8;

margin-bottom:25px;

}

.level-badge{

display:inline-block;

padding:10px 24px;

border-radius:40px;

background:#fff;

color:#0d6efd;

font-weight:700;

font-size:15px;

}

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

.analytics-section{

background:#ffffff;

padding:90px 0;

}

.chart-card{

background:white;

border-radius:24px;

padding:30px;

box-shadow:0 15px 35px rgba(0,0,0,.06);

height:100%;

transition:.3s;

}

.chart-card:hover{

transform:translateY(-5px);

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

}

.card-title-custom{

display:flex;

align-items:center;

gap:12px;

font-size:20px;

font-weight:700;

margin-bottom:30px;

color:#071D43;

}

.card-title-custom i{

font-size:24px;

color:#1967FF;

}

#trendChart,
#radarChart,
#userChart,
#serviceChart{

min-height:340px;

}

/*==========================================
INFRASTRUCTURE
==========================================*/

.infra-section{

background:#f5f8fd;

padding:100px 0;

}

.infra-card{

background:white;

border-radius:25px;

padding:35px;

text-align:center;

box-shadow:0 20px 45px rgba(0,0,0,.06);

transition:.35s;

height:100%;

position:relative;

overflow:hidden;

}

.infra-card:hover{

transform:translateY(-8px);

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

}

.infra-card::before{

content:"";

position:absolute;

top:0;

left:0;

height:5px;

width:100%;

background:linear-gradient(90deg,#1967FF,#4db6ff);

}

.infra-icon{

width:80px;

height:80px;

margin:auto;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

color:white;

margin-bottom:25px;

}

.infra-card h2{

font-size:40px;

font-weight:800;

margin-bottom:10px;

}

.infra-card span{

display:block;

color:#64748b;

margin-bottom:20px;

}

.status{

display:inline-block;

padding:8px 18px;

border-radius:30px;

font-size:13px;

font-weight:700;

letter-spacing:1px;

}

.online{

background:#DCFCE7;

color:#16A34A;

}

.secure{

background:#DBEAFE;

color:#2563EB;

}

.resource-card{

background:white;

padding:35px;

border-radius:25px;

box-shadow:0 20px 40px rgba(0,0,0,.06);

height:100%;

}

.resource-card h5{

display:flex;

justify-content:space-between;

font-size:17px;

font-weight:600;

margin-bottom:12px;

}

.progress{

height:10px;

border-radius:30px;

overflow:hidden;

}

/*==========================================
ECOSYSTEM
==========================================*/

.ecosystem-dashboard{

background:#ffffff;

padding:100px 0;

}

.search-app{

background:white;

border-radius:18px;

display:flex;

align-items:center;

padding:0 20px;

height:55px;

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

}

.search-app i{

font-size:20px;

color:#1967FF;

margin-right:15px;

}

.search-app input{

border:none;

width:100%;

outline:none;

background:transparent;

}

.app-card{

background:white;

border-radius:24px;

padding:35px;

text-align:center;

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

transition:.35s;

position:relative;

overflow:hidden;

height:100%;

}

.app-card:hover{

transform:translateY(-10px);

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

}

.app-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#1967FF,#4DB6FF);

}

.app-icon{

width:85px;

height:85px;

margin:auto;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

background:#EEF5FF;

margin-bottom:25px;

}

.app-icon i{

font-size:38px;

color:#1967FF;

}

.app-card h5{

font-weight:700;

margin-bottom:10px;

}

.app-card p{

color:#64748B;

font-size:14px;

min-height:45px;

}

.app-card .badge{

padding:10px 20px;

font-size:13px;

border-radius:30px;

}

.app-card:hover .app-icon{

transform:rotate(-8deg) scale(1.1);

transition:.35s;

}

.app-card:hover h5{

color:#1967FF;

}

.app-card:hover .badge{

transform:scale(1.08);

transition:.3s;

}

/*======================================================
COMMAND CENTER
======================================================*/

.command-center{

margin-top:-60px;

position:relative;

z-index:50;

}

.command-wrapper{

background:#ffffff;

border-radius:25px;

padding:25px;

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

}

.command-title{

display:flex;

align-items:center;

gap:12px;

margin-bottom:25px;

font-size:22px;

font-weight:700;

color:#0f172a;

}

.command-title i{

font-size:28px;

color:#2563eb;

}

.command-items{

display:grid;

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

gap:20px;

}

.command-item{

border-radius:18px;

padding:20px;

display:flex;

align-items:center;

gap:15px;

transition:.35s;

cursor:pointer;

border:1px solid #edf2f7;

background:#fff;

}

.command-item:hover{

transform:translateY(-6px);

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

}

.command-item i{

width:55px;

height:55px;

border-radius:15px;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

color:white;

}

.command-item small{

display:block;

font-size:13px;

color:#64748b;

}

.command-item h6{

margin-top:4px;

margin-bottom:0;

font-size:15px;

font-weight:700;

}

/* STATUS */

.command-item.success i{

background:#16a34a;

}

.command-item.warning i{

background:#f59e0b;

}

.command-item.danger i{

background:#ef4444;

}

.command-item.primary i{

background:#2563eb;

}

@media(max-width:1200px){

.command-items{

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

}

}

@media(max-width:768px){

.command-items{

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

}

}

@media(max-width:576px){

.command-items{

grid-template-columns:1fr;

}

.command-title{

justify-content:center;

}

}