/* Base Styles & Typography */
:root {
    /* Default colors - these will be overridden by theme classes */
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --text-color: #333;
    --background-color: #f8f9fa;
    --header-bg: #ffffff;
    --footer-bg: #343a40;
    --footer-text: #f8f9fa;
    --border-color: #dee2e6;
    --max-width: 1200px;
}

/* Theme Variations */
body.theme-default {
    /* Default (Biru/Abu-abu) - Lebih gelap/kaya */
    --primary-color: #0056b3; /* Biru yang lebih kaya */
    --secondary-color: #6c757d;
    --text-color: #333;
    --background-color: #f8f9fa;
    --header-bg: #ffffff;
    --footer-bg: #2b3a4a; /* Abu-abu kebiruan gelap */
    --footer-text: #e0f2f7;
    --border-color: #dee2e6;
}

body.theme-green {
    /* Hijau Alami */
    --primary-color: #1a8a3a; /* Hijau yang lebih dalam */
    --secondary-color: #6c757d;
    --text-color: #333;
    --background-color: #f0fdf4;
    --header-bg: #ffffff;
    --footer-bg: #10361a; /* Hijau hutan gelap */
    --footer-text: #e6ffe6;
    --border-color: #d1e7dd;
}

body.theme-purple {
    /* Ungu Lembut */
    --primary-color: #5a32a0; /* Ungu yang lebih kuat */
    --secondary-color: #6c757d;
    --text-color: #333;
    --background-color: #f5f0fb;
    --header-bg: #ffffff;
    --footer-bg: #3c2363; /* Ungu gelap kebiruan */
    --footer-text: #f0ecfa;
    --border-color: #e0d9f2;
}

body.theme-warm {
    /* Hangat (Oranye/Cokelat) */
    --primary-color: #d86400; /* Oranye pembakar */
    --secondary-color: #6c757d;
    --text-color: #333;
    --background-color: #fffaf0;
    --header-bg: #ffffff;
    --footer-bg: #7d4421; /* Cokelat tua hangat */
    --footer-text: #fff2e0;
    --border-color: #fae6cb;
}

body.theme-mono {
    /* Monokrom (Abu-abu Gelap/Terang) */
    --primary-color: #343a40; /* Abu-abu sangat gelap untuk aksen */
    --secondary-color: #6c757d;
    --text-color: #333;
    --background-color: #f8f9fa;
    --header-bg: #ffffff;
    --footer-bg: #1d2124; /* Hitam keabu-abuan */
    --footer-text: #e9ecef;
    --border-color: #e9ecef;
}

body.theme-pink {
    /* Soft Pink Theme */
    --primary-color: #c0392b; /* Merah bata untuk aksen */
    --secondary-color: #6c757d;
    --text-color: #333;
    --background-color: #fff0f5;
    --header-bg: #ffffff;
    --footer-bg: #8e24aa; /* Ungu gelap ke pink */
    --footer-text: #fcf0f7;
    --border-color: #f7d9e7;
}


/* General Styles - these apply regardless of theme */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Nunito', sans-serif;
    line-height: 1.6;
    color: var(--text-color); /* Uses theme's text color */
    background-color: var(--background-color); /* Uses theme's background color */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px; /* Add padding for smaller screens */
}

a {
    color: var(--primary-color); /* Links will use primary color */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
    list-style: none;
}

/* Header */
.site-header {
    background-color: var(--header-bg); /* Uses theme's header background color */
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color); /* Uses theme's border color */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    justify-content: center; /* Center the site title/logo */
    align-items: center;
}

