/* RESET & FONDASI */
body {
    background-color: #121212; /* Latar luar gelap di desktop */
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #EAEAEA;
}

/* KONTAINER MOBILE-ONLY */
.app-container {
    max-width: 480px;
    margin: 0 auto;
    background-color: #1E2022; /* Latar artikel (Abu-abu Gelap) */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    box-sizing: border-box;
}

/* HEADER (Panel Dashboard) */
header {
    background-color: #2C2F33;
    color: #FFFFFF;
    padding: 12px 60px; /* Padding kiri-kanan 60px memberi ruang aman agar teks tidak nabrak logo */
    border-bottom: 2px solid #D4AF37;
    position: relative;
    text-align: center;
    min-height: 60px;
}

/* LOGO DI POJOK KIRI ATAS */
.site-logo {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 32px; /* Ukuran pas presisi */
    width: auto;
    display: block;
    border-radius: 3px;
    background-color: #FFFFFF;
    padding: 2px;
}

/* TEKS JUDUL & TAGLINE DI TENGAH */
header h1 {
    margin: 0;
    font-family: 'Georgia', serif;
    font-size: 20px;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

header h1 a {
    color: #D4AF37;
    text-decoration: none;
}

header p {
    margin: 4px 0 0 0;
    font-size: 11px;         
    color: #A0A5AB;          
    font-weight: 400;        
    line-height: 1.2;
}

/* AREA KONTEN UTAMA */
main {
    padding: 20px;
    flex: 1;
}
main h2 {
    font-family: 'Georgia', serif;
    color: #D4AF37; /* Judul berwarna emas */
    font-size: 22px;
    margin-top: 5px;
    line-height: 1.3;
}
main p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 1.5em;
}

/* LINK INTERNAL */
main a {
    color: #D4AF37;
    text-decoration: underline;
    font-weight: 600;
}

/* FOOTER */
footer {
    background-color: #141517;
    color: #A0A5AB;
    padding: 25px 20px;
    font-size: 14px;
}
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid #2C2F33;
    padding-bottom: 20px;
}
.footer-links strong {
    color: #EAEAEA;
}
.footer-links a {
    color: #A0A5AB;
    text-decoration: none;
}
.footer-links a:hover {
    color: #D4AF37;
    text-decoration: underline;
}
.copyright {
    text-align: center;
    font-size: 11px;
    opacity: 0.5;
    line-height: 1.4;
}