/* Kontainer Flexbox untuk Centering */
.flash-container {
	position	: fixed; /* Tetap di layar */
	top		: 0;
	left		: 0;
	width		: 100%;
	z-index	: 9999;
	
	/* Perintah Flexbox */
	display				: flex;
	justify-content	: center; /* <<< Kunci Centering Horizontal */
	
	/* Beri sedikit jarak dari atas */
	padding-top	: 25px;

	/* SANGAT PENTING: Agar kontainer tidak bisa di-klik */
	pointer-events	: none;
}

/* Styling utama untuk elemen dialog (lebih sederhana) */
.flash-dialog {
	/* HAPUS SEMUA properti posisi (left, top, transform) */
	
	/* Desain Responsif (tetap sama) */
	width			: 90%; 
	max-width	: 550px; 

	padding			: 1.2rem 1.5rem;
	border-radius	: 10px;
	border			: none;
	box-shadow		: 0 8px 30px rgba(0,0,0,0.15);
	display			: flex;
	align-items		: center;
	gap				: 1rem;
	margin-bottom	: 1rem; /* Jarak antar notifikasi jika ada banyak */

	/* SANGAT PENTING: Agar dialog BISA di-klik */
	pointer-events: auto;
}

/* --- ANIMASI (Lebih Sederhana) --- */

.flash-dialog[open] {
   animation: fadeInDown 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.flash-dialog.hiding {
   animation: fadeOutUp 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes fadeInDown {
	from {
		opacity		: 0;
		transform	: translateY(-50%); /* Hanya perlu animasi vertikal */
	}
	to {
		opacity		: 1;
		transform	: translateY(0);
	}
}

@keyframes fadeOutUp {
	from {
		opacity		: 1;
		transform	: translateY(0);
	}
	to {
		opacity		: 0;
		transform	: translateY(-50%);
	}
}

/* Sisa styling (tidak berubah) */
.flash-dialog p { margin: 0; flex-grow: 1; font-family: sans-serif; }
.flash-dialog--sukses { border-left: 5px solid #28a745; background: var(--color-green);}
.flash-dialog--error { border-left: 5px solid #dc3545; background: var(--color-red);}
.flash-dialog--info { border-left: 5px solid #17a2b8; background: var(--color-brand-2);}
.flash-dialog-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; }