/* =====================
   ROOT
===================== */
:root{
    --font-family: "Poppins", sans-serif;

    /* Brand Colors */
    --bs-primary: #2286EC;
    --bs-secondary: #7B3BD4;
    --bs-success: #22BF06;
    --bs-warning: #F7A333;
    --bs-buram: #555555;

    /* RGB Version */
    --bs-primary-rgb: 34, 134, 236;
    --bs-secondary-rgb: 123, 59, 212;
    --bs-success-rgb: 34, 191, 6;
    --bs-warning-rgb: 247, 163, 51;

    /* Optional Custom Variables */
    --bs-brand-blue: #2286EC;
    --bs-brand-purple: #7B3BD4;
    --bs-brand-green: #22BF06;
    --bs-brand-orange: #F7A333;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);

}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
}

.btn-success {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
}

.btn-warning {
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-color: #fff;
}

.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-color: var(--bs-secondary);

    --bs-btn-hover-bg: #363636;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: #fff;
}

.btn-buram {
    --bs-btn-bg: var(--bs-buram);
    --bs-btn-border-color: var(--bs-buram);
    --bs-btn-color: #fffffc;

    --bs-btn-hover-bg: #ee7a7a;
    --bs-btn-hover-border-color: #ee7a7a;
    --bs-btn-hover-color: var(--bs-buram);
}

.btn-susu {
    --bs-btn-bg: #e0dfdf;
    --bs-btn-border-color: #e0dfdf;
    --bs-btn-color: #2d3751;

    --bs-btn-hover-bg: #2d3751;
    --bs-btn-hover-border-color: #2d3751;
    --bs-btn-hover-color: #fffffc;
}

.shadow-md {
    box-shadow: 1px 5px 6px 1px rgba(0, 0, 0, 0.183) !important;
}

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

