/* =========================== */
/* Custom CSS MyHRIS           */
/* =========================== */

/* Body */
body {
    padding-top: 70px; /* untuk navbar fixed */
    font-family: 'Roboto', sans-serif;
}

/* =========================== */
/* Hero Section                */
/* =========================== */
.hero-section {
    background: linear-gradient(to right, #6a0dad, #9b59b6);
    color: #fff;
    padding: 100px 0;
    text-align: center;
}

    .hero-section h1 {
        font-size: 3em;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .hero-section p {
        font-size: 1.2em;
        line-height: 1.6;
    }
/* Efek hover untuk logo */
.logo-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .logo-hover:hover {
        transform: scale(1.15) rotate(-3deg);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    }

/* Teks brand */
.brand-text {
    font-size: 1.3rem;
    color: #6a0dad; /* Ungu sesuai logo */
    background: linear-gradient(90deg, #6a0dad, #9b59b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.3s ease;
}

    .brand-text:hover {
        transform: scale(1.05);
    }
/* =========================== */
/* Features Section            */
/* =========================== */
.features-section {
    padding: 50px 0;
    text-align: center;
}

.feature-icon {
    font-size: 3em;
    color: #6a1b9a; /* warna utama ungu */
    margin-bottom: 15px;
    transition: transform 0.3s, color 0.3s;
}

    .feature-icon:hover {
        color: #9b59b6;
        transform: scale(1.2);
    }

.features-section h3 {
    color: #6a1b9a;
    font-weight: 600;
    margin-bottom: 10px;
}

/* =========================== */
/* Buttons                     */
/* =========================== */
.btn-primary {
    background-color: #6a1b9a;
    border-color: #6a1b9a;
    transition: all 0.3s;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #7b1fa2;
        border-color: #7b1fa2;
    }

/* =========================== */
/* Contact Section             */
/* =========================== */
.contact-section {
    background-color: #f8f8f8;
    padding: 50px 0;
    text-align: center;
}

    .contact-section h2,
    .contact-section h3 {
        color: #6a1b9a;
        font-weight: 600;
    }

    .contact-section .form-group input,
    .contact-section .form-group textarea {
        border-radius: 5px;
        border: 1px solid #ccc;
        padding: 10px;
        width: 100%;
        margin-bottom: 15px;
        transition: border-color 0.3s;
    }

        .contact-section .form-group input:focus,
        .contact-section .form-group textarea:focus {
            border-color: #6a1b9a;
            outline: none;
        }

    .contact-section .btn-primary {
        background-color: #6a1b9a;
        border-color: #6a1b9a;
    }

        .contact-section .btn-primary:hover {
            background-color: #7b1fa2;
            border-color: #7b1fa2;
        }

/* =========================== */
/* Navbar                      */
/* =========================== */
.navbar-nav .nav-link {
    font-size: 0.85rem;
    white-space: nowrap;
    transition: color 0.3s;
}

    .navbar-nav .nav-link:hover {
        color: #6a1b9a;
    }

.small-font {
    font-size: 0.85rem;
}

@media (max-width: 576px) {
    .navbar-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
    }
}
/* Navbar light custom */
.navbar-light .navbar-nav .nav-link {
    color: #6a0dad; /* Ungu sesuai logo */
    font-weight: 500;
    transition: color 0.3s, transform 0.3s;
}

    .navbar-light .navbar-nav .nav-link:hover {
        color: #9b59b6;
        transform: translateY(-2px);
    }

.navbar-light .navbar-brand img {
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

    .navbar-light .navbar-brand img:hover {
        transform: scale(1.1);
    }

.navbar-light .navbar-brand span {
    font-size: 1.25rem;
    color: #6a0dad;
}
/* =========================== */
/* Gradient Background Utility */
/* =========================== */
.bggradient {
    background: linear-gradient(to right, #6a0dad, #9b59b6);
}

/* =========================== */
/* Footer Light & Sticky       */
/* =========================== */
.footer {
    background-color: #f8f9fa; /* light grey / putih cerah */
    color: #343a40; /* teks gelap agar terbaca */
    font-size: 0.9rem;
    padding: 12px 0;
    position: fixed; /* selalu di bawah */
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1000; /* supaya di atas konten lain */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* efek ringan */
}

    .footer a {
        color: #343a40;
        transition: color 0.3s;
    }

        .footer a:hover {
            color: #0d6efd; /* biru highlight saat hover */
            text-decoration: none;
        }

/* Tambahan agar konten tidak tertutup footer */
body {
    padding-bottom: 60px; /* sesuaikan dengan tinggi footer */
}


/* Tambahan agar konten tidak tertutup footer */
body {
    padding-bottom: 60px; /* sesuaikan dengan tinggi footer */
}


/* =========================== */
/* Feature Icon Specific       */
/* =========================== */
.feature-icon.glyphicon-credit-card {
    color: #6a1b9a;
}

.feature-icon.glyphicon-cog {
    color: #6a1b9a;
}
/* Membuat jarak antara radio dan teks */
.radio-list input[type="radio"] {
    margin-right: 5px; /* Jarak antara tombol radio dan teks */
}

/* Opsional: menambah jarak antar item */
.radio-list label {
    align-items: center;
    margin-bottom: 8px; /* Spasi antar opsi radio */
    cursor: pointer;
}

    /* Hover efek */
    .radio-list label:hover {
        color: #6a0dad;
    }