.stat-card {
background: #fff;
border-radius: 14px;
padding: 18px 20px;
box-shadow: 0 8px 28px rgba(0,0,0,.08);
position: relative;
height: 100%;
}

.stat-card::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
border-radius: 0 0 14px 14px;
}

/* header */
.stat-header {
display: flex;
align-items: center;
gap: 14px;
}

/* icon */
.stat-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}

.stat-icon img {
width: 24px;
}

/* number */
.stat-number {
font-size: 28px;
font-weight: 700;
color: #3f3f46;
}

/* body */
.stat-body {
margin-top: 10px;
}

.stat-title {
font-size: 15px;
font-weight: 500;
color: #52525b;
}

.stat-date {
font-size: 13px;
color: #a1a1aa;
}

/* hover */
.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(0,0,0,.12);
transition: .25s ease;
}

/* warna */
.stat-purple .stat-icon { background: #EEF2FF; }
.stat-purple::after { background: #6366F1; }

.stat-orange .stat-icon { background: #FFF7ED; }
.stat-orange::after { background: #FB923C; }

.stat-red .stat-icon { background: #FEF2F2; }
.stat-red::after { background: #F87171; }

.stat-blue .stat-icon { background: #ECFEFF; }
.stat-blue::after { background: #22D3EE; }