/* --- Global & Font Setup --- */
body {
    background-color: #fff; /* Latar belakang putih bersih */
    font-family: 'Cutive Mono', monospace; /* Font dasar untuk konten */
    margin: 0;
    padding: 20px; /* Beri sedikit jarak dari tepi browser */
}

.container {
    display: flex; /* Ini adalah kunci layout 2 kolom! */
    gap: 30px; /* Jarak antara navigasi dan konten */
    max-width: 900px; /* Atur lebar maksimal situs */
    margin: 0 auto; /* Posisikan di tengah */
}


/* --- Kolom Navigasi Kiri (Sidebar) --- */
.sidebar {
    width: 120px; /* Lebar kolom navigasi */
    flex-shrink: 0; /* Mencegah kolom menyusut */
    display: flex;
    flex-direction: column; /* Susun item navigasi secara vertikal */
    align-items: center; /* Posisikan item di tengah kolom */
    gap: 20px; /* Jarak antar item navigasi */
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #000;
}

.nav-item img {
    width: 40px; /* Ukuran ikon */
    height: auto;
    margin-bottom: 5px; /* Jarak antara ikon dan teks */
}

.nav-item span {
    font-family: 'Gaegu', cursive; /* Font tulisan tangan dari Google Fonts */
    font-size: 1.5em; /* Ukuran font navigasi */
}


/* --- Kolom Konten Kanan (Main Content) --- */
.main-content {
    flex-grow: 1; /* Biarkan kolom ini mengisi sisa ruang */
    display: flex;
    flex-direction: column;
    align-items: center; /* Pusatkan konten secara horizontal */
}

#main-logo {
    max-width: 500px; /* Sesuaikan ukuran logomu */
    margin-bottom: 40px;
}

.artist-showcase {
    width: 100%;
}

.content-block {
    margin-bottom: 30px; /* Jarak antar blok artis */
}

/* Contoh styling untuk blok 'Khaled' yang punya gambar */
.khaled-block {
    display: flex;
    align-items: center;
    gap: 20px; /* Jarak antara teks dan gambar */
}

.khaled-block .text-part {
    /* max-width: 200px; */ /* <-- HAPUS BARIS INI atau ubah jadi lebih besar */
    flex-basis: 50%; /* Ini kunci pembagian ruang di Flexbox */
    flex-shrink: 0;  /* Agar teks tidak menyusut paksa */
}

.khaled-block .image-part {
    flex-basis: 50%; /* Ini kunci pembagian ruang di Flexbox */
    flex-grow: 1;    /* Biarkan gambar mengisi sisa ruang */
    display: flex;   /* Agar img di dalamnya bisa diatur */
    justify-content: center; /* Opsional: Posisikan gambar di tengah di dalam wadahnya */
    align-items: center; /* Opsional: Posisikan gambar di tengah secara vertikal */
}

.khaled-block .image-part img {
    /* HAPUS max-width INI. Biarkan gambar mengambil lebar penuh dari wadahnya. */
    /* max-width: 200px; */ /* <-- HAPUS BARIS INI */
    width: 70%;       /* Biarkan gambar mengisi 100% lebar dari .image-part */
    height: auto;      /* Pastikan gambar tidak gepeng */
}

.content-block h2 {
    font-family: serif; /* Ganti dengan font yang lebih artsy jika mau */
    font-size: 2.5em;
    margin: 0 0 10px 0;
    font-weight: normal;
}

.main-footer {
    margin-top: 50px;
    font-size: 0.8em;
    text-align: center;
}