/* Gaya Animasi Muncul Setelah Video Selesai */
.animate-fade-in {
	animation: fadeInEffect 0.6s ease-in-out forwards;
}

@keyframes fadeInEffect {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes scaleIn {
	from {
		transform: scale(0.95);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.result-box {
	animation: scaleIn 0.3s ease-out;
}

/* Hilangkan semua border bawaan Bootstrap yang memisahkan mereka */
#passwordInput {
	border-right: none !important;
}

.input-group .btn-outline-secondary {
	border-left: none !important;
	border-color: #dee2e6;
	background-color: #fff;
	transition: all 0.2s ease;
}

/* Matikan efek shadow bawaan Bootstrap pada input asli agar tidak double */
#passwordInput:focus,
.input-group .btn-outline-secondary:focus {
	box-shadow: none !important;
	border-color: #dee2e6 !important;
}

/* Ketika ada elemen di dalam input-group yang sedang FOCUS, 
   maka SELURUH KOTAK input-group akan berubah biru bersamaan */
.input-group:focus-within {
	border-radius: 0.375rem; /* Menjaga lekukan Bootstrap */
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Mengubah warna garis tepi kontainer saat focus-within aktif */
.input-group:focus-within #passwordInput,
.input-group:focus-within .btn-outline-secondary {
	border-color: #86b7fe !important;
}

/* Efek Hover yang Stabil */
.input-group .btn-outline-secondary:hover {
	background-color: #f8f9fa !important;
}

/* Ikon Mata Selalu Terlihat Jelas */
#eyeIcon {
	font-size: 1.1rem;
	color: #6c757d;
	display: inline-block;
	vertical-align: middle;
}

.input-group .btn-outline-secondary:hover #eyeIcon {
	color: #0d6efd !important;
}
/* Simulator Font */
#bruteText {
	letter-spacing: 4px;
	min-height: 35px;
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
}

.py-2-5 {
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
}