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

.homepage .navbar {
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* saat scroll kembali normal */
.homepage .navbar.scrolled {
    background: rgba(255,255,255,0.95) !important;
}

.homepage .navbar .desktop-menu a {
    color: #fff;
}

.homepage .navbar.scrolled .desktop-menu a {
    color: #222;
}

/* NAVBAR */
.navbar {
    transition: all 0.3s ease;
    z-index: 1100;
    height: 70px;          /* ubah sesuai kebutuhan */
    padding: 0 10px;       /* supaya tidak ikut nambah tinggi */
    display: flex;
    align-items: center;   /* center vertical isi navbar */
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow:0 6px 18px rgba(0,0,0,0.15);
    height: 55px;
}

/* LOGO */
.logo-img {
    height:48px;
    transition:all 0.3s ease;
}

.navbar.scrolled .logo-img {
    height:35px !important;
}

/* DESKTOP MENU */
.desktop-menu {
    list-style:none;
    margin:0;
    padding:0;
}

.desktop-menu li {
    margin-left:25px;
}

.desktop-menu a {
    color:#222;
    font-weight:500;
}

/* BUTTON */
.btn-cta {
    color:#fff !important;
    background:#e10600;
    border:none;
}

.btn-cta:hover {
    background:#c40000;
}

/* Desktop menu style */
.desktop-menu {
    list-style:none;
    margin:0;
    padding:0;
}

.desktop-menu li {
    margin-left:25px;
}

.desktop-menu a {
    text-decoration:none;
    color:#222;
    font-weight:500;
}

/* Hide mobile slide on desktop */
@media (min-width: 992px) {
    .side-menu,
    #overlay {
        display:none !important;
    }
}

/* BUTTON */
.btn-primary {
    color: #ffffff !important;
    background:#e10600;
    border:none;
}
.btn-primary:hover {
    background:#c40000;
}

/* FOOTER */
footer {
    background:#f8f9fa;
    padding:40px 0;
}

/* ===== HAMBURGER CLEAN ===== */

.navbar-toggler {
    border:none !important;
    box-shadow:none !important;
    padding:0;
}
.navbar-toggler:focus {
    box-shadow:none !important;
}

.navbar-brand {
    margin-left: 5px;
}

 /*===== MENU BUTTON ===== */
.menu-btn {
    width: 26px;
    height: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    transition: all 0.3s ease;
}

/* POSISI ABSOLUTE BIAR CENTER FIX */
.menu-btn span {
    height: 3px;
    width: 100%;
    background: #000;
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    transform-origin: center;
}

.menu-btn span {
    transition: transform 0.4s cubic-bezier(0.77,0,0.175,1),
                opacity 0.3s ease;
    transform-origin: center;
}

.menu-btn.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.menu-btn.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.menu-btn span:nth-child(2) {
    transition-delay: 0.1s;
}

.menu-btn {
    position: relative;
    z-index: 1101;
}

/* Saat navbar scroll */
/*.navbar.scrolled .menu-btn {*/
/*    width: 22px;*/
/*    height: 18px;*/
/*}*/

/*.navbar.scrolled .menu-btn span {*/
/*    height: 2.5px;*/
/*}*/

.navbar.scrolled .menu-btn {
    transform: scale(0.8);
}