/* ==========================================================================
   1. IMPORT FONT & CSS VARIABLES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    /* --- Typography --- */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-secondary: 'Lora', Georgia, serif;
    /* --- Color Palette (Modern & Clean) --- */
    --color-primary: #10b981; /* Emerald-500 (Green Primary) */
    --color-primary-dark: #059654; /* Emerald-600 */
    --color-primary-light: #ecfdf5; /* Emerald-50 */
    --color-accent: #166534; /* Emerald-800 (Green Accent for CTAs) */
    --color-accent-dark: #14532d; /* Emerald-900 */
    --color-text: #334155; /* Slate-700 */
    --color-text-light: #64748b; /* Slate-500 */
    --color-text-head: #1e293b; /* Slate-800 */
    --color-white: #ffffff;
    --color-background: #ecfdf561; /* Slate-50 */
    --color-surface: #ffffff;
    --color-border: #e2e8f0; /* Slate-200 */
    /* --- State Colors --- */
    --color-success: #10b981; /* Emerald-500 */
    --color-danger: #ef4444; /* Red-500 */
    --color-warning: #f59e0b; /* Amber-500 */
    /* --- Admin Colors --- */
    --color-admin-bg: #f1f5f9; /* Slate-100 */
    --color-admin-sidebar-bg: #1e293b; /* Slate-800 */
    --color-admin-sidebar-text: #cbd5e1; /* Slate-300 */
    --color-admin-sidebar-hover: #334155; /* Slate-700 */
    /* --- Dimensions & Effects --- */
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --header-height: 80px;
    --container-max-width: 1200px;
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* --- Shadows --- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-glow: 0 0 0 3px rgb(16 185 129 / 0.2); /* Glow effect for focus (Green) */
}
/* ==========================================================================
   2. RESET & GAYA DASAR
   ========================================================================== */
*,*::before,*::after {box-sizing: border-box;}
html { scroll-behavior: smooth;-webkit-text-size-adjust: 100%;}
body {font-family: var(--font-primary);line-height: 1.7;color: var(--color-text);background-color: var(--color-background);margin: 0;padding-top: var(--header-height);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
img {max-width: 100%;height: auto;display: block;}
a {color: var(--color-primary-dark);text-decoration: none; transition: color 0.2s ease;}
a:hover {color:var(--color-primary); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-secondary);font-weight: 600;line-height: 1.3;color: var(--color-text-head);margin-top: 0;}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.3rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.875rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
p {margin-top: 0;margin-bottom: 1.25em;}
small.post-date, small {font-size: 0.875rem;color: var(--color-text-light);}

/* Container Utama UL */
article.post-full ul {
    list-style-type: disc; /* Bullet berbentuk lingkaran hitam */
    margin: 1.5em 0;       /* Jarak atas dan bawah */
    padding-left: 2em;     /* Jarak masuk dari kiri */
}

/* Item List (LI) */
article.post-full ul li {
    margin-bottom: 0.8em;  /* Jarak antar item */
    line-height: 1.7;      /* Jarak antar baris teks (tinggi baris) */
    color: #333;           /* Warna teks */
}

/* Style untuk Sub-List (List di dalam List) */
article.post-full ul ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
/* ==========================================================================
   3. LAYOUT & STRUKTUR UTAMA
   ========================================================================== */
