/* ========================================================= */
/* 1. VARIABEL WARNA (Light Mode - Minimalis & Clean Elegance) */
/* ========================================================= */
:root {
    --primary-bg: #F8F9FA;   /* Off-White/Light Gray */
    --secondary-bg: #FFFFFF; /* Card Background/Pure White */
    --text-color: #343A40;   /* Dark Gray (Primary Text) */
    --accent-color: #5DA7DB; /* Soft Blue (Primary Accent) */
    --energy-color: #00A38B; /* Soft Teal/Green (Hover/Secondary Accent) */
    --muted-color: #6C757D;  /* Muted Gray (Secondary Text) */
    --border-color: rgba(0, 0, 0, 0.08); /* Border halus */
    --shadow-light: rgba(0, 0, 0, 0.05); /* Shadow sangat halus */
}

/* ========================================================= */
/* 2. BODY & TATA LETAK UMUM */
/* ========================================================= */
body {
    background-color: var(--primary-bg);
    color: var(--text-color);
    font-family: 'Roboto', sans-serif; 
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
    font-weight: 700;
}

.page-section {
    padding: 6rem 0;
}
.page-section.bg-light { 
    background-color: var(--primary-bg) !important;
}

.page-section-heading {
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: 2.2rem; /* Sedikit lebih kecil agar lebih santai */
    font-weight: 700;
}

/* ========================================================= */
/* 3. NAVBAR */
/* ========================================================= */
#mainNav {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    background-color: var(--secondary-bg) !important;
    border-bottom: 1px solid var(--border-color);
}

/* ========================================================= */
/* 4. HERO SECTION (MASTHEAD) */
/* ========================================================= */
.masthead {
    padding-top: calc(7rem + 104px); 
    padding-bottom: 6rem;
    background-color: var(--primary-bg);
}
.masthead-avatar {
    width: 10rem; /* Sedikit lebih kecil */
    height: 10rem;
    background-color: var(--secondary-bg); 
    border: 3px solid var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    box-shadow: 0 0 0 0.5rem var(--primary-bg);
    font-size: 4rem; /* Ikon lebih kecil */
}

/* Garis Pembatas Aksen */
.divider-custom-icon {
    color: var(--accent-color);
    font-size: 1.5rem; /* Lebih kecil */
    margin: 0 1rem;
}
.typing-effect {
    font-size: 1.3rem; /* Memastikan tagline terbaca jelas */
    font-weight: 300;
}

/* ========================================================= */
/* 5. SKILLS & CARD */
/* ========================================================= */
.skill-card {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.skill-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px var(--shadow-light) !important;
}

.divider-card {
    height: 1px;
    background-color: var(--border-color);
    opacity: 0.8;
    margin-bottom: 1.25rem;
}

/* List style untuk skill */
.list-skills {
    padding-left: 0;
    list-style: none;
    text-align: left;
}
.list-skills li {
    padding: 0.3rem 0;
    color: var(--text-color);
    font-weight: 400;
}
.list-skills li i {
    color: var(--accent-color);
}


/* ========================================================= */
/* 6. PORTFOLIO & BUTTON AKSEEN */
/* ========================================================= */
/* Placeholder untuk gambar proyek */
.portfolio-placeholder {
    height: 180px; /* Lebih ringkas */
    background-color: var(--primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-color);
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border-color);
}
.portfolio-item-caption {
    background-color: rgba(0, 163, 139, 0.85); /* Overlay Teal lembut saat hover */
    opacity: 0;
}

/* Tombol Aksen */
.accent-bg-hover {
    background-color: var(--accent-color) !important;
    color: var(--secondary-bg) !important; 
    border-color: var(--accent-color) !important;
    transition: all 0.3s;
    padding: 0.75rem 1.5rem; /* Lebih santai */
    font-weight: 500;
}
.accent-bg-hover:hover {
    background-color: var(--energy-color) !important; /* Soft Teal/Green saat hover */
    color: var(--primary-bg) !important;
    border-color: var(--energy-color) !important;
}


/* ========================================================= */
/* 7. FOOTER */
/* ========================================================= */
.footer {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--secondary-bg) !important; 
}
.copyright {
    background-color: var(--text-color) !important; 
    color: var(--primary-bg) !important; 
}
.btn-social {
    color: var(--text-color);
    border: 1px solid var(--border-color); /* Border lebih halus */
}
.btn-social:hover {
    background-color: var(--accent-color);
    color: var(--secondary-bg);
    border-color: var(--accent-color);
}