@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa; /* Ubah ke abu muda agar konten putih lebih menonjol */
    overflow-x: hidden;
}

/* --- Global Utilities --- */
a { text-decoration: none; transition: color 0.2s; }
a:hover { color: #555 !important; }

/* --- LOGIN PAGE STYLES --- */
.login-wrapper { width: 100%; max-width: 400px; padding: 20px; }
.input-wrapper { border: 1px solid #000; padding: 10px 20px; background: #fff; display: flex; justify-content: space-between; align-items: center; border-radius: 8px; }
.input-wrapper input { border: none; outline: none; width: 100%; background: transparent; font-size: 1rem; }
.icon-eye { cursor: pointer; margin-left: 10px; display: flex; align-items: center; }
.btn-black { width: 100%; background-color: #000; color: #fff; border: none; padding: 12px; font-weight: 600; border-radius: 50px; transition: background 0.3s; }
.btn-black:hover { background-color: #333; color: white; }
.cover-img { border-radius: 30px; overflow: hidden; height: 100%; width: 100%; }
.cover-img img { width: 100%; height: 100%; object-fit: cover; }

/* --- GLOBAL ADMIN LAYOUT (Sidebar & Content) --- */
/* Sidebar Tetap (Fixed) */
.sidebar-wrapper {
    width: 250px;
    height: 100vh;
    position: fixed; /* KUNCI: Agar sidebar melayang di kiri */
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #fff;
    border-right: 1px solid #dee2e6;
    overflow-y: auto;
}

/* 2. Konten Utama (Geser ke Kanan) */
.content-wrapper {
    margin-left: 250px; /* KUNCI: Memberi jarak agar tidak tertutup sidebar */
    width: calc(100% - 250px);
    min-height: 100vh;
    background-color: #f8f9fa;
    position: relative; /* Agar elemen di dalamnya tertata rapi */
}

/* Link Sidebar */
.sidebar-wrapper .nav-link {
    padding: 12px 20px;
    font-size: 0.95rem;
    color: #333;
    transition: all 0.2s;
}
.sidebar-wrapper .nav-link:hover, 
.sidebar-wrapper .nav-link.active {
    background-color: #f1f1f1;
    color: #000;
    font-weight: 600;
    padding-left: 25px; /* Efek geser */
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .sidebar-wrapper { left: -250px; transition: 0.3s; }
    .content-wrapper { margin-left: 0; width: 100%; }
}