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

.card-stat{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 18px;
    border-radius:15px;
    color:#fff;
    box-shadow:0 5px 15px rgba(0,0,0,.12);
    min-height:95px;
    transition:.3s ease;
}

.card-stat:hover{
    transform:translateY(-4px);
}

.card-stat span{
    display:block;
    font-size:13px;
    font-weight:600;
    opacity:.9;
}

.card-stat h2{
    font-size:24px;
    font-weight:700;
    margin:5px 0;
}

.card-stat small{
    display:block;
    font-size:11px;
    opacity:.9;
}

.card-stat i{
    font-size:36px;
    opacity:.25;
}

/* WARNA CARD */

.bg-primary{
    background:linear-gradient(135deg,#2563eb,#1e40af);
}

.bg-danger{
    background:linear-gradient(135deg,#ef4444,#b91c1c);
}

.bg-warning{
    background:linear-gradient(135deg,#f59e0b,#d97706);
}

.bg-success{
    background:linear-gradient(135deg,#10b981,#047857);
}

/* BOX GRAFIK */

.box{
    background:#fff;
    border-radius:15px;
    padding:20px;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    margin-bottom:20px;
}

.box h5{
    font-weight:600;
    margin-bottom:20px;
}

/* TABEL */

.table{
    margin-bottom:0;
}

.table thead{
    background:#0d6efd;
    color:#fff;
}

.table thead th{
    border:none;
}

.table tbody tr:hover{
    background:#f5f9ff;
}

/* DASHBOARD */

.dashboard{
    padding:20px;
}

/* ===========================
SIDEBAR
=========================== */

.sidebar{
    position:fixed;
    left:0;
    top:0;
    width:250px;
    height:100vh;
    background:#0d47a1;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-shadow:3px 0 15px rgba(0,0,0,.15);
    z-index:999;
}

.sidebar .logo{
    text-align:center;
    padding:25px 15px;
    border-bottom:1px solid rgba(255,255,255,.15);
}

.sidebar .logo img{
    width:70px;
    margin-bottom:10px;
}

.sidebar .logo h2{
    margin:0;
    font-size:24px;
    font-weight:700;
}

.sidebar .logo small{
    color:#dfe9ff;
    font-size:12px;
    line-height:18px;
}

.menu{
    padding:20px 15px;
    flex:1;
}

.menu a{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:#fff;
    padding:12px 15px;
    margin-bottom:8px;
    border-radius:10px;
    transition:.3s;
}

.menu a:hover{
    background:rgba(255,255,255,.15);
}

.menu a.active{
    background:#ffffff;
    color:#0d47a1;
    font-weight:600;
}

.menu a i{
    font-size:18px;
}

.sidebar-footer{
    text-align:center;
    padding:20px;
    border-top:1px solid rgba(255,255,255,.15);
    color:#dfe9ff;
    font-size:12px;
}

/* ===========================
WRAPPER
=========================== */

.wrapper{
    display:flex;
    min-height:100vh;
    background:#f4f7fb;
}

.main-content{
    margin-left:250px;
    width:calc(100% - 250px);
    min-height:100vh;
    padding:25px;
}

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

.header{
    background:#fff;
    border-radius:15px;
    padding:18px 25px;
    margin-bottom:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.header-left h3{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#0d47a1;
}

.header-left p{
    margin:5px 0 0;
    color:#666;
    font-size:14px;
}

.header-right{
    display:flex;
    gap:15px;
}

.date-box,
.time-box{
    display:flex;
    align-items:center;
    gap:8px;
    background:#f8f9fa;
    padding:10px 15px;
    border-radius:10px;
    font-weight:600;
    color:#0d47a1;
}

.date-box i,
.time-box i{
    font-size:18px;
}

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

@media(max-width:992px){

    .sidebar{
        width:80px;
    }

    .sidebar .logo h2,
    .sidebar .logo small,
    .menu a span,
    .sidebar-footer{
        display:none;
    }

    .main-content{
        margin-left:80px;
        width:calc(100% - 80px);
    }

}

@media(max-width:768px){

    .header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .header-right{
        width:100%;
        justify-content:space-between;
    }

}

/* Jumlah TAK */
#barChart{
    width:100% !important;
    height:220px !important;
}

/* Pie */
#pieChart{
    width:100% !important;
    height:220px !important;
}

/* Kebangsaan */
#negaraChart{
    width:100% !important;
    height:240px !important;
}

/* Status */
#statusChart{
    width:100% !important;
    height:240px !important;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
    background:#eef4fb;
}

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

.hero{

    min-height:100vh;

    background:url("../img/background.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    position:relative;

}

/* Overlay */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

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

}

.container{

    position:relative;

    z-index:2;

}

/* ================= NAVBAR ================= */

.navbar{

    padding:18px 0;

    background:linear-gradient(to bottom, rgba(255,255,255,.65) 0%, rgba(255,255,255,.15) 70%, rgba(255,255,255,0) 100%);

    -webkit-backdrop-filter:blur(6px);

    backdrop-filter:blur(6px);

}

.logo{

    width:55px;

    margin-right:10px;

    filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));

}

.navbar-brand{

    font-size:32px;

    font-weight:700;

    color:#0B2E67 !important;

    text-shadow:0 1px 12px rgba(255,255,255,.9);

}

.nav-link{

    color:#0B2E67 !important;

    font-weight:600;

    margin-left:18px;

    transition:.3s;

}

.nav-link:hover{

    color:#d4a017 !important;

}

