/* style.css */

/* Mengatur layout utama dengan Flexbox untuk sticky footer */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Plus Jakarta Sans', sans-serif;
}



/* Memastikan konten utama mengambil semua ruang yang tersisa */
main {
    flex-grow: 1;
}

/* =========================================================
   Kode-kode sebelumnya berada di bawah ini
   ========================================================= */

/* Ini adalah contoh kelas kustom yang dibuat dengan Tailwind
   untuk membuat tombol yang konsisten. */
.custom-btn {
    /* Menggunakan @apply untuk menyusun kelas Tailwind menjadi satu kelas kustom */
    @apply bg-[#994d51] text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors hover:bg-[#854448];
}

/* Mengatur section agar hanya satu yang terlihat */
.content-section {
    display: none;
}

.active-section {
    display: block;
}

/* Mengatur tampilan link navigasi yang aktif */
.nav-link.active {
    /* Menggunakan Tailwind @apply */
    @apply text-[#994d51] font-semibold;
    text-decoration: underline;
}

/* Jika Anda ingin membuat kelas CSS kustom lain yang tidak ada di Tailwind,
   Anda bisa menuliskannya di sini. */
.custom-animation {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Styling untuk Tab yang Aktif */
.tab-active {
    color: #994d51;
    /* Warna teks tab aktif */
    border-color: #994d51;
    /* Warna garis bawah tab aktif */
    font-weight: 600;
    /* Tebal teks tab aktif */
}