/* --- Import Font & Tema Utama (Nord) --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --bg-main: #2E3440; --bg-card: #3B4252; --bg-input: #434C5E;
    --border: #4C566A; --text-main: #ECEFF4; --text-subtle: #D8DEE9;
    --text-muted: #a0a5b3; --accent-primary: #88C0D0; --accent-primary-hover: #8FBCBB;
    --accent-secondary: #5E81AC; --accent-red: #BF616A; --accent-orange: #D08770;
    --accent-yellow: #EBCB8B; --accent-green: #A3BE8C;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.25); --border-radius: 12px;
}

/* --- Reset & Gaya Dasar --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Poppins', sans-serif; background-color: var(--bg-main);
    color: var(--text-main); min-height: 100vh; padding: 1rem;
    line-height: 1.6; display: flex; flex-direction: column;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- GANTI SEMUA GAYA FOOTER LAMA DENGAN INI --- */

.footer {
    width: 100%;
    background-color: var(--bg-main); /* Sedikit lebih gelap dari card */
    border-top: 1px solid var(--border);
    padding: 3rem 1.5rem 1.5rem 1.5rem;
    margin-top: auto; /* Mendorong footer ke bawah */
    color: var(--text-muted);
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto 2rem auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    text-align: left;
}

.footer-brand .logo-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-subtle);
}

.footer-brand .logo-icon {
    font-size: 1.8rem;
}

.footer-description {
    margin-top: 1rem;
    font-size: 0.9rem;
    max-width: 300px;
}

.footer-links h4,
.footer-social h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-subtle);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    text-decoration: none;
    color: var(--text-muted);
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--accent-primary);
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icons a {
    color: var(--text-muted);
    font-size: 1.5rem;
    transition: color 0.2s, transform 0.2s;
}

.social-icons a:hover {
    color: var(--accent-primary);
    transform: translateY(-3px);
}

.footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.9rem;
}

.credits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.credits .separator {
    color: var(--border);
}

.credits a {
    color: var(--text-subtle);
    font-weight: 500;
    text-decoration: none;
}

.credits a:hover {
    color: var(--accent-primary);
}

/* --- Pesan Notifikasi Universal --- */
.message { 
    padding: 1rem; 
    margin-bottom: 1rem; 
    border-radius: 8px; 
    text-align: center; 
    font-weight: 500;
}
.message.success { 
    background-color: var(--accent-green); 
    color: var(--bg-main); /* Teks gelap di atas latar hijau terang */
}
.message.error { 
    background-color: var(--accent-red); 
    color: var(--text-main); /* Teks terang di atas latar merah gelap */
}