/* Extracted CSS from inline <style> */
        :root {
            --primary-color: #2c7be5;
            --secondary-color: #1a5bb8;
            --success-color: #2c7be5;
            --light-bg: #ffffff;
        }

        body {
            background-color: var(--light-bg);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }

        .auth-container {
            display: flex;
            min-height: 100vh;
            background: #ffffff;
        }

        .info-section {
            flex: 1;
            background: linear-gradient(135deg, #1a5bb8 0%, #1a5bb8 100%);
            color: white;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .carousel-container {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3rem;
        }

        .carousel-logo {
            position: absolute;
            top: 40px;
            left: 70px;
            z-index: 20;
        }

        .system-logo {
            width: 250px !important;
            height: auto;
            display: block;     /* biar nggak center */
        }

        .lock-logo-wrapper {
            position: absolute;
            top: 40px;
            left: 70px;
            z-index: 20;
        }

        .lock-logo {
            width: 260px !important;
            height: auto !important;
        }

        .carousel-content {
            width: 100%;
            max-width: 800px;
        }

        .carousel-item {
            height: 400px;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            border-radius: 18px !important;  /* BIAR NGGAK TAJEM */
        }

        .carousel-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }

        .carousel-caption {
            background: rgba(0, 0, 0, 0.6);
            padding: 1rem 1.4rem;
            border-radius: 12px !important;   /* BIAR NGGAK TAJEM */
            bottom: 20px;
        }

        /* =======================================
        FIX: arrow benar-benar tepat di tengah
        ======================================= */
        .carousel-control-prev,
        .carousel-control-next {
            width: 40px;
            height: 40px;
            background: none !important;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
            opacity: 1;

            /* PENTING: full centering */
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;

            padding: 0 !important;
            margin: 0 !important;
            line-height: 1 !important;
            text-align: center !important;
        }

        /* BULATAN */
        .carousel-control-prev,
        .carousel-control-next {
            width: 40px;
            height: 40px;
            background: transparent !important;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
            opacity: 1;
            position: absolute !important;
        }

        /* HOVER → bulat muncul */
        .carousel-control-prev:hover,
        .carousel-control-next:hover {
            background: rgba(255, 255, 255, 0.9) !important;
        }

        /* HAPUS ICON BOOTSTRAP */
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-image: none !important;
        }

        /* ARROW TIPIS CUSTOM */
        .carousel-control-prev::after,
        .carousel-control-next::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);   /* === CENTER PERFECT === */

            font-size: 26px;
            font-weight: 300;
            color: white;

            margin: 0;
            padding: 0;
            line-height: 1;
        }
            /* Hilangkan semua rounded */
        .no-radius,
        .no-radius * {
            border-radius: 0 !important;
        }
        .carousel-control-prev::after {
            content: "‹";   /* arrow tipis kiri */
        }

        .carousel-control-next::after {
            content: "›";   /* arrow tipis kanan */
        }

        /* HOVER ARROW COLOR */
        .carousel-control-prev:hover::after,
        .carousel-control-next:hover::after {
            color: #1a5bb8;
        }

.login-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: white;
}

.login-form-container {
    width: 470px;
    padding: 52px 45px;
}

.login-form-container .form-control {
    border-radius: 12px !important;
}

.login-form-container .input-group-text {
    border-radius: 0 9px 9px 0 !important;
    -webkit-border-radius: 0 9px 9px 0 !important;
    -moz-border-radius: 0 9px 9px 0 !important;
    -ms-border-radius: 0 9px 9px 0 !important;
    -o-border-radius: 0 9px 9px 0 !important;
}

.login-logo {
    margin-top: -30px !important;
    text-align: center;
    margin-bottom: 2rem;
}

.login-title-icon {
    width: 220px !important;
    height: auto !important;
    margin-bottom: -10px;
}

.login-subtitle {
    color: #666;
    margin-top: 1rem;
    margin-bottom: 20px;
}

.form-label {
    font-weight: 500;
    color: #333;
}

.input-group-text {
    cursor: pointer;
    background-color: #f8f9fa;
}

.btn-login {
    background-color: #1a5bb8 !important;
    border: none;
    padding: 0.75rem;
    font-weight: 500;
}

.btn-login:hover { background-color: #1a5bb8 !important; }

.password-toggle { color: var(--secondary-color); }

.photo-gallery {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.gallery-photo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 5px;
}

.kegiatan-info {
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    border-left: 4px solid #667eea;
}

.system-name {
    position: absolute;
    top: 20px;          /* geser dari atas */
    left: 25px;         /* geser ke kiri */
    z-index: 10 !important;
    margin: 0;
    padding: 0;
    text-align: left !important;
}


@media (max-width: 992px) {
    .auth-container { flex-direction: column; }
    .info-section { min-height: 50vh; }
    .carousel-item { height: 300px; }
    .login-section { padding: 2rem 1rem; }
}

@media (max-width: 768px) {
    .auth-container { flex-direction: column; }
    .info-section { display: none; }
    .login-section { padding: 1rem; }
}