.container { margin: 0 auto; padding: 0; }
.main-content { min-height: calc(90vh - var(--header-height));} 
.content-wrapper { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.home-page .content-wrapper { padding: 0; }
@media (min-width: 992px) { body.single-post .content-wrapper { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 4rem; } }
.main-content-inner { display: flex; flex-direction: column;}
.site-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background-color:#ecfdf575; backdrop-filter: blur(12px); border-bottom: 1px solid #10b98117; z-index: 1000; }
.header-container { height: 100%; max-width: var(--container-max-width); margin: 0 auto; padding-inline: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.site-branding a { font-family: var(--font-secondary); font-size: 1.75rem; font-weight: 700; color: var(--color-text-head); }
.site-branding .site-logo { max-height: 50px; width: auto; }
.site-branding h1 { margin: 0; font-size: 1.5rem; }
.card { background: var(--color-surface); padding: 30px; border-radius: var(--border-radius); margin-bottom: 30px; box-shadow: var(--shadow-sm); }
.post-summary { background: var(--color-surface); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.post-summary:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.post-summary__thumbnail { line-height: 0; }
.post-summary__thumbnail img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.3s ease; }
.post-summary:hover .post-summary__thumbnail img { transform: scale(1.05); }
.post-summary__content { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; gap: 1rem; }
.post-summary__content h3 { font-size: 1.25em; margin: 0 0 10px; }
.post-summary__content h3 a {display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;text-overflow: ellipsis; }
.post-summary__content p { font-size: 0.95rem; flex-grow: 1; margin: 0 0 15px; }
.post-summary__meta { font-size: 0.875rem; color: var(--color-text-light); margin-top: auto; }
.button, button { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; background-color: var(--color-primary); color: var(--color-white); font-weight: 500; font-size: 1rem; border: none; border-radius: var(--border-radius-sm); cursor: pointer; text-decoration: none; transition: var(--transition-base); }
.button:hover, button:hover { background-color: var(--color-primary-dark); color: var(--color-white); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.button--accent { background-color: var(--color-accent); }
.button--accent:hover { background-color: var(--color-accent-dark); }
.button--secondary { background-color: var(--color-surface); color: var(--color-text-head); border: 1px solid var(--color-border); }
.button--secondary:hover { background-color: var(--color-background); }
a.button.button--secondary {background: var(--color-text-light);color: var(--color-white);}
a.button.button--danger, a.button.delete{background: var(--color-danger);}
a.button.button--success,  a.button.cancel {background: var(--color-success);}
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], textarea { width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); font-family: var(--font-primary); font-size: 1rem; background-color: var(--color-surface); color: var(--color-text); transition: var(--transition-base); }
input:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-glow); }
label { display: block; font-weight: 500; margin: 0.5rem 0; color: var(--color-text-head); }
.sidebar { display: flex; flex-direction: column; gap: 2rem; }
.widget { background: var(--color-surface); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: var(--shadow-sm); }
.widget h3 { font-size: 1.125rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--color-primary); }
.search-form { display: flex; gap: 0.5rem; }
.search-form input { margin: 0; }
.search-form button { padding: 0.875rem 1.25rem; }
ul.category-widget { list-style: none; padding: 0; margin: 0; }
ul.category-widget li a { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); transition: color 0.2s ease, padding-left 0.2s ease; }
ul.category-widget li a:hover { color: var(--color-primary); padding-left: 0.5rem; }
ul.widget-recent-posts { list-style: none; padding: 0; margin: 0; }
ul.widget-recent-posts li { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
ul.widget-recent-posts li:first-child { padding-top: 0; }
ul.widget-recent-posts li:last-child { border-bottom: none; padding-bottom: 0; }
a.recent-post-link { display: flex; align-items: center; gap: 15px; text-decoration: none; }
.recent-post-thumbnail { flex-shrink: 0; width: 65px; height: 65px; background-size: cover; background-position: center; border-radius: 4px; }
.recent-post-content { display: flex; flex-direction: column; }
.recent-post-title { font-weight: 500; color: var(--color-text); line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
a.recent-post-link:hover .recent-post-title { color: var(--color-primary); }
.recent-post-date { font-size: 0.85em; color: var(--color-text-light); margin-top: 4px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 3rem; }
.pagination a, .pagination span { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 0.75rem; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); font-weight: 500; color: var(--color-text); background: var(--color-surface); transition: var(--transition-base); }
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination span.current { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); font-weight: 600; }
nav#primary-menu { display: flex; gap: 1.5rem; padding: 0; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 15px; }
.main-navigation a { margin: 0; font-weight: 500; color: var(--color-text-head); padding: .5rem 0; text-decoration: none; position: relative; }
.main-navigation a:hover { color: var(--color-primary); }
.main-navigation a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: var(--color-primary); transform: scaleX(0); transition: transform 0.3s ease; }
.main-navigation a:hover::after { transform: scaleX(1); }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1001; }
.menu-toggle .line { display: block; width: 25px; height: 3px; background-color: var(--color-text-head); margin: 5px 0; transition: all 0.3s ease-in-out; }
@media (max-width: 991px) { .menu-toggle { display: block; } .main-navigation { display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; width: 100%; background-color: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); box-shadow: var(--shadow-md); visibility: hidden; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease-in-out; } nav#primary-menu { gap: 0; padding: 2rem; } .main-navigation.toggled { visibility: visible; opacity: 1; transform: translateY(0); } .main-navigation ul { flex-direction: column; padding: 0; } .main-navigation a { padding: 15px 24px; width: 100%; text-align: left; border-bottom: 1px solid var(--color-border); } .main-navigation a:last-child { border-bottom: none; } .menu-toggle.active .line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-toggle.active .line:nth-child(2) { opacity: 0; } .menu-toggle.active .line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } }
/* ==========================================================================
   6. STYLING SPESIFIK HALAMAN
   ========================================================================== */
