html,
body {
    height: 100%;
    margin: 0;
    background-color: #f8f9fc;
    font-family: 'Poppins', sans-serif;
    /* display: flex;
    flex-direction: column; */
}

.bgauth {
    font-family: 'Poppins', sans-serif;
    background-image: url("../images/bg-login.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    
    /* MODIFIKASI DISINI */
    min-height: 100vh; /* Minimal setinggi layar */
    width: 100%;
    display: flex;
    flex-direction: column;
}

.bgauth::before {
    content: "";
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    /* Gunakan height 100% agar mengikuti tinggi .bgauth */
    height: 100%; 
    /* background: rgba(0, 0, 0, 0.254);  */
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(2px);
    z-index: 1; 
}


.bgauth .card { 
    position: relative; 
    z-index: 10; 
}

.spmb-header {
    background-color: #fff;
    padding: 12px 0;
    border-bottom: 1px solid #eaeaea;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.brand-logos img:hover {
    transform: rotate(-4deg) scale(1.05);
}
.brand-logos {
    display: flex;
    align-items: center;
    gap: 15px;
}

.brand-logos img {
    height: 45px;
}

/* .header-title h1 {
    font-size: 1.35rem;
    margin-bottom: 0;
    font-weight: 700;
    color: #333;
} */
.header-title h1 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    color: #1e293b;
    letter-spacing: -0.5px;
}

.header-title small {
    display: block;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.card {
    transition: all 0.3s ease;
}

.card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-radius: 14px;
    border: none;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.20),
        0 5px 10px rgba(0, 0, 0, 0.15);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
}

.bg-spmb-header {
    position: relative;
    background-image: url("../images/bg-spmb-header.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-spmb-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
}

.bg-spmb-header .text-primary {
    position: relative;
    color: white !important;
}

.auth-logo {
    margin-top: -20px;
    position: relative;
    z-index: 10;
    text-align: center;
}

.account-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-grow: 1; /* Mengambil sisa ruang yang ada */
    position: relative;
    z-index: 10;
    padding: 40px 0; /* Memberi ruang napas atas bawah */
}

