@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --BGBody: #121212;
    --BGCard: #252525;
    --BGCardHover: #373737;
    --ColorText: #F4F2ED;
    --ColorHover: var(--BGCardHover);
    --BGButton: #CEBD63;
    --BGButtonHover: #ae9d4b;
    --ColorButton: #1A1A1A;
    --font1: 'poppins', sans-serif;
    --BGHeaderMobile: #232323;
    --BGHeaderHover: #2E2E2E;
}

*,
body,
html {
    font-family: var(--font1);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    scroll-behavior: smooth;
    border: none;
}

*::selection {
    background: var(--BGButton);
    color: var(--ColorText);
}

::-webkit-scrollbar {
    width: 3px;
    background-color: var(--BGBody);
}

::-webkit-scrollbar-button {
    background-color: var(--BGButton);
}

::-webkit-scrollbar-thumb {
    background-color: var(--BGButton);
}

.btn {
    display: inline-block;
    padding: 1rem 4rem;
    margin-top: 1rem;
    border-radius: 1rem;
    background: var(--BGButton);
    color: var(--ColorButton);
    cursor: pointer;
    font-size: 1.7rem;
    transform: scale(0.95);
}

.btn:hover {
    transform: scale(1);
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
}

section {
    padding: 3rem 2%;
    background: var(--BGBody);
}

@media screen and (max-width: 440px) {
    ::-webkit-scrollbar {
        display: none;
    }
}

/* ---- Reveal saat di-scroll ----
   Hanya aktif kalau JS berjalan (kelas .js-reveal dipasang di assets/js/main.js).
   Tanpa JS, tidak ada aturan yang cocok sehingga konten tampil normal. */
.js-reveal [data-reveal] {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.js-reveal [data-reveal="up"] {
    transform: translateY(26px);
}

.js-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Hormati preferensi pengguna yang mematikan animasi di sistemnya */
@media (prefers-reduced-motion: reduce) {

    .js-reveal [data-reveal],
    .js-reveal [data-reveal].is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}