/* --- Homepage --- */
body.home-page { padding-top: 0; }
.hero-section {min-height: 100vh;display: flex;align-items: center;justify-content: center;text-align: center;background-color: var(--color-text-head);background-size: cover;background-position: center;background-repeat: no-repeat;background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/1920x1080');}
.hero-content h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: 1rem; line-height: 1;max-width:800px;}
.hero-content p { font-size: 1.25rem; max-width: 700px;font-weight: 600; margin: 0 auto 2rem; }
.hero-content .button { font-size: 1.125rem; padding: 1rem 2rem; }
/* Home Featured Gallery */
.home-featured-gallery {background-color: var(--color-surface); }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.section-header h2 {margin: 0;    font-size: clamp(1.5rem, 3vw, 2rem);}
.gallery-grid-home {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 1.5rem;}
.gallery-item-home {position: relative;aspect-ratio: 1 / 1; border-radius: var(--border-radius);overflow: hidden;}
.gallery-item-home img {width: 100%; height: 100%;object-fit: cover;transition: transform 0.5s ease;}
.gallery-item-home:hover img { transform: scale(1.1); }
.gallery-item-home__caption {position: absolute;inset: 0;display: flex;align-items: flex-end;padding: 1.5rem;background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);color: var(--color-white);font-weight: 500;opacity: 0;transition: var(--transition-base);}
.gallery-item-home:hover .gallery-item-home__caption { opacity: 1; }
.gallery-caption {text-align: center;}
/* --- Gallery Page --- */
.gallery-page .gallery-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));gap:1.5rem;}
.gallery-grid img {border-radius: var(--border-radius-sm);width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}
/* Pastikan class body ditambahkan jika ingin kontrol lebih */
.page .main-content,.gallery-page .main-content,.page-blog .main-content,.single-post .main-content,.category-archive .main-content,.search-results-page .main-content,.page-donasi .main-content{padding: 4rem;}
.gallery-page .main-content-inner > h2 {font-size: clamp(1.5rem, 3vw, 2rem);}
/* Pastikan galeri menggunakan layout 1 kolom & tanpa sidebar */
.gallery-page .content-wrapper {grid-template-columns: 1fr;}
.gallery-page .sidebar {display: none;}
.gallery-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;}
/* Item galeri sekarang adalah tag <a> */
.gallery-item {display: block; position: relative; overflow: hidden;border-radius: var(--border-radius); box-shadow: var(--shadow-sm); aspect-ratio: 1 / 1;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.gallery-item:hover {transform: scale(1.03);box-shadow: var(--shadow-md);}
.gallery-item img {width: 100%; height: 100%;object-fit: cover; transition: transform 0.4s ease;}
.gallery-item:hover img {transform: scale(1.1);}
.gallery-caption {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);color: var(--color-white); padding: 20px 15px;font-size: 1em;text-align: center; transform: translateY(100%);opacity: 0;transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none;}
.gallery-item:hover .gallery-caption {transform: translateY(0);opacity: 1;}
/* --- 404 Page --- */
.error404 .main-content-inner {text-align: center;justify-content: center;}
.error404 h1 {font-size: 8rem;font-weight: 700;color: var(--color-primary);line-height: 1;}
/* --- Single Post --- */
.post-full .featured-image {width: 100%;border-radius: var(--border-radius);margin-bottom: 2rem;}
.post-full h1 { text-align: center; margin-bottom: 1.5rem; }
.post-meta {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 1rem; margin-bottom: 2rem;font-size: 0.875rem;color: var(--color-text-light);}
.post-categories a {padding: 0.25rem 0.75rem; background-color: var(--color-primary-light);color: var(--color-primary-dark); border-radius: 9999px;font-size: 0.8rem;font-weight: 500;}
.post-content {font-size: 1.125rem; line-height: 1.8; max-width: none;}
.post-content h2 { margin-top: 3rem; }
.post-content h3 { margin-top: 2.5rem; }
/* --- Related Posts --- */
.related-posts { padding: 3rem 0;border-top: 1px solid var(--color-border); }
.related-posts-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: 2rem;}
.related-post-item {background: var(--color-surface);border-radius: var(--border-radius);overflow: hidden;box-shadow: var(--shadow-sm);transition: var(--transition-base);}
.related-post-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.related-post-image {background-size: cover;background-position: center;width: 100%;max-height: 150px;object-fit: cover;}
.related-post-content { padding: 1.5rem; }
.related-post-content h4 { margin: 0; }
.related-post-content h4 a { color: var(--color-text-head); }
/* --- Archive & Blog Page --- */
.posts-grid {display: grid; grid-template-columns: 1fr; gap: 2rem;}
@media (min-width: 768px) {.posts-grid { grid-template-columns: repeat(2, 1fr); }}
@media (min-width: 1024px) {.posts-grid { grid-template-columns: repeat(3, 1fr); }}
/* ==========================================================================
   6. STYLING SPESIFIK HALAMAN (Berdasarkan $body_class)
   ========================================================================== */
