html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}


@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
    margin: 0; /* Menghapus margin default body */
    background-color: #f8f9fa; /* Warna latar belakang untuk melihat efek shadow lebih jelas */
}

a {
    text-decoration: none; /* Menghilangkan garis bawah */
}

.navbar-logo {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(45deg, #3498db, #03e6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Carousel base class */
.carousel {
    margin-bottom: 4rem;
    position : relative;
}

.carousel-caption {
    top: 50%; /* letakkan di tengah */
    bottom: auto; /* jangan pakai bottom lagi */
    transform: translateY(-50%); /* beneran rata tengah */

}

    .carousel-caption h1,
    .carousel-caption p {
        margin-bottom: 0.30rem; /* biar rapih */
    }

    .carousel-caption .btn {
        margin-top: 1rem;
        position: relative;
        top: -10px; /* geser tombol agak ke atas */
    }

.carousel-indicators {
    bottom: 30%; /* lebih fleksibel karena pakai persentase */
}
    .carousel-indicators [data-bs-target] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.2); /* transparan seperti kaca */
        backdrop-filter: blur(4px); /* efek kaca buram */
        -webkit-backdrop-filter: blur(4px); /* support Safari */
        border: 1px solid rgba(255, 255, 255, 0.3);
        opacity: 1;
        transition: all 0.3s ease;
    }

    .carousel-indicators .active {
        background-color: rgba(255, 255, 255, 0.6); /* lebih solid saat aktif */
        border: 1px solid rgba(255, 255, 255, 0.8);
    }
/* Declare heights because of positioning of img element */
/* Animasi degradasi warna */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Animasi untuk garis-garis berjalan */
@keyframes snake-lines {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
    /* Menggeser pola secara diagonal */
}

/* Mengatur gaya dasar untuk carousel item */
.carousel-item {
    height: 100vh;;
    position: relative; /* Penting untuk pseudo-element */
    overflow: hidden; /* Pastikan garis tidak keluar batas */
}

    .carousel-item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        height: 100vh; /* ikut full screen */
        object-fit: cover; /* biar gambar tidak gepeng */
    }


/* Kelas untuk setiap slide dengan degradasi warna dan animasi */
.carousel-item-1 {
    background-image: linear-gradient(to right, #75fff4, #66c7f4, #00aaff, #0d6efd);
    background-size: 200% 200%;
    animation: gradient-animation 7s ease infinite;
}

.carousel-item-2 {
    background-image: linear-gradient(to right, #0d6efd, #6d0dfd, #a10dfd, #e10dfd);
    background-size: 200% 200%;
    animation: gradient-animation 7s ease infinite;
}

.carousel-item-3 {
    background-image: linear-gradient(to right, #52ffa3, #52ffa3, #52ffd1, #75fff4);
    background-size: 200% 200%;
    animation: gradient-animation 7s ease infinite;
}


/* Gaya untuk pseudo-element yang akan menjadi garis-garis */
/*
.carousel-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Agar tidak mengganggu interaksi mouse 
    opacity: 0.5; /* Atur transparansi agar gradien di bawahnya terlihat 
    background-image: repeating-linear-gradient( 45deg, /* Sudut garis 
    rgba(255, 255, 255, 0.5), /* Warna garis 1 (putih transparan) 
    rgba(255, 255, 255, 0.5) 5px, /* Lebar garis 1
    transparent 5px, /* Spasi transparan 
    transparent 10px /* Lebar spasi 
    );
    background-size: 20px 20px; /* Ukuran pola garis (untuk diulang)
    animation: snake-lines 10s linear infinite; /* Animasi pergerakan garis
}



.carousel-item:not(.active)::before {
    opacity: 0; /* Sembunyikan garis saat tidak aktif 
    transition: opacity 0.5s ease-in-out; /* Transisi saat muncul/hilang 
}

.carousel-item.active::before {
    opacity: 0.5; /* Munculkan garis saat aktif 
}

*/

/*Features Icon
--------------------------------------------------*/
.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #fff;
    border-radius: .75rem;
}

.icon-link {
    display: inline-flex;
    align-items: center;
}

    .icon-link > .bi {
        margin-top: .125rem;
        margin-left: .125rem;
        transition: transform .25s ease-in-out;
        fill: currentColor;
    }

    .icon-link:hover > .bi {
        transform: translate(.25rem);
    }

.icon-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    border-radius: .75rem;
}

.rounded-4 {
    border-radius: .5rem;
}

.rounded-5 {
    border-radius: 1rem;
}

.text-shadow-1 {
    text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
}

.text-shadow-2 {
    text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25);
}

