:root {
            --ma-green: #1b5e20;
            --ma-green-dark: #0d320e;
            --ma-gold: #c6a028;
            --ma-light: #f1f8e9;
        }
        
body { font-family: 'Segoe UI', sans-serif; overflow-x: hidden; background: #fff; }

/* Custom Area Wrapper */
.area-wrapper { position: relative; padding: 70px 0; width: 100%; }

/* Navbar & Offcanvas Mobile */
.navbar-brand { font-size: 1.2rem; color: var(--ma-green) !important; }
@media (max-width: 991px) {
	.offcanvas { background-color: var(--ma-green); color: white; width: 280px !important; }
	.offcanvas .nav-link { color: rgba(255,255,255,0.8) !important; font-size: 1.1rem; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
	.offcanvas .nav-link:hover { color: var(--ma-gold) !important; background: rgba(0,0,0,0.1); }
	.offcanvas .btn-close { filter: invert(1); opacity: 1; }
}

/* Hero Slider Customization */
.carousel-item { height: 550px; min-height: 400px; background-color: var(--ma-green); position: relative; }
.carousel-item img { object-fit: cover; height: 100%; width: 100%; opacity: 0.4; }
.carousel-caption { bottom: 20%; z-index: 2; text-align: center; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(27,94,32,0.8)); }

/* Jalur Card Modern (6 Jalur) */
.jalur-card {
	border: none;
	border-radius: 20px;
	background: #fff;
	padding: 30px;
	transition: all 0.4s ease;
	box-shadow: 0 10px 30px rgba(0,0,0,0.05);
	border-top: 5px solid var(--ma-gold);
	height: 100%;
}
.jalur-card:hover { transform: translateY(-12px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); background-color: var(--ma-light); }
.jalur-icon { width: 60px; height: 60px; background: var(--ma-green); color: white; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 20px; }

/* Prosedur Box */
.step-box { background: #fff; border-left: 5px solid var(--ma-gold); border-radius: 10px; padding: 20px; height: 100%; box-shadow: 0 4px 10px rgba(0,0,0,0.03); transition: 0.3s; }
.step-box:hover { background: var(--ma-green); color: white; }
.step-box:hover .text-muted { color: rgba(255,255,255,0.7) !important; }

.text-gradient { background: linear-gradient(to right, #fff, var(--ma-gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.floating-wa { position: fixed; bottom: 25px; right: 25px; z-index: 1050; transition: 0.3s; }
.floating-wa:hover { transform: scale(1.1) rotate(5deg); }

.icon-identitas {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Styling khusus background warna lembut */
.bg-success-subtle { background-color: #e8f5e9 !important; }
.bg-warning-subtle { background-color: #fff8e1 !important; }
.bg-primary-subtle { background-color: #e3f2fd !important; }
.bg-info-subtle { background-color: #e0f7fa !important; }

@media (max-width: 767px) {
	.border-end-mobile { border-right: 1px solid #dee2e6; }
	#identitas { margin-top: -20px; border-radius: 20px 20px 0 0; }
}
	
/* Tambahan Style untuk Sambutan agar lebih manis */
.bg-success-subtle { background-color: #e8f5e9; }
.bg-warning-subtle { background-color: #fff8e1; }

@media (max-width: 991px) {
	#sambutan .ps-4 { padding-left: 0 !important; padding-right: 20px; }
	.area-wrapper { padding: 50px 0; }
	h2 { font-size: 1.8rem !important; }
}

.card-jalur:hover {
        transform: translateY(-12px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
    }
    .fw-800 { font-weight: 800; }

 /* Styling Lingkaran Angka */
    .step-number-circle {
        width: 50px;
        height: 50px;
        background-color: #198754; /* Warna Hijau Success Bootstrap / Khas Madrasah */
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.2rem;
        box-shadow: 0 4px 10px rgba(25, 135, 84, 0.2); /* Shadow halus warna hijau */
        border: 3px solid #e9ecef; /* Border luar tipis agar lebih elegan */
    }

/* Opsional: Memberi efek sedikit membesar pada card saat hover */
.card-custom {
	transition: transform 0.3s ease;
	border-radius: 15px; /* Biar sudutnya lebih halus */
}

.card-custom:hover {
	transform: translateY(-5px);
}

 .hover-opacity:hover {
	opacity: 1 !important;
	color: var(--ma-gold) !important;
	padding-left: 5px;
	transition: all 0.3s ease;
}

footer ul li a {
	transition: all 0.3s ease;
}

footer .btn-outline-light:hover {
	background-color: var(--ma-gold);
	border-color: var(--ma-gold);
	color: #000;
}

.chat-popup {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 280px;
	z-index: 9999;
	border-radius: 15px;
	overflow: hidden;
	border: 1px solid #ddd;
	animation: slideIn 0.3s ease-out;
}

/* Lingkaran Inisial CS */
.icon-circle {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
	font-size: 0.85rem;
	flex-shrink: 0;
}

/* Link Admin Item */
.admin-item {
	text-decoration: none;
	padding: 8px;
	border-radius: 10px;
	transition: background 0.2s;
}

.admin-item:hover {
	background-color: #f8f9fa;
}

.status-online {
	font-size: 11px;
	color: #28a745;
}

.status-online::before {
	content: "●";
	margin-right: 4px;
}

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

/* Menghilangkan scrollbar pada body saat aktif (opsional) */
.d-none { display: none !important; }