section.hero-section, .home-snippet-section, .home-contact-section,section.home-featured-gallery, section.home-post { padding: 8rem 4rem; }
section.home-contact-section h2 {text-align: center;}
/* Buat section kedua (dan seterusnya) memiliki warna berbeda */
section.home-featured-gallery { background-color: var(--color-border); }
.home-snippet-section:nth-of-type(even) { background-color: var(--color-surface); }
.snippet-wrapper { display: flex; flex-direction: column; gap: 5rem; align-items: center; }
.snippet-content { flex: 1; }
.snippet-content h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-bottom: 1.5rem; color: var(--color-text-head); }
.snippet-content .content-area { font-size: 1.125rem; line-height: 1.7; color: var(--color-text-light); margin-bottom: 2rem; }
/* --- Media Snippet (Gambar & Video) --- */
.snippet-media { flex: 1; flex-shrink: 0; width: 100%; max-width: 500px; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-lg); }
/* Styling untuk gambar di dalam snippet */
.snippet-image img { width: 100%; max-height: 300px; object-fit: cover; transition: transform 0.5s ease; }
.snippet-media:hover .snippet-image img { transform: scale(1.05); }
/* --- Styling KHUSUS untuk Video Responsif --- */
.video-responsive { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; background-color: #000; }
.video-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: var(--border-radius); }
/* --- Halaman Statis (PAGE) --- */
.page .sidebar { display: none; }
.page .content-wrapper { grid-template-columns: 1fr;}
.page .content-wrapper img { float: left; margin:0;}
/* Template: Default (konten di tengah, lebar sedang) */
.page.template-default .main-content-inner { max-width: 800px; margin: 0 auto;}
.page.template-narrow .main-content-inner { max-width: 650px; margin: 0 auto; }
.page.template-full-width .main-content-inner { max-width: 100%;}
/* --- Komentar & Form --- */
.comments-section { padding-top: 30px; border-top: 1px solid var(--color-border); }
.comment { border-bottom: 1px solid var(--color-border); padding: 30px; margin-bottom: 1rem; background: var(--color-surface); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition-base); }
.comment p { margin: 0 0 5px 0; display: flex; justify-content: space-between; align-items: center; }
.comment-form { margin-top: 30px; padding: 30px; background: var(--color-surface); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition-base); }
.comment-form input, .comment-form textarea, .editor-form input, .editor-form textarea, input[type="search"] { padding: 12px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 1em; background-color: var(--color-surface); transition: border-color 0.2s, box-shadow 0.2s; }
.comment-form button.button { margin-top: 0.75rem; }
/* ==========================================================================
   STYLING UNTUK SECTION KONTAK & PETA
   ========================================================================== */
.snippet-sections {background: var(--color-primary-light);}
.contact-wrapper {display: grid;grid-template-columns: 1fr;gap: 5rem;align-items: center;}
@media (min-width: 992px) {.contact-wrapper { grid-template-columns: 1fr 1fr;gap:5rem; }}
.contact-info h2 {margin-top: 0;font-size: clamp(1.5rem, 3vw, 2rem);}
.contact-info .content-area p { line-height: 1.8;}
.contact-info .content-area strong { color: var(--color-text);}
.contact-map {border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-md); line-height: 0;}
/* Trik untuk iframe responsif (sama seperti video) */
.map-responsive {position: relative;padding-bottom: 75%; height: 0; overflow: hidden;}
.map-responsive iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
/* ==========================================================================
   STYLING UNTUK HALAMAN 404
   Body Class: .error404
   ========================================================================== */
