/*
Theme Name: Desa Cijulang
Theme URI: https://desacijulang.id
Author: Pemerintah Desa Cijulang
Author URI: https://desacijulang.id
Description: Tema resmi Pemerintah Desa Cijulang, Kecamatan Cineam, Kabupaten Tasikmalaya. Bernuansa Sasakala Cineam: hangat, membumi, dan bertutur, dengan palet kayu, hutan, sungai, dan daun lontar. Dilengkapi layanan surat online (via WhatsApp), berita, dokumen & transparansi APBDes, galeri, struktur aparatur, dan pengaturan lengkap lewat Customizer.
Version: 2.7.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: desa-cijulang
Tags: government, custom-logo, custom-menu, featured-images, translation-ready, theme-options, one-column, two-columns
*/

/* =====================================================================
   SASAKALA CINEAM
   Palet dari lanskap cerita:
   krem lontar (latar) | hijau hutan Wanalapa | biru kelabu Citanduy
   kuning bambu haur   | coklat kayu & tanah merah
   ===================================================================== */
:root {
    --lontar: #f4ecd8;
    --lontar-2: #faf5e7;
    --daun: #fffcf3;
    --garis: #decfae;
    --ink: #3a3025;
    --kayu: #5f3822;
    --tanah: #8c4426;
    --hutan-950: #232f1c;
    --hutan-900: #2e3d25;
    --hutan-700: #4a6636;
    --hutan-500: #6a8750;
    --hutan-200: #cdd9b6;
    --sungai-700: #394b56;
    --sungai-500: #526e7c;
    --sungai-400: #6c8896;
    --bambu: #d4b13f;
    --bambu-muda: #efdc8a;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --dc-land-h: clamp(110px, 17vw, 240px);
    --kertas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .30 0 0 0 0 .16 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; font-size: 106.25%; scrollbar-color: var(--hutan-700) #e5d8b9; }

body {
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background-color: var(--lontar);
    background-image: var(--kertas);
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .dc-serif { font-family: 'Literata', Georgia, 'Times New Roman', serif; font-optical-sizing: auto; }
::selection { background: var(--bambu-muda); color: var(--hutan-900); }
:focus-visible { outline: 3px solid var(--sungai-700); outline-offset: 3px; border-radius: 3px; }
#site-header :focus-visible, .dc-footer :focus-visible, .dc-hero :focus-visible, .dc-banner :focus-visible { outline-color: var(--bambu-muda); }

/* Pita latar: selang-seling krem biasa dan krem terang */
section.bg-white { background-color: var(--lontar); background-image: var(--kertas); }
section.bg-slate-50 { background-color: var(--lontar-2); background-image: var(--kertas); }
section[class*="border-emerald-100"] { border-color: var(--garis); }

/* ---- Header: transparan di atas, kayu-hutan pekat saat di-scroll ---- */
#site-header { border-bottom: 1px solid rgba(239,220,138,.25); transition: background-color .3s, box-shadow .3s; }
#site-header.is-solid { background-color: rgba(35,47,28,.97); border-bottom-color: rgba(239,220,138,.4); box-shadow: 0 4px 18px rgba(30,20,10,.28); }
.admin-bar #site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #site-header { top: 46px; } }

.dc-nav-menu, .dc-nav-menu ul { list-style: none; margin: 0; padding: 0; }
.dc-nav-menu { display: flex; align-items: center; gap: .1rem; }
.dc-nav-menu a {
    position: relative; display: block; padding: .55rem .85rem; border-radius: .3rem;
    color: rgba(250,245,231,.92); text-decoration: none; font-size: .9rem; font-weight: 600;
    background: transparent !important; transition: color .2s;
}
.dc-nav-menu a::after {
    content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .2rem; height: 2px;
    background: var(--bambu-muda); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.dc-nav-menu a:hover { color: #fff; }
.dc-nav-menu a:hover::after,
.dc-nav-menu .current-menu-item > a::after,
.dc-nav-menu .current_page_item > a::after,
.dc-nav-menu .current-page-ancestor > a::after { transform: scaleX(1); }
.dc-nav-menu .current-menu-item > a, .dc-nav-menu .current_page_item > a, .dc-nav-menu .current-page-ancestor > a { color: var(--bambu-muda); }

.dc-mobile-menu, .dc-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.dc-mobile-menu a { display: block; padding: .7rem .75rem; border-radius: .3rem; color: #fff; text-decoration: none; font-weight: 600; }
.dc-mobile-menu a:hover, .dc-mobile-menu .current-menu-item > a { background: rgba(255,255,255,.1); color: var(--bambu-muda); }

.dc-footer-menu { list-style: none; margin: 0; padding: 0; }
.dc-footer-menu li { margin-bottom: .5rem; }
.dc-footer-menu a { display: inline-block; color: var(--hutan-200); text-decoration: none; font-size: .85rem; transition: color .2s, transform .2s; }
.dc-footer-menu a:hover { color: var(--bambu-muda); transform: translateX(3px); }

/* ---- Konten editor WordPress: narasi nyaman dibaca ---- */
.entry-content { line-height: 1.8; }
.entry-content p, .entry-content li { max-width: 68ch; }
.entry-content h2, .entry-content h3, .entry-content h4 { font-family: 'Literata', Georgia, serif; color: var(--hutan-900); }
.entry-content img { max-width: 100%; height: auto; border-radius: .4rem; }
.entry-content a { color: var(--hutan-700); text-underline-offset: 3px; }
.entry-content blockquote, .dc-kutipan {
    margin: 1.75rem 0; padding: 1rem 1.25rem 1rem 1.5rem; max-width: 62ch;
    font-family: 'Literata', Georgia, serif; font-style: italic; color: var(--kayu);
    background: var(--lontar-2); border-left: 4px solid var(--sungai-400); border-radius: 0 .4rem .4rem 0;
}
.entry-content blockquote p { margin: 0; }
.alignleft { float: left; margin: 0 1rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text, figcaption { font-size: .8rem; color: #78694f; }
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px;
    overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.nav-links { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.nav-links .page-numbers { padding: .4rem .8rem; border-radius: .4rem; border: 1px solid var(--garis); color: var(--hutan-700); text-decoration: none; font-size: .9rem; background: var(--daun); }
.nav-links .page-numbers.current { background: var(--hutan-700); border-color: var(--hutan-700); color: #fff; }

/* Istilah Sunda: miring, bergaris titik, arti muncul saat disentuh/diarahkan.
   Pemakaian: <span class="dc-istilah" data-arti="lubuk sungai yang dalam" tabindex="0">leuwi</span> */
.dc-istilah { position: relative; font-style: italic; border-bottom: 1px dotted var(--tanah); cursor: help; }
.dc-istilah[data-arti]:hover::after, .dc-istilah[data-arti]:focus::after {
    content: attr(data-arti); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
    width: max-content; max-width: 16rem; z-index: 30; padding: .4rem .65rem; border-radius: .3rem;
    background: var(--hutan-900); color: var(--lontar-2); font-style: normal; font-size: .85rem; line-height: 1.4;
}

/* Lightbox galeri */
#dc-lightbox { display: none; }
#dc-lightbox.is-open { display: flex; }

/* Cetak */
@media print {
    #site-header, footer, .floating-wa, .no-print, button { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    #dc-progress, #dc-top { display: none !important; }
}

/* ---- Muncul bertahap seperti membuka gulungan lontar ---- */
.js [data-reveal] {
    opacity: 0; clip-path: inset(0 0 100% 0);
    transition: opacity .9s ease, clip-path 1.1s var(--ease);
    transition-delay: var(--dc-delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; clip-path: inset(-40px -40px -40px -40px); }
@media (prefers-reduced-motion: reduce), (scripting: none) {
    .js [data-reveal] { opacity: 1; clip-path: none; transition: none; }
}
.no-anim [data-reveal] { opacity: 1 !important; clip-path: none !important; transition: none !important; }

/* ---- Progres scroll (sungai mengalir) + tombol kembali ke atas ---- */
#dc-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 70; background: linear-gradient(90deg, var(--sungai-500), var(--sungai-400)); }
.admin-bar #dc-progress { top: 32px; }
#dc-top {
    width: 3rem; height: 3rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    background: var(--hutan-700); color: var(--lontar-2); border: 1px solid rgba(239,220,138,.55);
    box-shadow: 0 8px 20px -8px rgba(35,47,28,.7);
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity .3s, transform .3s var(--ease), background-color .2s;
}
#dc-top.is-show { opacity: 1; transform: none; pointer-events: auto; }
#dc-top:hover { background: var(--hutan-900); }

/* ---- Hero: hutan, sungai, kijang ---- */
.dc-hero-img { animation: dc-perlahan 40s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes dc-perlahan { from { transform: scale(1); } to { transform: scale(1.05); } }

/* Slide gambar banner beranda: bergantian perlahan */
.dc-slides { position: absolute; inset: 0; }
.dc-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.dc-slide.is-active { opacity: 1; }
.dc-dots { position: absolute; z-index: 10; left: max(1rem, calc((100% - 80rem) / 2 + 2rem)); bottom: calc(var(--dc-land-h) * .62); display: flex; gap: .4rem; }
.dc-dot {
    position: relative; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 9999px; background: transparent; cursor: pointer;
}
.dc-dot::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem; border-radius: 9999px;
    border: 2px solid var(--lontar); background: transparent; transition: background-color .2s, transform .2s;
}
.dc-dot:hover::before { background: rgba(244,236,216,.5); }
.dc-dot.is-active::before { background: var(--bambu-muda); border-color: var(--bambu-muda); transform: scale(1.15); }
.dc-dot:focus-visible { outline: 3px solid var(--bambu-muda); outline-offset: 0; }
.dc-hero-edit {
    position: absolute; z-index: 12; right: 1rem; top: 8.25rem; display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .8rem; border-radius: .4rem; font-size: .85rem; font-weight: 700; text-decoration: none;
    color: var(--hutan-900); background: var(--lontar-2); border: 1px solid var(--garis); box-shadow: 0 6px 16px -8px rgba(20,14,6,.6);
}
.dc-hero-edit:hover { background: #fff; }
.admin-bar .dc-hero-edit { top: 10rem; }
@media (prefers-reduced-motion: reduce) { .dc-slide { transition: none; } }
.no-anim .dc-slide { transition: none; }

/* Pola tenun kanteh sebagai latar halus */
.dc-pattern {
    pointer-events: none; opacity: .9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 24 12 12 24 24 36 12 48 24M0 36 12 24 24 36 36 24 48 36M0 12 12 0 24 12 36 0 48 12' fill='none' stroke='%23efdc8a' stroke-opacity='.2' stroke-width='1'/%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.25) 100%);
    mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.25) 100%);
}

.dc-landscape { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; width: 100%; height: var(--dc-land-h); pointer-events: none; }
.dc-kijang {
    position: absolute; z-index: 2; right: 9%; bottom: calc(var(--dc-land-h) * .36);
    width: clamp(70px, 11vw, 150px); height: auto; color: var(--lontar); opacity: .88; pointer-events: none;
}
.dc-kujang {
    position: absolute; z-index: 2; right: 15%; top: 50%; height: min(68%, 470px); width: auto;
    color: var(--bambu-muda); opacity: .85; pointer-events: none;
    transform: translateY(-52%) rotate(14deg); transform-origin: 50% 60%;
    filter: drop-shadow(0 6px 14px rgba(20,14,6,.45));
}
.dc-kujang > path:first-child { fill-opacity: .26; }
@media (max-width: 1023px) { .dc-kujang { right: -3%; height: 46%; top: 54%; opacity: .3; } }
@media (max-width: 640px)  { .dc-kujang { height: 38%; opacity: .22; } }
.dc-daun {
    position: absolute; z-index: 2; right: 5%; top: 7rem; width: clamp(40px, 5vw, 64px); height: auto;
    color: var(--bambu-muda); opacity: .55; pointer-events: none;
    transform-origin: 50% 100%; animation: dc-goyang 7s ease-in-out infinite alternate;
}
@keyframes dc-goyang { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

/* Riak air di aliran sungai */
.dc-hero::after {
    content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
    bottom: calc(var(--dc-land-h) * .16); height: 12px; opacity: .4;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='12' viewBox='0 0 90 12'%3E%3Cpath d='M0 6c11-6 34-6 45 0s34 6 45 0' fill='none' stroke='%23efdc8a' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x 0 0 / 90px 12px;
    animation: dc-riak 18s linear infinite;
}
@keyframes dc-riak { to { background-position-x: 90px; } }

.dc-hero-title { font-weight: 600; letter-spacing: -.01em; line-height: 1.12; text-shadow: 0 2px 18px rgba(20,14,6,.4); }
.dc-hero-badge {
    display: inline-flex; align-items: center; gap: .65rem; margin: 0;
    font-family: 'Literata', Georgia, serif; font-style: italic; font-size: 1.05rem; color: var(--bambu-muda);
}
.dc-hero-badge::before {
    content: ""; flex: none; width: 34px; height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M1 5c4-6 8-6 12 0s8 6 12 0 6-4 8-2' fill='none' stroke='%23efdc8a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
.dc-hero-in > * { animation: dc-muncul .95s var(--ease) both; }
.dc-hero-in > *:nth-child(1) { animation-delay: .1s; }
.dc-hero-in > *:nth-child(2) { animation-delay: .25s; }
.dc-hero-in > *:nth-child(3) { animation-delay: .4s; }
.dc-hero-in > *:nth-child(4) { animation-delay: .55s; }
@keyframes dc-muncul { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- Tombol ---- */
.dc-btn {
    display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem;
    font-size: .95rem; font-weight: 700; border-radius: .4rem; text-decoration: none;
    transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.dc-btn-gold { color: #2b2118; background: var(--bambu); border: 1px solid #b9972c; box-shadow: 0 6px 16px -8px rgba(20,14,6,.6); }
.dc-btn-gold:hover { background: #e4c960; }
.dc-btn-ghost { color: var(--lontar-2); background: rgba(244,236,216,.06); border: 1px solid rgba(244,236,216,.55); }
.dc-btn-ghost:hover { background: rgba(244,236,216,.16); border-color: var(--bambu-muda); }

/* ---- Banner halaman dalam ---- */
.dc-banner-img { animation: dc-perlahan 40s ease-in-out infinite alternate; transform-origin: 40% 50%; will-change: transform; }
.dc-banner::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 18px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18'%3E%3Cpath d='M0 18V9C20-1 40-1 60 9S100 19 120 9V18Z' fill='%23f4ecd8'/%3E%3C/svg%3E") repeat-x bottom / 120px 18px;
}
.dc-banner-in > * { animation: dc-muncul .9s var(--ease) both; }
.dc-banner-in > *:nth-child(1) { animation-delay: .05s; }
.dc-banner-in > *:nth-child(2) { animation-delay: .2s; }
.dc-banner-in > *:nth-child(3) { animation-delay: .35s; }
.dc-banner-in > *:nth-child(4) { animation-delay: .5s; }
.dc-crumb { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: rgba(250,245,231,.85); margin-bottom: 1rem; }
.dc-crumb a { color: inherit; text-decoration: none; }
.dc-crumb a:hover { color: var(--bambu-muda); }
.dc-crumb span:nth-child(2) { opacity: .5; }

/* ---- Judul bagian: bertutur, dengan garis riak sungai ---- */
.dc-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: 'Literata', Georgia, serif; font-style: italic; font-weight: 500; font-size: 1rem; color: var(--tanah);
}
.dc-eyebrow::before {
    content: ""; flex: none; width: 34px; height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M1 5c4-6 8-6 12 0s8 6 12 0 6-4 8-2' fill='none' stroke='%23526E7C' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
.dc-eyebrow-light { color: var(--bambu-muda); }
.dc-eyebrow-light::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Cpath d='M1 5c4-6 8-6 12 0s8 6 12 0 6-4 8-2' fill='none' stroke='%23efdc8a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.dc-h2 { font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.dc-h2::after {
    content: ""; display: block; width: 84px; height: 10px; margin-top: .8rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'%3E%3Cpath d='M0 5c3.5-5 10.5-5 14 0s10.5 5 14 0' fill='none' stroke='%23526E7C' stroke-width='1.8'/%3E%3C/svg%3E") repeat-x left center / 28px 10px;
}
.text-center .dc-h2::after { margin-left: auto; margin-right: auto; }

/* ---- Kartu: lembar krem bergaris tipis ---- */
body .dc-card, body .dc-card-layanan {
    background: var(--daun); border: 1px solid var(--garis); border-radius: .6rem;
    box-shadow: 0 1px 0 rgba(95,56,34,.05), 0 12px 24px -18px rgba(75,44,27,.45);
}
body .dc-card { position: relative; transition: border-color .3s, box-shadow .3s; }
body .dc-card:hover { border-color: var(--sungai-400); box-shadow: 0 1px 0 rgba(95,56,34,.05), 0 16px 30px -18px rgba(75,44,27,.5); }
body .dc-stats { border-top: 4px solid var(--hutan-700); }
body .dc-stats:hover { border-color: var(--garis); border-top-color: var(--hutan-700); }
body .dc-stats [data-count] { font-family: 'Literata', Georgia, serif; font-weight: 700; }
form.dc-card:hover { box-shadow: 0 1px 0 rgba(95,56,34,.05), 0 12px 24px -18px rgba(75,44,27,.45); border-color: var(--garis); }
.dc-card img { transition: transform .8s var(--ease); }

.dc-card-layanan { position: relative; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.dc-card-layanan::before {
    content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
    background: linear-gradient(90deg, var(--sungai-400), var(--hutan-500));
    transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
.dc-card-layanan:hover { border-color: var(--sungai-400); }
.dc-card-layanan:hover::before { transform: scaleX(1); }
.dc-icon-box { transition: background-color .3s ease; }
.dc-card-layanan:hover .dc-icon-box { background-color: #e3ead5; }
.dc-card-layanan details[open] ul { animation: dc-turun .35s ease both; }
@keyframes dc-turun { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dc-card-layanan button[data-layanan], .dc-card-layanan a.bg-\[\#4A6636\] { transition: background-color .2s ease; }
.dc-card-layanan button[data-layanan]:active { transform: scale(.97); }

input, select, textarea { transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--hutan-700) !important; box-shadow: 0 0 0 3px rgba(106,135,80,.28); }
figure[data-lightbox] { border-radius: .6rem; box-shadow: 0 12px 24px -18px rgba(75,44,27,.6); }

/* ---- Footer: hutan pekat berserat ijuk, tepi atas beriak ---- */
.dc-footer {
    border-top: 0 !important; background-color: var(--hutan-950);
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.1) 0 1px, transparent 1px 7px);
    padding-top: 5rem;
}
.dc-footer::after {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 18px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18'%3E%3Cpath d='M0 0H120V9C100 19 80 19 60 9S20-1 0 9Z' fill='%23f4ecd8'/%3E%3C/svg%3E") repeat-x top / 120px 18px;
}
.dc-footer > * { position: relative; }
body .dc-footer h4 { border-color: rgba(239,220,138,.4); color: var(--bambu-muda); font-family: 'Literata', Georgia, serif; font-size: .95rem; font-weight: 600; letter-spacing: 0; }
.dc-footer a:hover { color: var(--bambu-muda); }

/* ---- Hormati preferensi gerak & tombol matikan animasi ---- */
@media (prefers-reduced-motion: reduce) {
    .dc-hero-img, .dc-banner-img, .dc-daun, .dc-hero::after, .dc-hero-in > *, .dc-banner-in > * { animation: none !important; }
}
.no-anim .dc-hero-img, .no-anim .dc-banner-img, .no-anim .dc-daun, .no-anim .dc-hero::after,
.no-anim .dc-hero-in > *, .no-anim .dc-banner-in > * { animation: none !important; }

/* ---- Mode pengelola (hanya tampil untuk yang login) ---- */
.dc-toolbar { background: #f1e8d0; border-bottom: 1px dashed #cdb98a; }
.dc-toolbar a { color: #3a5029; font-weight: 600; text-decoration: none; }
.dc-toolbar a:hover { color: var(--tanah); text-decoration: underline; }
.dc-toolbar .dc-toolbar-cta { background: var(--hutan-700); color: #fff !important; padding: .35rem .8rem; border-radius: .4rem; text-decoration: none !important; }
.dc-edit-link {
    position: absolute; right: .75rem; bottom: .75rem; z-index: 5; display: inline-flex; align-items: center; gap: .25rem;
    font-size: 12px; font-weight: 700; color: var(--hutan-700); background: var(--daun); border: 1px solid var(--garis);
    padding: .25rem .6rem; border-radius: 9999px; box-shadow: 0 4px 12px -4px rgba(75,44,27,.35); text-decoration: none;
    transition: background-color .2s, color .2s;
}
.dc-edit-link:hover { background: var(--hutan-700); color: #fff; }


/* ---- Padang rumput & sungai mengalir ---- */
.dc-padang { position: absolute; left: 0; right: 0; bottom: -1px; height: var(--dc-land-h); z-index: 2; pointer-events: none; overflow: hidden; }
.kj-padang-tanah { position: absolute; inset: 0; width: 100%; height: 100%; }
.kj-rumput { position: absolute; left: -3%; right: -3%; transform-origin: 50% 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='36' viewBox='0 0 110 36'%3E%3Cg fill='%23375228'%3E%3Cpath d='M6 36Q8 18 3 6Q12 18 12 36Z'/%3E%3Cpath d='M14 36Q18 14 16 2Q24 16 22 36Z'/%3E%3Cpath d='M30 36Q30 22 26 12Q35 22 36 36Z'/%3E%3Cpath d='M44 36Q48 16 47 4Q55 18 53 36Z'/%3E%3Cpath d='M60 36Q60 24 57 14Q65 24 66 36Z'/%3E%3Cpath d='M74 36Q79 16 78 3Q86 18 83 36Z'/%3E%3Cpath d='M92 36Q93 22 89 11Q98 22 99 36Z'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom / 110px 36px; }
.kj-belakang { bottom: calc(var(--dc-land-h) * .225); height: 36px; opacity: .6; filter: brightness(1.4); background-size: 84px 28px; }
.kj-depan { bottom: -3px; height: 26px; background-size: 78px 26px; }

/* Langit: awan & burung */
.dc-langit { position: absolute; inset: 0 0 var(--dc-land-h) 0; z-index: 1; overflow: hidden; pointer-events: none; }
.dc-awan { position: absolute; left: 0; display: block; filter: blur(2px); transform: translateX(-30vw); }
.dc-awan svg { display: block; width: 100%; height: auto; }
.dc-burung { position: absolute; left: 0; display: block; color: var(--lontar); opacity: .85; transform: translateX(-10vw); }
.dc-burung svg { display: block; width: 100%; height: auto; fill: currentColor; overflow: visible; }
.kb-sayap { transform-origin: 30px 16px; }

@media (prefers-reduced-motion: no-preference) {
    .kj-a1 { animation: kj-alir-90 5s linear infinite; }
    .kj-a2 { animation: kj-alir-140 11s linear infinite; }
    .kj-kilau { animation: kj-kilau 3s ease-in-out infinite; }
    .kj-belakang { animation: kj-angin 6s ease-in-out infinite alternate; }
    .kj-depan { animation: kj-angin 4.5s ease-in-out -2s infinite alternate; }
    .dc-awan { animation: awan-hanyut linear infinite; }
    .dc-burung { animation: burung-terbang linear infinite; }
    .kb-sayap { animation: kb-kepak var(--kepak, .5s) ease-in-out infinite alternate; }
}
.no-anim .dc-padang *, .no-anim .dc-padang, .no-anim .dc-langit * { animation: none !important; }
.no-anim .dc-awan { transform: translateX(30vw); } .no-anim .dc-burung { transform: translateX(50vw); }
.kj-kilau { opacity: .5; }

@keyframes kj-alir-90 { from { transform: translateX(0); } to { transform: translateX(90px); } }
@keyframes kj-alir-140 { from { transform: translateX(0); } to { transform: translateX(140px); } }
@keyframes kj-kilau { 0%, 100% { opacity: 0; } 50% { opacity: .75; } }
@keyframes kj-angin { from { transform: skewX(-2.5deg); } to { transform: skewX(2.5deg); } }
@keyframes awan-hanyut { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } }
@keyframes burung-terbang {
    0% { transform: translate(-10vw, 0); } 25% { transform: translate(22vw, -16px); } 50% { transform: translate(55vw, 10px); }
    75% { transform: translate(85vw, -14px); } 100% { transform: translate(115vw, 0); }
}
@keyframes kb-kepak { from { transform: scaleY(1); } to { transform: scaleY(-.55); } }


/* ---- Mode siang & malam ---- */
.dc-malam { position: absolute; inset: 0 0 var(--dc-land-h) 0; pointer-events: none; overflow: hidden; }
.dc-malam { z-index: 4; opacity: 0; transition: opacity 3s ease; }
.dc-burung, .dc-awan { transition: opacity 3s ease; }

/* Malam: tint (di atas lanskap, di bawah teks), bintang, kunang-kunang */
.dc-malam-warna { position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--dc-land-h) * .07); z-index: 3; pointer-events: none; opacity: 0; transition: opacity 3s ease;
    mix-blend-mode: multiply; background: linear-gradient(to bottom, #131c45 0%, #22345f 50%, #38507a 80%, #4b6b8c 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
.dc-bintang { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 5px 1px rgba(255,255,255,.7); opacity: .85; }

.dc-meteor { position: absolute; top: 8%; left: 62%; width: 110px; height: 2px; border-radius: 2px; opacity: 0; transform: rotate(28deg);
    background: linear-gradient(to left, rgba(255,255,255,.95), transparent); }
.dc-kunang-lapis { position: absolute; left: 0; right: 0; bottom: 0; height: var(--dc-land-h); z-index: 4; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 3s ease; }
.dc-kunang { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #f4f08a; box-shadow: 0 0 8px 3px rgba(244,240,100,.75); opacity: .8; }

[data-waktu="malam"] .dc-malam, [data-waktu="malam"] .dc-malam-warna, [data-waktu="malam"] .dc-kunang-lapis { opacity: 1; }
[data-waktu="malam"] .dc-burung { opacity: 0; }
[data-waktu="malam"] .dc-awan { opacity: .5 !important; }

/* Tombol ganti suasana */
.dc-waktu-btn { position: absolute; z-index: 10; right: max(1rem, calc((100% - 80rem) / 2 + 2rem)); bottom: calc(var(--dc-land-h) * .62); display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .85rem; border-radius: 9999px; border: 1px solid rgba(244,236,216,.5); background: rgba(35,47,28,.55); color: var(--lontar);
    font-size: .8rem; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dc-waktu-btn:hover { background: rgba(35,47,28,.8); }
.dc-waktu-btn:focus-visible { outline: 3px solid var(--bambu-muda); outline-offset: 2px; }
[data-waktu="malam"] .ik-matahari, .dc-hero:not([data-waktu="malam"]) .ik-bulan { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .dc-bintang { animation: bintang-kedip 3s ease-in-out infinite; }
    .dc-meteor { animation: meteor 17s linear 4s infinite; }
        .dc-kunang { animation: kunang-melayang 9s ease-in-out infinite, kunang-kedip 3s ease-in-out infinite; }
}
.no-anim .dc-bintang, .no-anim .dc-meteor, .no-anim .dc-kunang { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .dc-malam, .dc-malam-warna, .dc-kunang-lapis, .dc-burung, .dc-awan { transition: none; } }
@keyframes bintang-kedip { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes meteor { 0% { opacity: 0; transform: translate(0, 0) rotate(28deg); } 2% { opacity: 1; } 8% { opacity: 0; transform: translate(-260px, 140px) rotate(28deg); } 100% { opacity: 0; transform: translate(-260px, 140px) rotate(28deg); } }
@keyframes kunang-melayang { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(18px, -12px); } 50% { transform: translate(-10px, -24px); } 75% { transform: translate(14px, -8px); } }
@keyframes kunang-kedip { 0%, 100% { opacity: .1; } 50% { opacity: 1; } }