:root{

    --blue:#0d6dfddb;
    --red:#f8f7f8df;
    --yellow:#54d9f7e0;

    --dark:#1e293b;
    --white:#ffffff;

    --shadow:
        0 10px 30px rgba(0,0,0,.08);
}

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

    font-family:'Poppins',sans-serif;
}

body{
    background:#f5f7fb;
}

/* ========================
LOGIN & REGISTER
======================== */
.login-card {

        width: 100%;
        max-width: 420px;
        height: 100vh;

        border: none;

        border-radius: 20px;

        overflow: hidden;
    }

    .brand-icon {

        width: 80px;
        height: 80px;

        border-radius: 50%;

        background: #fff;

        display: flex;
        align-items: center;
        justify-content: center;

        margin: auto;

        color: #0D6EFD;

        font-size: 35px;
    }
/* =========================
   NAVBAR
========================= */

.custom-navbar{
    background:linear-gradient(
        90deg,
        var(--red),
        var(--yellow),
        var(--blue)
    );

    padding:15px 0;

    box-shadow:var(--shadow);
}

.brand-text{
    display:flex;
    flex-direction:column;

    line-height:1.1;
}

.brand-title{
    color:#fff;

    font-size:18px;

    font-weight:700;
}

.brand-subtitle{
    color:#fff;
}

.nav-link{
    color:#fff !important;

    font-weight:500;

    margin-left:10px;

    transition:.3s;
}

.nav-link:hover{
    transform:translateY(-2px);

    opacity:.9;
}

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

.custom-footer{
    background:linear-gradient(
        90deg,
        var(--red),
        var(--yellow),
        var(--blue)
    );

    color:#fff;

    padding:20px 0;

    margin-top:20px;
}

.footer-title{
    font-weight:700;
}

.footer-desc{
    opacity:.8;
}

.footer-social{
    display:flex;

    justify-content:center;

    gap:15px;

    margin:20px 0;
}

.footer-social a{
    width:45px;
    height:45px;

    border-radius:50%;

    background:#fff;

    color:var(--blue);

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    transition:.3s;
}

.footer-social a:hover{
    transform:translateY(-5px);
}

.footer-copy{
    opacity:.7;
}

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

@media(max-width:768px){

    .brand-title{
        font-size:15px;
    }

    .brand-subtitle{
        font-size:12px;
    }

    .navbar-nav{
        margin-top:15px;
    }

    .nav-link{
        margin-right:0;
    }

}

/* =========================
   MENU ICONS
*/
.menu-icons {
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox: hide scrollbar */
}
.menu-icons::-webkit-scrollbar {
  display: none; /* Chrome/Safari: hide scrollbar */
}
.nav-link {
  min-width: 60px;   /* biar icon + teks tetap rapi */
  font-size: 1.2rem; /* ukuran emoji */
  margin: 0 4px;     /* jarak antar menu lebih rapat */
}

/* ===================
DASHBOARD
=================== */
.small-box .inner h3 {
  font-size: clamp(1rem, 2.5vw, 2rem); /* otomatis menyesuaikan layar */
  word-wrap: break-word;               /* pecah kalau terlalu panjang */
  overflow-wrap: break-word;
  text-overflow: ellipsis;             /* kasih ... kalau kepanjangan */
}
.small-box .inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* biar angka tetap di dalam */
  min-width: 0;            /* penting untuk flex agar wrap jalan */
}

/* ===================
FILTER BAR
=================== */
/* =========================
   FILTER BAR
========================= */

.filter-bar{

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

    margin-bottom:20px;

}

/* =========================
   KATEGORI
========================= */

.kategori-box{

    flex:6;

    transition:.3s ease;

}

.kategori-box select{

    width:100%;

    height:46px;

    border:none;

    border-radius:14px;

    padding:0 15px;

    background:#fff;

    box-shadow:0 2px 10px rgba(0,0,0,.06);

    font-size:14px;

    outline:none;

}

/* =========================
   SEARCH
========================= */

.search-box{

    flex:6;

    transition:.3s ease;

}

.search-box input{

    width:100%;

    height:46px;

    border:none;

    border-radius:14px;

    padding:0 15px;

    background:#fff;

    box-shadow:0 2px 10px rgba(0,0,0,.06);

    outline:none;

    font-size:14px;

}

/* =========================
   BUTTON
========================= */

.btn-cari{

    height:46px;

    padding:0 18px;

    border:none;

    border-radius:14px;

    background:#6f42c1;

    color:#fff;

    cursor:pointer;

    font-weight:600;

    display:none;

    transition:.3s ease;

}

/* =========================
   MOBILE SEARCH ACTIVE
========================= */

.filter-bar.search-active .kategori-box{

    flex:3;

}

.filter-bar.search-active .search-box{

    flex:7;

}

.filter-bar.search-active .btn-cari{

    display:block;

}

/* =========================
   DESKTOP
========================= */

@media(min-width:768px){

    .kategori-box{

        flex:3 !important;

    }

    .search-box{

        flex:6 !important;

    }

    .btn-cari{

        display:block !important;

    }

}