/* Pastikan layout satu kolom dan tanpa sidebar (mungkin sudah ada) */
.error404 .content-wrapper {grid-template-columns: 1fr;}
.error404 .sidebar {display: none;}
/* Kontainer utama untuk memusatkan konten 404 */
.not-found-container {display: flex; flex-direction: column; align-items: center; justify-content: center;text-align: center;padding: 40px 0;}
.not-found-content {max-width: 600px;}
.not-found-title {font-size: 6em;font-weight: 700; color: var(--color-primary); margin: 0;line-height: 1;}
.not-found-content h2 {font-size: clamp(1.5rem, 3vw, 2rem); margin: 10px 0;}
.not-found-content p {color: var(--color-text-light);}
/* Styling untuk form pencarian di halaman 404 */
.not-found-search {margin: 40px 0;}
.search-form-404 {display: flex; max-width: 400px; margin: 15px auto 0;}
.search-form-404 input {flex-grow: 1; border-right: none;border-radius: 50px 0 0 50px;padding-left: 20px;}
.search-form-404 button {border-radius: 0 50px 50px 0;}
/* Garis pemisah */
.not-found-divider {border: none;border-top: 1px solid var(--color-border);margin: 40px 0;}
/* Daftar rekomendasi artikel */
.not-found-suggestions {list-style: none;padding: 0;margin: 20px 0 0 0;text-align: center;}
.not-found-suggestions li {margin-bottom: 10px;}
.not-found-suggestions a {font-weight: 500;font-size: 1.1em;}
/* ==========================================================================
   STYLING UNTUK HALAMAN DONASI
   ========================================================================== */