.btn-warning{

    background:linear-gradient(135deg,#e6b325,#c98d0f);

    border:none;

    color:#fff;

    border-radius:50px;

    padding:10px 28px;

    font-weight:600;

    box-shadow:0 6px 16px rgba(212,160,23,.4);

    transition:.3s;

}

.btn-warning:hover{

    background:#0B2E67;

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(11,46,103,.35);

}

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

.hero-content{

    min-height:85vh;

}

.title-box{

    margin-bottom:20px;

}

.logo-title{

    width:90px;

    margin-right:18px;

    filter:drop-shadow(0 3px 8px rgba(0,0,0,.2));

}

.title-box h1{

    font-size:72px;

    font-weight:800;

    color:#0B2E67;

    margin-bottom:0;

    text-shadow:0 2px 14px rgba(255,255,255,.6);

}

.title-box h5{

    color:#183A72;

    font-weight:600;

    line-height:1.5;

    text-transform:uppercase;

    text-shadow:0 1px 10px rgba(255,255,255,.6);

}

/* ================= WELCOME CARD ================= */

.welcome-card{

    width:100%;

    max-width:580px;

    background:#ffffff;

    border-radius:22px;

    padding:30px;

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

    margin-top:20px;

    position:relative;

    overflow:hidden;

}

.welcome-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:7px;

    height:100%;

    background:#0B2E67;

}

.welcome-card h2{

    font-size:34px;

    color:#0B2E67;

    font-weight:700;

    margin-bottom:12px;

}

.welcome-card p{

    color:#555;

    line-height:1.8;

    font-size:15px;

    margin-bottom:20px;

}

.line{

    width:80px;

    height:4px;

    background:#d4a017;

    border-radius:20px;

}

/* ================= FITUR ================= */

#fitur{

    margin-top:40px;

}

/* Kunci lebar kolom agar selalu 5 kartu sejajar rapi
   (memperbaiki bug bawaan Bootstrap: kolom "col-lg" tanpa
   angka bisa terlempar ke baris baru & melebar penuh
   ketika ruang tidak cukup) */

@media(min-width:992px){

    #fitur > [class*="col-"]{
        flex:0 0 20%;
        max-width:20%;
        width:20%;
    }

}

.feature-card{

    background:linear-gradient(135deg,#0B2E67,#123a82);

    color:#fff;

    border-radius:18px;

    padding:22px 15px;

    text-align:center;

    cursor:pointer;

    transition:.35s;

    height:150px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

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

    min-width:0;

}

.feature-card:hover{

    transform:translateY(-10px);

    background:linear-gradient(135deg,#e6b325,#d4a017);

    box-shadow:0 16px 30px rgba(212,160,23,.35);

}

.feature-card i{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    margin-bottom:12px;

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

    border-radius:50%;

    transition:.35s;

}

.feature-card h6{

    font-size:14px;

    font-weight:700;

    line-height:1.5;

    margin:0;

    letter-spacing:.5px;

    text-transform:uppercase;

}

.feature-card:hover i{

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

    transform:scale(1.08);

}

.feature-card:hover i,

.feature-card:hover h6{

    color:#fff;

}

/* ================= HEXAGON ================= */

.hex-wrapper{

    position:absolute;

    right:40px;

    top:140px;

    width:420px;

    display:grid;

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

    gap:18px;

    z-index:5;

}

.hex-card{

    width:180px;

    height:200px;

    clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%);

    overflow:hidden;

    position:relative;

    cursor:pointer;

    transition:.35s;

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

}

.hex-card:hover{

    transform:translateY(-8px) scale(1.03);

}

.hex-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}

.hex-card:hover img{

    transform:scale(1.1);

}

.hex-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.8),
    rgba(0,0,0,.15));

}

.hex-title{

    position:absolute;

    bottom:18px;

    width:100%;

    text-align:center;

    color:#fff;

    font-size:16px;

    font-weight:700;

    line-height:1.4;

    z-index:2;

    text-shadow:0 2px 8px rgba(0,0,0,.5);

}

/* ================= LOGIN MODAL ================= */

.login-modal{

    border:none;

    border-radius:22px;

    overflow:hidden;

}

.login-logo{

    width:90px;

    margin:auto;

    display:block;

}

.login-modal .modal-body{

    padding:35px;

}

.login-modal .btn-primary{

    border-radius:50px;

    padding:12px;

    font-weight:600;

}

.login-modal .btn-outline-secondary{

    border-radius:50px;

}

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

.footer{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    text-align:center;

    color:#ffffff;

    padding:30px 18px 18px;

    font-size:14px;

    font-weight:500;

    background:linear-gradient(to top, rgba(11,46,103,.85) 0%, rgba(11,46,103,.25) 70%, rgba(11,46,103,0) 100%);

    text-shadow:0 1px 4px rgba(0,0,0,.3);

}

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

@media(max-width:1200px){

    .hex-wrapper{

        display:none;

    }

}

@media(max-width:991px){

    .hero-content{

        text-align:center;

        padding-top:30px;

    }

    .title-box .d-flex{

        justify-content:center;

        flex-direction:column;

    }

    .logo-title{

        margin:0 0 15px;

    }

    .title-box h1{

        font-size:54px;

    }

    .welcome-card{

        margin:auto;

        margin-top:25px;

    }

    .feature-card{

        height:130px;

    }

}

@media(max-width:768px){

    .title-box h1{

        font-size:42px;

    }

    .title-box h5{

        font-size:15px;

    }

    .welcome-card h2{

        font-size:26px;

    }

    .feature-card{

        height:115px;

    }

    .feature-card i{

        width:46px;

        height:46px;

        font-size:20px;

    }

    .feature-card h6{

        font-size:12px;

    }

    .footer{

        position:static;

        margin-top:30px;

    }

}