/* =================================== */
/* 1. Global & Base Styles */
/* =================================== */
*{
	text-decoration: none;
	list-style-type: none;
	box-sizing: border-box; /* Penting untuk tata letak yang konsisten */
}
body{
	background-color: #e0e0e0; /* Warna dasar Neumorphism Light */
	color: #333; /* Warna teks gelap */
	font-family: "Poppins", sans-serif;
	font-size: 16px;
}
span{
	color: #007bff; /* Ganti warna merah menjadi biru untuk kesan profesional */
	font-weight: bold;
	font-size: 1.5rem;
	display: block; /* Agar menempati barisnya sendiri */
	margin-bottom: 20px;
}
.w3-container img{
	width: 80px; /* Diperkecil agar lebih rapi di sidebar */
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

/* =================================== */
/* 2. Neumorphism Base Styles (Light Mode) */
/* =================================== */
/* Base Neumorphism Style */
.neumo-base {
	background-color: #e0e0e0;
	border-radius: 15px; /* Lebih modern */
	box-shadow:
		6px 6px 12px rgba(0, 0, 0, 0.15), /* Bayangan gelap (Shadow) */
		-6px -6px 12px rgba(255, 255, 255, 0.7); /* Bayangan terang (Highlight) */
}

#mySidebar {
	/* Menerapkan Neumorphism */
	@extend .neumo-base;
	border-radius: 20px;
}
#menuRes{
	background-color: #e0e0e0; /* Untuk efek neumorphism */
    box-shadow: 
      5px 5px 10px rgba(0, 0, 0, 0.2),     /* Bayangan gelap di kanan bawah */
      -5px -5px 10px rgba(255, 255, 255, 0.7); /* Bayangan terang di kiri atas */
	border-radius: 20px;
	width: 90%;
	text-align: center;
	margin-left: 5%;
	margin-bottom: 10px;
}
.tombol{
	border-radius: 50%;
}

/* =================================== */
/* 3. Dark Mode */
/* =================================== */
.cerah{
	background-color: #2E334D;
	color: #f0f0f0;
}
.cerah .neumo-base,
.cerah #mySidebar,
.cerah #menuRes,
.cerah .balon,
.cerah #menuRes a.w3-button {
	background-color: #2E334D;
	color: #f0f0f0;
	 box-shadow: 
      5px 5px 10px rgba(0, 0, 0, 0.2),     /* Bayangan gelap di kanan bawah */
      -5px -5px 10px rgba(255, 255, 255, 0); /* Bayangan terang di kiri atas */

}
.cerah #menuRes .w3-cyan {
    background-color: #007bff;
}

/* --- Dark Mode Toggle --- */
/* (Biarkan styling dark mode toggle Anda yang lama) */

/* =================================== */
/* 4. Search Bar */
/* =================================== */
.search-container {
	/* Mengganti display:flex agar form transisi berfungsi baik */
    display: block; 
	margin-bottom: 20px;
}
.search-button {
	/* Diberi lebar penuh agar rapi, atau floating di kiri */
	width: 100px;
	padding: 10px 15px;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 8px; /* Lebih lembut */
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); /* Efek terangkat */
	transition: all 0.3s;
}
.search-button:active {
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3); /* Efek tertekan */
}

/* --- Form Transisi --- */
.search-form-hidden {
	height: 0;
	padding: 0;
	margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-out; /* Animasi yang lebih halus */
	overflow: hidden;
}
.search-form-visible {
	height: 40px; /* Tinggi yang cukup untuk input */
	margin-top: 10px; /* Jarak dari tombol */
    opacity: 1;
    visibility: visible;
	display: flex; /* Aktifkan flex untuk layout input */
	gap: 10px;
	align-items: center;
}
.search-form-visible form {
	display: flex;
	width: 100%;
	gap: 10px;
}

.search-input {
	flex-grow: 1; /* Input mengambil sisa ruang */
	padding: 10px 15px;
	border: none;
	border-radius: 20px; /* Bentuk pil */
	font-size: 1rem;
	/* Neumorphism Inner Shadow */
	background-color: #f0f0f0;
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1), inset -2px -2px 5px rgba(255, 255, 255, 0.7);
	outline: none;
}
.cerah .search-input {
    background-color: #202438;
	color: white;
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5), inset -2px -2px 5px rgba(62, 70, 105, 0.1);
}

.submit-button {
	padding: 10px 15px;
	background-color: #28a745;
	color: white;
	border: none;
	border-radius: 20px;
	transition: background-color 0.3s;
}

/* =================================== */
/* 5. User List (Daftar) */
/* =================================== */
.daftar {
	width: 100%;
	margin-top: 20px;
}
.daftar ul {
	padding: 0;
}
.daftar a {
	display: block; /* Agar seluruh baris bisa diklik */
	margin-bottom: 10px;
}
.balon {
	@extend .neumo-base; /* Mewarisi gaya Neumorphism */
	display: flex; /* Layout menggunakan Flexbox */
	align-items: center;
	padding: 12px 15px;
	border-radius: 15px;
	transition: all 0.2s;
	
	/* Neumorphism: Inner Shadow untuk efek tertekan saat hover */
	box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.05), inset -3px -3px 7px rgba(255, 255, 255, 0.5);
}
.balon:hover {
	/* Saat hover, ganti ke efek terangkat */
	box-shadow:
		6px 6px 12px rgba(0, 0, 0, 0.15),
		-6px -6px 12px rgba(255, 255, 255, 0.7);
}
.balon img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: 15px;
	object-fit: cover;
}
.nama {
	/* Mengatur ulang list styling di dalam li */
	list-style: none;
	padding: 0;
	margin: 0;
	font-weight: 500;
	font-size: 1.1rem;
	line-height: 1.3;
}
/* Menghapus ul <br> di HTML agar tidak ada jarak berlebih */
.daftar a br {
    display: none;
}
.dark{
	width: 0;
	height: 0;
	visibility: hidden;
}
label{
	margin-left: 110px;
	width: 80px;
	height: 30px;
	position: relative;
	display: inline-block;
	background: #ebebeb;
	border-radius: 40px;
	box-shadow: inset 0px 5px 15px rgba(0,0,0,0.4), inset 0px -5px 15px rgba(155,155,155,0.4);
	cursor: pointer;
}
label:after{
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 5px;
left: 10px;
background: linear-gradient(30deg, #ffcc89, #d8860b);
border-radius: 100%;
box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}
.dark:checked + label{
background-color: #242424;
}
.dark:checked + label:after{
	left: 70px;
	transform: translateX(-100%);
	background: linear-gradient(30deg, #777, #3a3a3a);
		box-shadow: inset -6px 5px 0 2px orange;
	
}

/* =================================== */
/* 6. Media Queries & Layout Utama */
/* =================================== */
/* Desktop/Tablet */
@media (min-width: 993px) {
    .w3-main {
        margin-left: 340px !important; 
        margin-right: 40px !important;
    }
}
/* Mobile */
@media (max-width: 992px) {
    .w3-main {
        margin-left: 10px !important; 
        margin-right: 10px !important;
        /* Tambahkan padding-bottom agar konten tidak tertutup menuRes */
        padding-bottom: 70px; 
    }
	#menuRes {
		border-radius: 20px; /* Menyatu di mobile */
	}
}