.donation-container .post-full { padding: 40px 0; }
.donation-container .main-content-inner { padding: 0; }
#impact-description { min-height: 3.5em; transition: all 0.3s ease; border-left: 3px solid var(--color-primary); padding-left: 15px; text-align: left; margin: 20px 0; }
.donation-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 30px 0; }
.donation-amount { background-color: var(--color-background); border: 2px solid var(--color-border); padding: 15px; font-size: 1.1em; font-weight: 700; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; color: var(--color-text); }
.donation-amount:hover { border-color: var(--color-primary); color: var(--color-primary); }
.donation-amount.active { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); transform: scale(1.05); }
.custom-amount-wrapper { margin: 20px 0;text-align: center; }
.custom-amount-wrapper .input-group { display: flex; align-items: center; margin: 10px auto; justify-content: center; }
.input-group span { padding: 12px; font-size: 1em; font-weight: 700; background-color: #e9ecef; border: 1px solid var(--color-border); border-right: none; border-radius: 4px 0 0 4px; line-height: 1.2; }
#custom-amount { border-radius: 0 4px 4px 0; text-align: right; font-weight: 700; font-size: 1.1em; padding: 12px; border: 1px solid var(--color-border); }
.button-donate { width: 100%; padding: 15px; font-size: 1.2em; font-weight: 700; }
.main-footer { text-align: center; font-size: 0.9em; background: var(--color-text); padding: 40px 0; color: rgba(255, 255, 255, 0.7); }
/* --- ATURAN BARU UNTUK NAVIGASI FOOTER --- */
.footer-navigation { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px 30px; list-style: none; padding:0 2rem; margin: 0 0 30px 0; }
.footer-navigation a { color: var(--color-primary); text-decoration: none; font-weight: 400; transition: color 0.2s ease; }
.footer-navigation a:hover { color: var(--color-primary-light); }
.footer-social-links {display: flex; justify-content: center;gap: 20px; margin: 0 0 30px 0;}
.footer-social-links a {color: var(--color-primary);transition: color 0.2s ease, transform 0.2s ease;}
.footer-social-links a:hover {color:var(--color-primary-light); transform: scale(1.1);}
/* Teks Copyright */
.copyright-text { margin: 0; padding: 2rem 2rem 0; font-size: 85%; border-top: 1px solid rgba(255, 255, 255, 0.1); }
/* --- Layout Alternatif (Kiri/Kanan) --- */
/* Terapkan class 'layout-kanan' pada .snippet-wrapper via PHP */
@media (min-width: 992px) {
   .snippet-wrapper { flex-direction: row; text-align: left; }
   /* Untuk layout yang media-nya di sebelah kanan */
   .snippet-wrapper.layout-kanan { flex-direction: row-reverse; }
   .snippet-wrapper.layout-kanan .snippet-content { text-align: right; }
}
@media screen and (max-width: 600px) {    
   .home-snippet-section, section.hero-section, 
   .home-snippet-section, section.home-featured-gallery, 
   section.home-post, section.hero-section,
   .page .main-content,
   .home-contact-section,
   .gallery-page .main-content,
   .page-blog .main-content,
   .single-post .main-content,
   .category-archive .main-content,
   .search-results-page .main-content,
   .page-donasi .main-content,
   .not-found-container { padding: 2rem; }
   .section-header {flex-direction: column; gap: 1rem;}
   .page.template-full-width .main-content-inner, .main-content-inner {padding: 0;}
   .gallery-grid-home, .gallery-page .gallery-grid {grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));}
   .snippet-wrapper,.contact-wrapper {gap: 2rem;}
   .snippet-content .content-area{margin:0;}
   .donation-options { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7. HALAMAN KHUSUS (LOGIN & ADMIN)
   ========================================================================== */
/* --- Login Page --- */
.login-page { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.login-page .site-header, .login-page .main-footer { display: none; }
.login-container { min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 2rem;}
.login-card {width: 100%;max-width: 400px; padding: 2.5rem;background: var(--color-surface);border-radius: var(--border-radius);box-shadow: var(--shadow-lg);}
.login-card h2 { margin-bottom: 1.5rem; }
.login-button { width: 100%; margin-top: 1rem; }
.login-logo { margin-bottom: 20px; }
.login-logo img { max-height: 60px; width: auto; margin: 0 auto; }
.login-card h2 {font-family: var(--font-primary);font-weight: 700;margin-top: 0;margin-bottom: 20px; color: var(--color-text);}
.login-error {background-color: #fed7d7;color: #c53030;padding: 10px;border-radius: 4px;margin-bottom: 15px;border: 1px solid #fbb6b6;}
.login-footer {margin-top: 25px;font-size: 0.9em;}
.login-footer a {color: var(--color-text-light); text-decoration: none;}
.login-footer a:hover {color: var(--color-primary);text-decoration: underline;}
/* --- Halaman Admin --- */
.admin-page { background-color: var(--color-admin-bg); padding-top: 0; }
.admin-page .site-header, .admin-page .main-footer { display: none; }
.admin-page .content-wrapper {display: flex;gap: 2rem;padding: 2rem;}
.admin-page select {width: 100%; padding: 12px 15px; margin-bottom: 15px; border: 1px solid var(--color-border);border-radius: 4px; font-size: 1em; background-color: var(--color-surface);}
.admin-main-content h1 {margin-top: 0;font-size: 2rem;}
.admin-sidebar { width: 260px;flex-shrink: 0; background-color: var(--color-admin-sidebar-bg); padding: 1.5rem;border-radius: var(--border-radius);height: calc(100vh - 4rem);position: sticky;top: 2rem;}
.admin-sidebar h3 { color: var(--color-white);margin-top: 0;}
aside.admin-sidebar nav {margin-bottom: 1.5rem;}
.admin-sidebar nav a {display: block;color: var(--color-admin-sidebar-text);padding: 10px;border-radius: 4px;margin: 5px 0;}
.admin-sidebar nav a:hover {background-color: var(--color-admin-sidebar-hover);color: var(--color-white);text-decoration: none;}
.admin-main-content { flex-grow: 1; }
.admin-card { background: var(--color-surface); margin-bottom: 2rem; padding: 2rem; border-radius: var(--border-radius); }
.admin-card-header h2, .admin-card__header h2 {margin-top: 0; font-size: 1.5rem;}
.admin-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); }
.admin-page table { width: 100%; border-collapse: collapse; margin-top:10px;}
.admin-page th, .admin-page td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--color-border); }
.admin-page thead th { background-color: var(--color-admin-bg); font-weight: 600; }
.admin-page .action-buttons { display: flex; gap: 8px; }
.admin-page .action-buttons .button, .admin-page a.button.button { padding: 8px 12px; font-size: 0.9em;margin-bottom: 2px;}
.admin-page .category-list { display: flex; gap: 20px; margin-bottom: 10px; }
.admin-page .form-group { margin-bottom: 1rem; }
.admin-page .admin-gallery-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 5px;}
.admin-gallery-item {display: flex;flex-direction: column;justify-content: space-between;}
.admin-gallery-item img { max-height: 120px; object-fit: cover; border-radius: var(--border-radius-sm); }
.admin-page .pagination a,.admin-page .pagination span {min-width: 36px;height: 36px;font-size: 0.9em;}
/* Styling untuk Layout Dua Kolom di Admin */
.admin-grid-two-col {display: grid;grid-template-columns: 1fr;gap: 30px;}
@media (min-width: 992px) {.admin-grid-two-col {grid-template-columns: 1fr 2fr;}}