.site-title { /* This is now a div or span, not h1 */
    font-family: 'Nunito', sans-serif;
    font-size: 1.8em; /* Adjusted size for site branding */
    font-weight: 700;
    margin: 0;
    color: var(--footer-bg); /* Creative Mind text color - consistent with footer background */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-title a {
    color: inherit; /* Inherit color from .site-title */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-title a:hover {
    text-decoration: none;
    opacity: 0.9;
}

.site-title svg {
    width: 30px;
    height: 30px;
    fill: var(--footer-bg); /* Icon color - consistent with footer background */
}

/* Main Content Area - Flexbox Layout */
.main-content-area {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    flex-grow: 1;
}

.post-content {
    flex: 3;
    min-width: 0;
}

.sidebar {
    flex: 1;
    min-width: 250px;
}

/* Article Styling */
article {
    background-color: var(--header-bg); /* Uses theme's header background color */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

/* The actual H1 for the article content */
.post-title { /* This is now the h1 */
    font-family: 'Nunito', sans-serif;
    font-size: 2.2em; /* Slightly larger to signify H1 prominence */
    font-weight: 700; /* Bold for main title */
    margin-bottom: 15px;
    color: var(--primary-color); /* JUDUL ARTIKEL AKAN MENGGUNAKAN PRIMARY COLOR */
}

.post-meta {
    font-size: 0.9em;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.post-meta span {
    margin-right: 15px;
}

.article-body h2, .article-body h3, .article-body h4 {
    font-family: 'Nunito', sans-serif;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: var(--primary-color); /* H2, H3, H4 DALAM ARTIKEL AKAN MENGGUNAKAN PRIMARY COLOR */
}

.article-body p {
    margin-bottom: 1em;
    text-align: justify; /* Ensure justify is applied consistently */
}

.article-body ul, .article-body ol {
    margin-left: 20px;
    margin-bottom: 1em;
}

.article-body li {
    margin-bottom: 0.5em;
}

/* --- Styles for image gallery within article-body --- */
.article-body .gallery-section { /* Container for the image gallery */
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: grid; /* Use grid for better gallery layout */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive columns */
    gap: 25px; /* Space between gallery items */
}

.article-body .blog-post { /* Individual image + info blocks */
    display: flex;
    flex-direction: column; /* Stack image and text vertically within the grid item */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text within post-info */
    background-color: var(--header-bg); /* Use header background color for image cards */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out; /* Smooth transition for card hover */
}

.article-body .blog-post:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

.article-body .post-image-wrap {
    width: 100%; /* Take full width of its column in the grid */
    padding-top: 75%; /* 4:3 aspect ratio (height is 75% of width) for image container */
    position: relative;
    overflow: hidden; /* Crucial for zoom effect */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 15px; /* Space between image and text below it */
}

.article-body .post-image-wrap img.post-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Image fills the padding-top trick container */
    height: 100%; /* Image fills the padding-top trick container */
    object-fit: cover; /* Ensures image covers the area without distortion */
    display: block; /* Remove extra space below image */
    transition: transform 0.3s ease; /* Smooth transition for zoom effect */
}

.article-body .post-image-wrap:hover img.post-thumb {
    transform: scale(1.1); /* Slightly larger zoom effect on hover */
}


.article-body .post-info {
    flex-grow: 1; /* Allows text content to take remaining space */
    width: 100%; /* Ensure text info takes full width within the blog-post */
}

.article-body .post-info .post-title { /* Styling for image gallery titles (now h3) */
    font-size: 1.1em; /* Adjusted font size for image titles */
    margin-top: 0; /* Remove top margin from default h3 style */
    margin-bottom: 8px; /* Space below title */
    color: var(--primary-color); /* GUNAKAN PRIMARY COLOR UNTUK JUDUL GAMBAR */
    font-weight: 700;
    line-height: 1.3;
}

.article-body .post-info p {
    font-size: 0.85em; /* Smaller font for image descriptions */
    color: var(--text-color);
    margin-bottom: 0; /* Remove bottom margin */
    text-align: justify; /* Ensure justify is applied consistently */
}
/* --- End styles for image gallery --- */


/* Ads Placeholder */
.ad-placeholder {
    background-color: var(--background-color);
    border: 1px dashed var(--border-color);
    padding: 20px;
    text-align: center;
    margin-bottom: 25px;
    color: var(--secondary-color);
}

/* Sidebar Styling */
.widget {
    background-color: var(--header-bg); /* Uses theme's header background color */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.widget h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.3em;
    margin-bottom: 15px;
    color: var(--primary-color); /* JUDUL WIDGET AKAN MENGGUNAKAN PRIMARY COLOR */
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.widget ul {
    padding-left: 0;
}

.widget li {
    margin-bottom: 10px;
}

.widget a {
    color: var(--primary-color); /* Link widget akan menggunakan primary color */
    display: block;
}

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

/* Related Posts in Sidebar - Specific Styling */
.sidebar .post-list {
    margin-top: 10px; /* Space from widget title */
}

.sidebar .post-list .post-list-item-title { /* For h4 or h3 inside sidebar post-list */
    font-family: 'Nunito', sans-serif;
    font-size: 1em; /* Smaller font size for sidebar titles */
    font-weight: 600; /* Slightly less bold than main titles */
    margin-bottom: 8px; /* Space between titles */
}

.sidebar .post-list .post-list-item-title a {
    color: var(--text-color); /* Use general text color for sidebar links */
}

.sidebar .post-list .post-list-item-title a:hover {
    color: var(--primary-color); /* Use primary color on hover */
}


/* Footer */
.site-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 20px 0;
    text-align: center;
    font-size: 0.9em;
    margin-top: auto;
}

.site-footer a {
    color: var(--footer-text);
    margin: 0 8px;
}

.site-footer a:hover {
    color: #cccccc;
}

.footer-nav {
    margin-top: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 10px 15px;
    }

    .site-title {
        font-size: 1.6em;
        gap: 8px;
    }

    .site-title svg {
        width: 25px;
        height: 25px;
    }

    .main-content-area {
        flex-direction: column;
        gap: 20px;
    }

    .post-content, .sidebar {
        flex: none;
        width: 100%;
        min-width: unset;
    }

    article {
        padding: 20px;
    }

    .post-title {
        font-size: 1.8em;
    }

    /* Adjust image gallery on mobile */
    .article-body .gallery-section {
        grid-template-columns: 1fr; /* Single column on mobile */
    }

    .article-body .blog-post {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .article-body .post-image-wrap {
        margin-right: 0;
        margin-bottom: 15px;
        width: 100%; /* Full width on mobile */
        padding-top: 75%; /* Maintain aspect ratio */
    }

    .article-body .post-info {
        width: 100%; /* Ensure text info takes full width on mobile */
    }
}

@media (max-width: 480px) {
    .site-title {
        font-size: 1.4em;
    }

    .post-title {
        font-size: 1.5em;
    }

    .site-footer a {
        display: block;
        margin: 5px 0;
    }
}