/* Container umum */
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 15px;
}
/* Navbar style */
.navbar {
background-color: #f8f9fa; /* Light grey */
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Brand */
.navbar-brand {
font-weight: bold;
color: #2c3e50;
}
.navbar-brand:hover {
color: #1abc9c;
}
/* Nav link */
.nav-link {
color: #2c3e50;
transition: color 0.3s ease;
}
.nav-link:hover {
color: #1abc9c;
}
.nav-link.active {
color: #1abc9c;
font-weight: bold;
}
.nav-link.disabled {
color: #adb5bd;
cursor: not-allowed;
}
/* Form di navbar */
.form-control {
border-radius: 20px;
}
.btn-outline-success {
border-radius: 20px;
color: #1abc9c;
border-color: #1abc9c;
}
.btn-outline-success:hover {
background-color: #1abc9c;
color: #fff;
border-color: #1abc9c;
}
/* Header style */
header {
background-color: #ffffff;
border-bottom: 2px solid #1abc9c;
padding: 10px 0;
}
header .header {
width: 100%;
}
/* Toggle icon (hamburger) */
.navbar-toggler {
border: none;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 0, 0, 0.7%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* Responsive adjustment */
@media (max-width: 767.98px) {
.navbar-nav {
text-align: center;
}
}