/*
 * ====================================================================
 * Variabel dan Styling Global
 * ====================================================================
 */

/* Menggunakan font Rubik untuk seluruh website */
:root {
    --bs-font-sans-serif: 'Rubik', sans-serif;
}

/* Tema gelap */
[data-bs-theme=dark] {
    --bs-body-bg: #2e2c47;
    --bs-body-bg-rgb: 46, 44, 71;
    --bs-primary-color-contrast: #2e2c47;
}

body {
    background: #d1d0d6;
    font-family: var(--bs-font-sans-serif);
    color: #bf8900;
}
a {
    text-decoration: none;
    color: #8bf5fc;
    transition: color 0.3s ease-in-out;
}

a:hover {
    color: var(--bs-primary);
}

.btn {
    font-weight: bold;
}

/*
 * ====================================================================
 * Scrollbar Styling
 * ====================================================================
 */

/* Styling untuk Chrome, Edge, Safari, dan Opera */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Styling untuk Firefox */
* {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent !important;
}

/*
 * ====================================================================
 * Header dan Navbar
 * ====================================================================
 */

.top-header,
.home {
    position: relative;
}

/* Efek overlay untuk header */
.home::before,
.top-header::after {
    position: absolute;
    background-color: rgba(46, 44, 71, 0.7);
    content: "";
    z-index: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.top-header .logo {
    max-height: 100px;
}

.home .logo {
    max-height: 175px;
}


.navbar {
    z-index: 10;
    position: relative;
    padding: 1rem 1.5rem;
    background-color: rgba(46, 44, 71, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.navbar .nav-item {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

/*
 * ====================================================================
 * Navbar Styling
 * ====================================================================
 */

/* Aturan dasar untuk SEMUA link di navbar (termasuk dropdown) */
.navbar .nav-item .nav-link {
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    transition: color 0.3s ease-in-out;
}

/* Perubahan warna saat di-hover atau aktif untuk SEMUA link */
.navbar .nav-item .nav-link:hover,
.navbar .nav-item .nav-link.active {
    color: var(--bs-primary);
}

/* Aturan khusus untuk ANIMASI GARIS BAWAH (hanya untuk link non-dropdown) */
.navbar .nav-item .nav-link:not(.dropdown-toggle) {
    position: relative;
}

.navbar .nav-item .nav-link:not(.dropdown-toggle)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--bs-primary);
    transition: width 0.3s ease-in-out;
}

.navbar .nav-item .nav-link:not(.dropdown-toggle):hover::after,
.navbar .nav-item .nav-link:not(.dropdown-toggle).active::after {
    width: 100%;
}

/*
 * ====================================================================
 * Konten Utama
 * ====================================================================
 */

h1 {
    color: #2e2c47;
    background-color: var(--bs-primary);
    text-align: center;
    padding: 1rem 0;
    font-weight: 700;
    margin-bottom: 2rem;
}

.content {
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.home {
    min-height: 100vh;
    padding-bottom: 7rem;
}

/* Efek bentuk di bawah header */
.home::after {
    position: absolute;
    z-index: 0;
    bottom: -1px;
    height: 240px;
    left: 0;
    right: 0;
    content: "";
    background: url(../svg/header_shape.svg) center / cover no-repeat;
}

/*
 * ====================================================================
 * Footer
 * ====================================================================
 */

.footer {
    position: relative;
    margin-top: 350px;
}

.home-footer {
    background-color: #34324b !important;
}

.footer .logo {
    max-height: 200px;
}

/* Efek bentuk di atas footer */
.footer::before {
    position: absolute;
    z-index: -1;
    height: 280px;
    top: -275px;
    left: 0;
    right: 0;
    content: "";
    background: url('../svg/footer_shape.svg') center / cover no-repeat;
}

.footer .text-bg-primary a {
    color: #2e2c47;
}

.footer-links .list-inline-item:not(:last-child)::after {
    margin-left: 0.5rem;
    font-weight: bolder;
    content: "-";
}

/*
 * ====================================================================
 * Mobile Styling (Untuk layar < 768px)
 * ====================================================================
 */
/* Matikan background default Bootstrap */
.navbar-toggler-icon {
    background-image: none !important;
}

/* Mobile */
@media (max-width: 767.98px) {
    .offcanvas-collapse {
        position: absolute; /* tadinya fixed */
        top: 100%;          /* mulai tepat di bawah navbar */
        right: 0;
        z-index: 1050;
        width: 100%; 
        max-width: 100%;
        padding: 1.5rem;
        background-color: rgba(46, 44, 71, 0.95);
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(-10px); /* sembunyi ke atas dikit */
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    .offcanvas-collapse.show {
        transform: translateY(0); /* turun */
        opacity: 1;
        pointer-events: auto;
    }

    /* Biar menu mobile rata tengah */
    .offcanvas-collapse .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* semua item di tengah */
        text-align: center;  /* teksnya juga rata tengah */
        width: 100%;
    }

    .offcanvas-collapse .nav-item {
        width: 100%;
    }

    .offcanvas-collapse .nav-link {
        display: block;
        padding: 0.75rem 1rem;
        text-align: center;
    }

    /* Hamburger custom */
    .navbar-toggler-icon {
        position: relative;
        display: block;
        width: 24px;
        height: 18px;
    }

    .navbar-toggler-icon .line {
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    .navbar-toggler-icon .line:nth-child(1) { top: 0; }
    .navbar-toggler-icon .line:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .navbar-toggler-icon .line:nth-child(3) { bottom: 0; }

    /* Animasi jadi X */
    .navbar-toggler:not(.collapsed) .line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .navbar-toggler:not(.collapsed) .line:nth-child(2) {
        opacity: 0;
    }
    .navbar-toggler:not(.collapsed) .line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}