body{
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #2d3751;
    background: #fffffc;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

section{
    display: flex;
    align-items: center;
    overflow: hidden;
    scroll-margin-top: 60px;
}

/* =====================
   TYPOGRAPHY
===================== */
h1{font-size: 2.5rem; font-weight: 700;}
h2{font-size: 2rem; font-weight: 700;}
h3{font-size: 1.75rem; font-weight: 600;}
h4{font-size: 1.5rem; font-weight: 600;}
h5{font-size: 1.125rem; font-weight: 600;}
h6{font-size: 1rem; font-weight: 600;}
.small-text{font-size: .875rem; line-height: 1.3;}
.caption{font-size: .75rem;}

/* =====================
   LAYOUT
===================== */

.brand-logo {
    align-items: center;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}

/* SIDI */
.brand-logo .brand-primary {
    font-size: 1.75rem;
    color: #2F80ED;
    font-weight: 800;
    letter-spacing: -1px;
}

/* Indonesia */
.brand-logo .brand-secondary {
    font-size: 1.75rem;
    color: #F5A623;
    font-weight: 300;
    letter-spacing: -1px;
}

/* HERO */

.hero-brand {
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    text-decoration: none;
}

.hero-brand .brand-primary {
    color: #2F80ED;
    font-size: 3.25rem;
    font-weight: 800;
    letter-spacing: -2px;
}

.hero-brand .brand-secondary {
    color: #F5A623;
    font-size: 3.25rem;
    font-weight: 300;
    letter-spacing: -1px;
}

.hero-img{
    position:relative;
    display:inline-block;
}

.hero-bg-banner{
    width: 100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.hero-banner{
    position:absolute;
    inset:0;
    width: 100%;
    height:100%;
    object-fit:contain;
    animation: floating 4s ease-in-out infinite;
}

.hero-divider{
    width:80%;
    height:2px;
    background:linear-gradient(90deg,#2F80ED,#F5A623);
    border-radius:10px;
    margin:24px 0;
}

.hero p{
    line-height: 1.7;
}

@keyframes floating{
    0%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
    100%{transform:translateY(0);}
}

/*
|--------------------------------------------------------------------------
| SIDEBAR
|--------------------------------------------------------------------------
*/

.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:260px;
    height:100vh;
    background:#10182F;
    color:#fff;
    z-index:9;
    overflow-y:auto;
}

.sidebar-brand{
    padding:14px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.sidebar-brand img{
    object-fit: contain;
}

.sidebar-brand a{
     color:#cbd5e1;
     text-decoration: none;
}

.sidebar-menu{
    padding:10px 0;
}

.sidebar-menu .menu-title{
    padding:8px 5px 0 25px;
    font-size:12px;
    text-transform:uppercase;
    color:#94a3b8;
    font-weight:600;
}

.sidebar-menu a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 25px;
    color:#e2e8f0;
    text-decoration:none;
    transition:.2s;
}

.sidebar-menu a:hover{
    background:#1e293b;
    color:#fff;
}

.sidebar-menu a.active{
    background:#2286EC;
    color:#fff;
    border-left:4px solid #fff;
}

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

/*
|--------------------------------------------------------------------------
| TOPBAR
|--------------------------------------------------------------------------
*/

.topbar{
    height:70px;
    background:#fff;
    border-bottom:1px solid #e2e8f0;
    padding:0 25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:8;
}

.topbar-left{
    display:flex;
    align-items:center;
    gap:15px;
}

.btn-toggle{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: none;
    background: none;
    padding: 2px 6px;
    line-height: 1;
}

.btn-toggle i{
    font-size: 26px;
    line-height: 1;
}

.btn-toggle small{
    font-size: 10px;
    line-height: 1;
}

.search-box{
    position:relative;
}

.search-box input{
    width:280px;
    border-radius:10px;
    padding-left:40px;
}

.search-box i{
    position:absolute;
    top:10px;
    left:14px;
    color:#64748b;
}

.topbar-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.notif{
    position:relative;
    font-size:22px;
    color:#2b2b2b;
}

.notif-badge{
    position:absolute;
    top:-5px;
    right:-5px;
    width:18px;
    height:18px;
    background:red;
    color:#fff;
    border-radius:50%;
    font-size:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.user-info{
    display:flex;
    align-items:center;
    gap:10px;
}

.user-info img{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    
}

.user-verif{
    display:flex;
    align-items:center;
    gap:10px;
}

.user-verif img{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
}

.user-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#4f90df;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
}

/*
|--------------------------------------------------------------------------
| MAIN CONTENT
|--------------------------------------------------------------------------
*/

.main-content{
    margin-left:260px;
    min-height:95vh;
    margin-bottom: 0;
    padding-bottom: 0;
}

.content{
    padding:12px;
}


/* =====================
   COMPONENTS
===================== */

/* Card */
.bg-icon-das {
    width:50px;
    height:50px;
}

.bg-icon-head-card {
    width:38px;
    height:38px;
}

.bg-icon {
    width:60px;
    height:60px;
}

.card-hover {
        transition: .3s;
    }

.card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 2rem rgba(0, 0, 0, .08) !important;
    }

/* Elemen Berjalan */

.marquee {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

.marquee-content {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    animation: marquee 25s linear infinite;
}

.marquee-content:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-70%);
    }
}

.marquee-content > div {
    flex-shrink: 0;
}

/* NAMA BRAND P */
.brand-text {
    align-items: center;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}

/* SIDI */
.brand-text .brand-primary {
    font-size: 16px;
    color: #2F80ED;
    font-weight: 800;
}

/* Indonesia */
.brand-text .brand-secondary {
    font-size: 16px;
    color: #F5A623;
    font-weight: 300;
}

/* NAMA BRAND LOGIN */
.brand-login {
    align-items: center;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}

/* SIDI */
.brand-login .brand-primary {
    font-size: 2rem;
    color: #2F80ED;
    font-weight: 800;
}

/* Indonesia */
.brand-login .brand-secondary {
    font-size: 2rem;
    color: #F5A623;
    font-weight: 300;
}

/* Breadcrumb pada background bg-primary */
.dashboard-text{
    color: #2d2e30;
    font-size: small;
}

