.navbar {
    height: 100px !important;
    overflow: hidden !important;

    background: linear-gradient(to right, #73098d, #ffffff) !important;

    border: none !important;
}

.navbar-default .nav > li > a {
    color: #000000 !important;
}

.navbar-default .nav > li > a:hover {
    color: #ffd700 !important;
}


.navbar-brand {
    display: flex !important;
    align-items: flex-start !important; 
    padding-top: 5px !important;
    height: 80px !important;
}

.navbar-brand-logo img {
    max-height: 150px !important;
    margin-top: -50px !important;
}

.menu-link {
    display: block;
    background: #d4e157;
    margin: 6px 0;
    padding: 10px;
    border-radius: 6px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    text-align: center;
    transition: 0.3s;
}

.menu-link:hover {
    background: #c0ca33;
    transform: scale(1.03);
}


/* ===== INDEX LOGOS ===== */
.index-section {
    background: #f9f9fb;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.index-title {
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

/* scroll horizontal */
.index-logos {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.index-logos img {
    height: 40px;
    object-fit: contain;
    background: #fff;
    padding: 5px;
    border-radius: 6px;
    transition: 0.3s;
}

.index-logos img:hover {
    transform: scale(1.05);
}

/* ===== MEMBER LOGOS ===== */
.member-logos img {
    height: 35px;
    object-fit: contain;
    margin: 5px;
    transition: 0.3s;
}

.member-logos img:hover {
    transform: scale(1.05);
}

/* ===== FOOTER GRID ===== */
/* ===== WRAPPER ===== */
.panel.panel-default {
    border: none !important;
    box-shadow: none !important;
}

/* ===== TITLE ===== */
.page-header {
    font-weight: bold;
    margin-bottom: 15px;
    color: #2c3e50;
}

/* ===== INDEXING LOGO (HORIZONTAL SCROLL) ===== */
.panel-body:first-of-type {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 10px 5px !important;
    align-items: center;
}

/* logo */
.panel-body:first-of-type a {
    display: flex;
    align-items: center;
}

.panel-body:first-of-type img {
    height: 45px !important;
    width: auto !important;
    object-fit: contain;
    background: #fff;
    padding: 6px;
    border-radius: 8px;
    transition: 0.3s;
}

/* hover */
.panel-body:first-of-type img:hover {
    transform: scale(1.1);
}

/* ===== MEMBER LOGO (GRID RAPI) ===== */
.panel-body:last-of-type p {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* logo member */
.panel-body:last-of-type img {
    height: 38px !important;
    background: #fff;
    padding: 5px;
    border-radius: 6px;
    object-fit: contain;
    transition: 0.3s;
}

.panel-body:last-of-type img:hover {
    transform: scale(1.08);
}

/* ===== FOOTER ===== */
.top-row {
    background: #1e1e2f;
    color: #ddd;
    padding: 40px 20px;
}

/* grid bootstrap fix */
.top-row .row {
    display: flex;
    flex-wrap: wrap;
}

/* kolom */
.top-row .col-md-3 {
    margin-bottom: 20px;
}

/* title */
.top-row h4 {
    color: #fff;
    margin-bottom: 10px;
}

/* link */
.top-row a {
    color: #bbb !important;
    text-decoration: none;
    transition: 0.3s;
}

.top-row a:hover {
    color: #00c3ff !important;
    padding-left: 5px;
}

/* list */
.list-unstyled li {
    margin-bottom: 6px;
}

/* FIX warna salah */
.top-row a[style*="6b03b7"] {
    color: #6b03b7 !important;
}

/* ===== COPYRIGHT ===== */
.col-lg-12 {
    text-align: center;
    padding-top: 15px;
}

/* ===== SCROLLBAR ===== */
.panel-body:first-of-type::-webkit-scrollbar {
    height: 6px;
}

.panel-body:first-of-type::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}