.text-shadow-3 {
    text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}

.card-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.marketing h2 {
    font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    /* rtl:remove */
    letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .featurette-heading {
        font-size: 50px;
    }
}

@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 7rem;
    }
}

.glass-button {
    /* Mengatur latar belakang menjadi transparan dengan sedikit warna */
    background-color: rgba(255, 255, 255, 0.15); /* Putih dengan opasitas 15% */
    /* Efek blur (penting untuk glassmorphism) */
    backdrop-filter: blur(10px); /* Sesuaikan nilai blur sesuai keinginan */
    -webkit-backdrop-filter: blur(10px); /* Untuk kompatibilitas Safari */
    /* Border tipis dan lembut */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Bayangan lembut */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /* Menyesuaikan ukuran dan bentuk */
    border-radius: 10px; /* Sudut membulat */
    width: 50px; /* Lebar tombol */
    height: 50px; /* Tinggi tombol */
    /* --- PERUBAHAN UTAMA UNTUK POSISI VERTIKAL DI TENGAH --- */
    /* Mengatur display flex untuk memusatkan ikon di dalam tombol */
    display: flex;
    justify-content: center; /* Memusatkan horizontal ikon */
    align-items: center; /* Memusatkan vertikal ikon */
    /* Override properti top/bottom Bootstrap untuk positioning */
    top: 50%; /* Pindahkan titik referensi ke tengah-tengah secara vertikal */
    transform: translateY(-50%); /* Geser tombol ke atas setengah dari tingginya sendiri */
    opacity: 1; /* Pastikan tombol terlihat */
}

    /* Mengatur warna ikon navigasi agar tetap terlihat */
    .glass-button .carousel-control-prev-icon,
    .glass-button .carousel-control-next-icon {
        filter: invert(100%); /* Membuat ikon putih agar kontras dengan latar belakang gelap */
    }

    /* Efek hover (opsional) */
    .glass-button:hover {
        background-color: rgba(255, 255, 255, 0.25); /* Sedikit lebih opaque saat hover */
        border-color: rgba(255, 255, 255, 0.3);
    }

/* Section Header*/
.section-header {
    display: flex; /* Menggunakan Flexbox */
    align-items: center; /* Menyelaraskan item secara vertikal di tengah */
    justify-content: center;
    gap: 5px; /* Memberi jarak antara elemen (h2 dan ikon) */
    background-color: #ffffff;
    border-radius: 8px;
}

    .section-header h2 {
        margin: 0; /* Menghilangkan margin default dari h2 */
        color: #333;
        font-size: 2em; /* Sesuaikan ukuran font h2 */
    }

    .section-header .icon-default {
        font-size: 2em; /* Sesuaikan ukuran ikon agar sama dengan h2 */
        color: #545353;
    }

    .section-header .icon-login {
        font-size: 2em; /* Sesuaikan ukuran ikon agar sama dengan h2 */
        color: #0d6efd;
    }

    .section-header .icon-register {
        font-size: 2em; /* Sesuaikan ukuran ikon agar sama dengan h2 */
        color: #ffc107;
    }


/* Login Form Container: Ini yang akan mengisi ruang vertikal! */
.login-form-wrapper {
    flex: 1; /* Ini yang membuat elemen ini meregang vertikal */
    display: flex; /* Jadikan juga Flex Container untuk menengahkan form di dalamnya */
    justify-content: center; /* Tengahkan horizontal */
    align-items: center; /* Tengahkan vertikal */
    padding: 20px; /* Padding di sekitar form */
    overflow-y: auto; /* Penting! Jika form terlalu tinggi, hanya area ini yang scroll */
}

.login-form {
    flex: 1;
    display: -ms-flexbox;
    justify-content: center;
    background-color: #ffffff;
    padding-top: 2em;
    padding-bottom: 1em;
    padding-right: 5em;
    padding-left: 5em;
    border-radius: 12px;
    /* Tambahkan utility class shadow di sini */
    /* shadow, shadow-sm, shadow-lg, shadow-none */
}

/* Login Form Container: Ini yang akan mengisi ruang vertikal! */
.register-form-wrapper {
    flex: 1; /* Ini yang membuat elemen ini meregang vertikal */
    display: flex; /* Jadikan juga Flex Container untuk menengahkan form di dalamnya */
    justify-content: center; /* Tengahkan horizontal */
    align-items: center; /* Tengahkan vertikal */
    padding: 20px; /* Padding di sekitar form */
    overflow-y: auto; /* Penting! Jika form terlalu tinggi, hanya area ini yang scroll */
}

