.elementor-69 .elementor-element.elementor-element-d02ed3d{--display:flex;--background-transition:0.3s;--overlay-opacity:1;border-style:none;--border-style:none;}.elementor-69 .elementor-element.elementor-element-d02ed3d::before, .elementor-69 .elementor-element.elementor-element-d02ed3d > .elementor-background-video-container::before, .elementor-69 .elementor-element.elementor-element-d02ed3d > .e-con-inner > .elementor-background-video-container::before, .elementor-69 .elementor-element.elementor-element-d02ed3d > .elementor-background-slideshow::before, .elementor-69 .elementor-element.elementor-element-d02ed3d > .e-con-inner > .elementor-background-slideshow::before, .elementor-69 .elementor-element.elementor-element-d02ed3d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-69 .elementor-element.elementor-element-a8508b9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-d7d9a3c *//* =================================
   VARIABEL & PENGATURAN DASAR
==================================== */
:root {
    --primary-color: #6A44C4;
    --primary-dark: #5637A1;
    --text-dark: #1F2937;
    --white: #ffffff;
    --background-light: #F9FAFB;
    --border-color: #E5E7EB;
}

body { 
    font-family: 'Inter', sans-serif; 
}

/* =================================
   HEADER & NAVIGASI
==================================== */
header {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
}

.nav-links a:hover,
.nav-links a.active-link {
    color: var(--primary-color);
}

.nav-links .icon-caret {
    font-size: 0.7em; 
    margin-left: 5px;
}

/* Tombol khusus di header agar lebih kecil */
.btn-header {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white);
    transition: background-color 0.3s ease;
}

.btn-header:hover {
    background-color: var(--primary-dark);
}

/* Tombol Menu Mobile */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-dark);
    padding: 10px;
    z-index: 1001;
    transition: color 0.3s ease, transform 0.3s ease;
}

.mobile-menu-btn:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

.mobile-menu-btn .hidden {
    display: none;
}

/* Aturan untuk menu mobile (diaktifkan di bawah 768px) */
@media (max-width: 768px) {
    .main-nav {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        background-color: var(--white);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .main-nav.active {
        display: flex;
        transform: translateX(0);
    }
    
    .main-nav.active .nav-links {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .main-nav.active .nav-links a {
        font-size: 1.2rem;
    }
    
    .main-nav.active .btn-header {
        padding: 12px 24px;
        font-size: 1rem;
    }

    .mobile-menu-btn {
        display: block;
    }
    
    .logo-text {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .logo-text { font-size: 1.1rem; }
    .mobile-menu-btn { font-size: 1.3rem; padding: 8px; }
    .main-nav.active .nav-links a { font-size: 1.1rem; }
    .main-nav.active .btn-header { padding: 10px 20px; }
}/* End custom CSS */