.footer-text {
    position: relative; 
    z-index: 10; 
    margin-top: 15px !important;
    color: rgb(104, 104, 104);
    font-weight: 500;
    text-shadow: 0 2px 6px rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.header-buttons .btn {
    font-size: 0.8rem;
    padding: 6px 15px;
    border-radius: 4px;
    font-weight: 500;
}
.cardheader h2 {
    font-size: 1.4rem;
            font-weight: 600;
        }

        .cardheader h3 {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        /* ALERT */
        .alert-perhatian {
            background: #fff4f4;
            border-left: 5px solid #ff4d4f;
            border-radius: 8px;
            padding: 15px;
            font-size: 0.85rem;
        }
        .alert-catatan {
            background: #f4fbff;
            border-left: 5px solid #4dacff;
            border-radius: 8px;
            padding: 15px;
            font-size: 0.85rem;
        }
        .no-border-kiri {
            border-left: 0px solid #ff4d4f !important;
            border-radius: 0px !important;
        }
        
.t-justify{
    text-align: justify;
}
 .required-star {
     color: #d9534f;
     margin-left: 3px;
}

        .hero-section {
            background: linear-gradient(135deg, #556ee6 0%, #3444a1 100%);
            padding: 80px 0 120px 0;
            position: relative;
            color: white;
            overflow: hidden;
        }

        .hero-section::after {
            content: "";
            position: absolute;
            top: -50px;
            right: -50px;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }

        .hero-title {
            font-weight: 800;
            font-size: 2.8rem;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .card-container {
            margin-top: -60px;
            position: relative;
            z-index: 10;
        }

        .card-filter {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(8px);
            border-radius: 15px;
            border: none;
            border-top: 5px solid #f1b44c;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            /* padding: 25px; */
        }
        .border-orange-top{
            border-radius: 15px;
            border: none;
            border-top: 5px solid #f1b44c;
        }
        .border-orange-bottom{
            border-radius: 15px;
            border: none;
            border-bottom: 5px solid #f1b44c;
        }
        .card-border-bottom {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(8px);
            border: none;
            border-bottom: 5px solid #f1b44c;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            /* padding: 25px; */
        }
        .b-radius-top {
            backdrop-filter: blur(8px);
            border-radius: 15px 15px 0px 0px !important;
            border: none;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }
        .b-radius-bottom {
            backdrop-filter: blur(8px);
            border-radius: 0px 0px 15px 15px !important;
            border: none;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }
        .box-border {
         border: 1px solid #426eff25;
            padding: 15px;
        }
        .box-border-header {
            border: 1px solid #426eff25;
               padding: 8px;
               background-color: #f9fbff;
           }
.no-border-radius{
    backdrop-filter: blur(8px);
    border-radius: 0px !important;
}

        .img-hero-anim {
            animation: floating 3s ease-in-out infinite;
            filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
        }

        @keyframes floating {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-15px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        .footer-bottom {
            flex-shrink: 0;
            background: #fff;
            padding: 15px 0;
            border-top: 1px solid #eee;
            width: 100%;
        }

        .img-hero-anim {
            animation: floating 3s ease-in-out infinite;
            filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
        }

        @keyframes floating {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-15px);
            }

            100% {
                transform: translateY(0px);
            }
        }

       
        .helpdesk-section {
            padding: 80px 0;
            /* background: linear-gradient(180deg, #4e73df, #224abe); */
            color: white;
        }

        .helpdesk-img {
            max-width: 450px;
        }

        .helpdesk-title {
            font-weight: 700;
            font-size: 42px;
        }

        .helpdesk-subtitle {
            opacity: 0.9;
        }

        .helpdesk-card {
            background: white;
            color: #333;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            transition: 0.3s;
        }

        .helpdesk-card:hover {
            transform: translateY(-8px);
        }

        .helpdesk-card i {
            font-size: 40px;
            margin-bottom: 10px;
            color: #4e73df;
        }

        .faq-title {
            font-weight: 600;
        }

        .accordion-item {
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        .link-hover {
            transition: all 0.3s ease !important; /* Animasi halus selama 0.3 detik */
        }
        .pointer_tangan{
            cursor: pointer !important;
        }
        
        .link-hover:hover {
            color: #20247eda !important; /* Mengikuti variabel --light-blue Anda agar konsisten */
            text-decoration: underline !important;
        }
          /* Custom Input Style */
          .form-control,
          .form-select {
              border-radius: 6px;
              border: 1px solid #ced4da;
              /* padding: 0.45rem 0.75rem; */
              transition: all 0.2s ease-in-out;
          }
  
          /* Input Disabled (Readonly) */
          .form-control:disabled {
              background-color: #f3f4f7;
              border-color: #e2e5e8;
              color: #6c757d;
              cursor: not-allowed;
          }
          .form-control-proses {
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            padding: 10px;
            font-size: 0.9rem;
        }
        .form-select-proses {
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            padding: 10px;
            font-size: 0.9rem;
        }

        .form-control:focus {
            border-color: #556ee6;
            box-shadow: 0 0 0 3px rgba(85, 110, 230, 0.15);
        }
        #timeBar {
            transition: width 1s linear;
        }
        .page-pendaftaran .form-control.is-invalid,
        .page-pendaftaran .form-select.is-invalid {
            background-image: none !important;
        }
        
        .page-pendaftaran .form-control.is-invalid:focus,
        .page-pendaftaran .form-select.is-invalid:focus {
            background-image: none !important;
        }
        .page-pendaftaran .is-invalid::after {
            display: none !important;
        }
        .text-justify {
            text-align: justify;
            line-height: 1.3;
        }
        .text-left{
            text-align: left;
        }