.register-form {
    flex: 1;
    display: -ms-flexbox;
    justify-content: center;
    background-color: #ffffff; 
    padding-top: 2em;
    padding-bottom: 1em;
    padding-right: 5em;
    padding-left: 5em;
    border-radius: 12px;
    /* Tambahkan utility class shadow di sini */
    /* shadow, shadow-sm, shadow-lg, shadow-none */
}


.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.form-floating .toggle-password-btn {
    position: absolute;
    right: 1rem; /* Jarak dari kanan */
    top: 50%; /* Pusatkan secara vertikal */
    transform: translateY(-50%); /* Penyesuaian untuk pemusatan yang akurat */
    z-index: auto; /* Pastikan tombol di atas input */
    background: none; /* Hilangkan latar belakang tombol */
    border: none; /* Hilangkan border tombol */
    padding: 0;
    cursor: pointer;
    color: #6c757d; /* Warna ikon */
    font-size: 1.25rem; /* Ukuran ikon */
    line-height: 1; /* Pastikan tinggi baris 1 untuk pusatkan ikon */
    display: flex; /* Menggunakan flexbox untuk memusatkan ikon di dalamnya */
    align-items: center; /* Pusatkan secara vertikal */
    justify-content: center; /* Pusatkan secara horizontal */
}

.form-floating .toggle-password-btn:hover {
    color: #495057; /* Warna ikon saat di-hover */
}

/* Sesuaikan padding kanan pada input agar tidak tertutup tombol */
.form-floating input.form-control {
    padding-right: 3.5rem; /* Beri ruang ekstra untuk ikon */
}


/* Jika Anda menggunakan Bootstrap, Anda mungkin perlu menyesuaikan atau menimpa gaya default Bootstrap */
/* Misalnya, untuk input form-control Bootstrap */
.form-control.readonly-as-disabled {
    background-color: #aeafb0;
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
    border: 1px solid #aeafb0;
    color: #aeafb0;
}

.ralinq-login {
    font-weight: 700;
    width: 100px; /* Ukuran logo (sesuaikan dengan kebutuhan) */
    height: 100px; /* Mempertahankan rasio aspek gambar */
    margin-bottom: unset; /* Spasi di bawah logo */
    display: block; /* Agar logo menempati ruang yang tersedia */
    margin-left: auto; /* Menempatkan logo di tengah jika perlu */
    margin-right: auto; /* Menempatkan logo di tengah jika perlu */
}

.card {
    /* Max-width untuk mengontrol ukuran form di tengah */
    max-width: 420px; /* Lebar maksimum card yang ringkas */
    padding: 30px;
    text-align: center;
    align-content: center;
}

.icon-success {
    font-size: 4rem;
    color: #28a745; /* Warna hijau sukses */
    margin-bottom: 20px;
}

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

.footer {
    background: linear-gradient(to right, #1a1c20, #2c3e50);
    color: #ffffff;
    padding: 70px 0 30px;
    position: relative;
    overflow: hidden;
}

    .footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(to right, #3498db, #2ecc71);
    }

.footer-logo {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #3498db, #2ecc71);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-about {
    color: #a4b5c6;
    margin-bottom: 25px;
    line-height: 1.6;
}

.footer h5 {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 25px;
    position: relative;
}

    .footer h5::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 30px;
        height: 2px;
        background: #3498db;
    }

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links li {
        margin-bottom: 12px;
    }

    .footer-links a {
        color: #a4b5c6;
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-block;
    }

        .footer-links a:hover {
            color: #3498db;
            transform: translateX(5px);
        }

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icon {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .social-icon:hover {
        background: #3498db;
        transform: translateY(-3px);
        color: #fff;
    }

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

    .footer-newsletter input {
        padding: 12px 15px;
        border-radius: 25px;
        border: none;
        width: 100%;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        outline: none;
        padding-right: 50px;
    }

        .footer-newsletter input::placeholder {
            color: #a4b5c6;
        }

.newsletter-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    width: 40px;
    border-radius: 50%;
    background: #3498db;
    border: none;
    color: #fff;
    transition: all 0.3s ease;
}

    .newsletter-btn:hover {
        background: #2980b9;
    }

.footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: #a4b5c6;
}

.footer-bottom-links {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

    .footer-bottom-links a {
        color: #a4b5c6;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .footer-bottom-links a:hover {
            color: #3498db;
        }

@media (max-width: 768px) {
    .footer-section {
        margin-bottom: 40px;
    }
}