.dashboard-text .breadcrumb {
    margin-bottom: 0;
}

.dashboard-text .breadcrumb-item a {
    color: rgba(37, 35, 35, 0.85);
    text-decoration: none;
}

.dashboard-text .breadcrumb-item a:hover {
    color: #000;
    text-decoration: underline;
}

.dashboard-text .breadcrumb-item.active {
    color: #000;
    font-weight: 400;
}

/* Warna pemisah (>) */
.dashboard-text {
    --bs-breadcrumb-divider-color: rgba(8, 8, 8, 0.6);
}

.dashboard-text .breadcrumb-item + .breadcrumb-item {
    padding-left: .4rem; /* Jarak sebelum divider */
}

.dashboard-text .breadcrumb-item + .breadcrumb-item::before {
    padding-right: .4rem; /* Jarak setelah divider */
}

.dashboard-tabel{
    padding: 4px 10px;
}

.label{
    color:#474747;
    margin-bottom: 3px;
    font-weight:400;
}

.main-footer{
    margin-left:260px;
    bottom: 0;
}

/* =====================
   CSS KHUSUS DESKTOP
===================== */
@media (min-width: 992px) {
.navbar-nav .nav-link {
    position: relative;
    font-weight: 500;
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: #7B3BD4;
    border-radius: 50px;
    transition: width .3s ease;
}

/* Hover */
.navbar-nav .nav-link:hover::after {
    width: 100%;
}

/* Active */
.navbar-nav .nav-link.active::after {
    width: 100%;
}

.navbar-nav .nav-link.active {
    color: #7B3BD4;
    font-weight: 600;
}

}

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

@media(max-width:767.98px){

/* =====================
   BODY
===================== */
body{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
}


/* =====================
   TYPOGRAPHY
===================== */
h1{font-size: 2rem;}
h2{font-size: 1.75rem;}
h3{font-size: 1.25rem;}
h4{font-size: 1.125rem;}
h5{font-size: 1rem;}
h6{font-size: .875rem;}
.small-text{font-size: .75rem;}
.caption{font-size: .6875rem;}

/* =====================
   LAYOUT
===================== */
.fitur-img{
    width: 50%;
    height: auto;
}

/* SIDI */
.brand-logo .brand-primary {
    font-size: 1.5rem;
}

/* Indonesia */
.brand-logo .brand-secondary {
    font-size: 1.5rem;
}

.hero-brand .brand-primary {
    font-size: 2.5rem;
}

.hero-brand .brand-secondary {
    font-size: 2.5rem;
}

/* SIDI */
.brand-text .brand-primary {
    font-size: 14px;
}

/* Indonesia */
.brand-text .brand-secondary {
    font-size: 14px;
}

.hero-divider{
    margin:24px auto;
    }

.tombol-sm{
    font-size: .875rem;
}

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

    .sidebar{
        left:-260px;
        transition:.3s;
    }

    .sidebar.show{
        left:0;
    }

    .main-content{
        margin-left:0;
    }

    .btn-toggle{
        display: flex;
    }

    .search-box input{
        width:180px;
    }

    .sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:8;
    display:none;
}

.sidebar-overlay.show{
    display:block;
}

/*
|--------------------------------------------------------------------------
| TOPBAR
|--------------------------------------------------------------------------
*/

.topbar{
    padding:0 12px;
}

/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/
.main-content{
    min-height:80vh;
}

.content{
    padding:12px 8px;
}

.main-footer{
    margin: 0;
}

/* =====================
   COMPONENTS
===================== */

/* Card */
.bg-icon-das {
    width:40px;
    height:40px;
}

.bg-icon-head-card {
    width:32px;
    height:32px;
}

.bg-icon {
    width:50px;
    height:50px;
}

/* breadcrumb */
.dashboard-text .breadcrumb-item + .breadcrumb-item {
    padding-left: .2rem; /* Jarak sebelum divider */
}

.dashboard-text .breadcrumb-item + .breadcrumb-item::before {
    padding-right: .2rem; /* Jarak setelah divider */
}


}