/*
 * Ilustrasi tema "sawah" (Master Tema Website > ilustrasi Sawah): hamparan sawah berundak, rumpun padi tertiup
 * angin, dangau, awan & burung (pagi), langit & matahari/bulan mengikuti waktu pengunjung (html[data-waktu]).
 * SVG dibuat website/assets/js/tema.js ke setiap .pemandangan; aktif bila html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]).
 * Warna dari variabel tema — landing.css (--laut, ...) atau app.css (--dd-*) — lewat fallback.
 */
.pemandangan {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 50%; z-index: 1; pointer-events: none;
  --sw-primer: var(--laut, var(--dd-primary));
  --sw-gelap: var(--laut-tua, var(--dd-primary-dark));
  --sw-aksen: var(--toska, var(--dd-toska));
  --sw-latar: var(--pasir, var(--dd-bg));
  --sw-sorot: var(--matahari, var(--dd-matahari));
  --sw-cta: var(--karang, var(--dd-karang));
  --sw-daun: color-mix(in srgb, var(--sw-aksen) 65%, var(--sw-primer));
  --sw-bulir: color-mix(in srgb, var(--sw-sorot) 75%, var(--sw-primer));
}
.pemandangan:empty { display: none; }
.sw-svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.sw-bukit-jauh { fill: color-mix(in srgb, var(--sw-aksen) 40%, #a9d3c0); opacity: .75; }
.sw-bukit { fill: color-mix(in srgb, var(--sw-aksen) 70%, var(--sw-primer)); opacity: .9; }
.sw-petak.p1 { fill: color-mix(in srgb, var(--sw-aksen) 70%, #e9f7c9); }
.sw-petak.p2 { fill: color-mix(in srgb, var(--sw-aksen) 85%, #c9e79a); }
.sw-petak.p3 { fill: color-mix(in srgb, var(--sw-aksen) 45%, var(--sw-primer)); }
.sw-petak.p4 { fill: var(--sw-primer); }
.sw-baris { fill: none; stroke: var(--sw-gelap); stroke-width: 2.2; stroke-dasharray: 3 10; opacity: .32; }
.sw-dangau { fill: color-mix(in srgb, var(--sw-gelap) 70%, #7a5a2e); }
.sw-tanah { fill: var(--sw-latar); }

/* Angin: tiap rumpun padi bergoyang dari pangkalnya (jeda & durasi berbeda diatur inline oleh tema.js) */
.sw-rumpun { transform-box: fill-box; transform-origin: 50% 100%; animation: sw-angin 3s ease-in-out infinite alternate; }
@keyframes sw-angin { 0% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } 100% { transform: rotate(7deg); } }
.sw-awan { fill: #fff; opacity: .9; animation: sw-awan 40s ease-in-out infinite alternate; }
@keyframes sw-awan { from { transform: translateX(-60px); } to { transform: translateX(40px); } }
.sw-burung { stroke: color-mix(in srgb, var(--sw-gelap) 85%, #000); animation: sw-terbang 28s linear infinite; }
@keyframes sw-terbang { from { transform: translate(780px, 120px); } to { transform: translate(1560px, 50px); } }
.sw-kunang { fill: #fff7a1; opacity: 0; }

/* ---------------- Tema sawah: sembunyikan unsur pesisir ---------------- */
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .hero .perahu,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .hero .ombak,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .dd-scene .prh,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .dd-scene .omb,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .dd-hero-home .prh,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .dd-hero-home .omb { display: none; }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .hero .pemandangan { height: 48%; }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .dd-scene .pemandangan { height: 62%; }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .dd-hero-home .pemandangan { height: 78%; }

/* ---------------- Langit: pagi (warna tema) / siang / malam ---------------- */
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .hero,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .dd-scene,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .dd-hero-home {
  background: linear-gradient(180deg, var(--langit-atas) 0%, var(--langit-tengah) 55%, var(--langit-bawah) 100%);
}
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="siang"] .hero,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="siang"] .dd-scene,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="siang"] .dd-hero-home {
  background: linear-gradient(180deg, #2f86d6 0%, #6ab8ec 55%, #cfeefe 100%);
}
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="malam"] .hero,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="malam"] .dd-scene,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="malam"] .dd-hero-home {
  background: linear-gradient(180deg, #060a1d 0%, #141d45 55%, #2b3868 100%);
}
/* Bintang (malam) untuk halaman aplikasi; landing sudah punya kilau bintang di .hero::before */
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="malam"] .dd-scene::before,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="malam"] .dd-hero-home::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 32% 8%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 22%, #fff, transparent 60%), radial-gradient(1px 1px at 76% 12%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 90% 30%, #fff, transparent 60%), radial-gradient(1px 1px at 44% 34%, #fff, transparent 60%);
}
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]):not([data-waktu="malam"]) .hero::before { display: none; }

/* Matahari: pagi rendah hangat, siang tinggi terang; malam jadi bulan */
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="pagi"] .hero .matahari { bottom: auto; top: 40%; }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="siang"] .matahari,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="siang"] .mthr {
  background: radial-gradient(circle, #fffef6 0%, #fff4b8 38%, rgba(255, 244, 184, 0) 70%); opacity: 1;
}
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="siang"] .hero .matahari { bottom: auto; top: 96px; }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="malam"] .matahari,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="malam"] .mthr {
  background: radial-gradient(circle at 42% 42%, #fffbe8 0%, #eee7c8 36%, rgba(238, 231, 200, .16) 50%, transparent 68%); opacity: .95;
}
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="malam"] .hero .matahari { bottom: auto; top: 110px; width: 150px; height: 150px; }

/* Unsur per waktu */
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]):not([data-waktu="pagi"]) .sw-burung { display: none; }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="malam"] .sw-awan { opacity: .12; }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="malam"] .sw-svg > :not(.sw-kunang):not(.sw-tanah):not(.lt-pantul):not(.lb-gantung-grup):not(.lb-bintang-grup):not(.lb-masjid):not(.km-bendera-grup):not(.km-bunting-grup):not(.km-kembang-grup):not(.km-bintang-grup):not(.km-rumah-grup) { filter: brightness(.45) saturate(.75); }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"])[data-waktu="malam"] .sw-kunang { animation: sw-kunang 3.8s ease-in-out infinite; }
@keyframes sw-kunang { 0%, 100% { opacity: 0; transform: translateY(0); } 45% { opacity: 1; } 70% { opacity: .7; transform: translateY(-6px); } }

/* Teks tetap terbaca: gelap di langit terang (pagi/siang), putih di malam */
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]):not([data-waktu="malam"]) .hero { color: var(--laut-tua); }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]):not([data-waktu="malam"]) .hero h1 em { color: var(--laut); }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]):not([data-waktu="malam"]) .hero .label { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]):not([data-waktu="malam"]) .hero .btn-garis { color: var(--laut-tua); border-color: color-mix(in srgb, var(--laut-tua) 55%, transparent); }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]):not([data-waktu="malam"]) .nav:not(.padat) { color: var(--laut-tua); }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]):not([data-waktu="malam"]) .dd-scene,
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]):not([data-waktu="malam"]) .dd-scene .kembali { color: var(--dd-primary-dark); }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]):not([data-waktu="malam"]) .dd-scene .kalimat h2 em { color: var(--dd-primary); }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]):not([data-waktu="malam"]) .dd-hero-home { color: var(--dd-primary-dark); }
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]):not([data-waktu="malam"]) .dd-hero-home .status:not(.pending) { background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .85); }
/* Isi di atas ilustrasi */
html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .hero-isi, html:is([data-ilustrasi="sawah"], [data-ilustrasi="laut"], [data-ilustrasi="lebaran"], [data-ilustrasi="kemerdekaan"]) .dd-hero-home .isi { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .sw-rumpun, .sw-awan, .sw-burung, .sw-kunang { animation: none !important; }
  html[data-waktu="malam"] .sw-kunang { opacity: .8; }
}

/* ================= Ilustrasi LAUT ================= */
.lt-laut-jauh { fill: color-mix(in srgb, var(--sw-aksen) 55%, #9fdcf0); }
.lt-pulau { fill: color-mix(in srgb, var(--sw-gelap) 55%, #3f7d5c); }
.lt-pulau-pasir { fill: color-mix(in srgb, var(--sw-latar) 70%, #e9d7a8); }
.lt-ombak { animation: lt-gulung linear infinite; }
.lt-ombak.o1 { fill: color-mix(in srgb, var(--sw-aksen) 70%, #bfeefa); animation-duration: 26s; }
.lt-ombak.o2 { fill: var(--sw-aksen); animation-duration: 18s; animation-direction: reverse; }
.lt-ombak.o3 { fill: color-mix(in srgb, var(--sw-aksen) 45%, var(--sw-primer)); animation-duration: 13s; }
.lt-ombak.o4 { fill: var(--sw-primer); animation-duration: 9s; animation-direction: reverse; }
.lt-buih { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .55; }
@keyframes lt-gulung { from { transform: translateX(0); } to { transform: translateX(-1440px); } }
.lt-ikan .badan { fill: var(--sw-cta); }
.lt-ikan .sirip { fill: color-mix(in srgb, var(--sw-cta) 70%, #000); }
.lt-ikan.kuning .badan { fill: var(--sw-sorot); }
.lt-ikan.kuning .sirip { fill: color-mix(in srgb, var(--sw-sorot) 70%, #b36b00); }
.lt-ikan .mata { fill: #0b2239; }
.lt-renang { animation: lt-renang linear infinite; }
@keyframes lt-renang { from { transform: translateX(-160px); } to { transform: translateX(1600px); } }
.lt-renang.balik { animation-name: lt-renang-balik; }
@keyframes lt-renang-balik { from { transform: translateX(1600px) scaleX(-1); } to { transform: translateX(-160px) scaleX(-1); } }
/* Ikan melompat keluar air lalu masuk lagi (sebagian besar waktu di bawah air, tidak terlihat) */
.lt-lompat { transform-box: fill-box; transform-origin: center; animation: lt-lompat 7s ease-in-out infinite; opacity: 0; }
@keyframes lt-lompat {
  0%, 62% { transform: translate(0, 60px) rotate(-40deg); opacity: 0; }
  66% { transform: translate(20px, 10px) rotate(-35deg); opacity: 1; }
  76% { transform: translate(70px, -52px) rotate(0deg); opacity: 1; }
  86% { transform: translate(120px, 8px) rotate(40deg); opacity: 1; }
  90%, 100% { transform: translate(135px, 60px) rotate(50deg); opacity: 0; }
}
.lt-gelembung { fill: none; stroke: #fff; stroke-width: 1.4; opacity: 0; animation: lt-gelembung 5s ease-in infinite; }
@keyframes lt-gelembung { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .7; } 100% { transform: translateY(-70px); opacity: 0; } }
.lt-pantul { fill: #fffbe8; opacity: 0; }
html[data-ilustrasi="laut"][data-waktu="malam"] .lt-pantul { opacity: .55; animation: lt-kilau 3.5s ease-in-out infinite alternate; }
@keyframes lt-kilau { from { opacity: .25; } to { opacity: .65; } }
html[data-ilustrasi="laut"] .hero .pemandangan { height: 46%; }
@media (prefers-reduced-motion: reduce) {
  .lt-ombak, .lt-renang, .lt-lompat, .lt-gelembung { animation: none !important; }
  .lt-lompat { opacity: 0; }
}

/* ================= Ilustrasi LEBARAN ================= */
html[data-ilustrasi="lebaran"] .hero .pemandangan,
html[data-ilustrasi="lebaran"] .dd-scene .pemandangan,
html[data-ilustrasi="lebaran"] .dd-hero-home .pemandangan { height: 100%; }
.lb-bukit-jauh { fill: color-mix(in srgb, var(--sw-aksen) 45%, #b9dcc4); opacity: .8; }
.lb-bukit { fill: color-mix(in srgb, var(--sw-aksen) 70%, var(--sw-primer)); }
.lb-rumput { fill: var(--sw-primer); }
.lb-masjid { fill: color-mix(in srgb, var(--sw-primer) 55%, #cfe7d6); }
.lb-masjid .lb-sabit { fill: var(--sw-sorot); }
.lb-masjid .lb-jendela { fill: color-mix(in srgb, var(--sw-sorot) 60%, #fff); opacity: .7; }
.lb-tali-hias { fill: none; stroke: color-mix(in srgb, var(--sw-cta) 60%, #6b4f2a); stroke-width: 2; }
.lb-simpul { fill: color-mix(in srgb, var(--sw-cta) 60%, #6b4f2a); }
.lb-lampu { fill: color-mix(in srgb, var(--sw-sorot) 55%, #fff); opacity: .75; }
html[data-ilustrasi="lebaran"][data-waktu="malam"] .lb-lampu { fill: #ffe39a; opacity: 1; filter: drop-shadow(0 0 4px #ffd35e); animation: lb-kelip 2.2s ease-in-out infinite; }
.lb-tali { stroke: color-mix(in srgb, var(--sw-cta) 60%, #6b4f2a); stroke-width: 1.6; }
.lb-janur { fill: color-mix(in srgb, var(--sw-sorot) 30%, #9fcf5c); }
.lb-anyam path { stroke: color-mix(in srgb, #4f8a25 80%, var(--sw-primer)); stroke-width: 2.4; fill: none; }
.lb-tepi { fill: none; stroke: #4f8a25; stroke-width: 2; }
.lb-ekor { fill: none; stroke: #6fae36; stroke-width: 2.6; stroke-linecap: round; }
/* Ayunan ketupat dari titik gantung (0,0) */
.lb-ayun { transform-origin: 0 0; animation: lb-ayun 3.6s ease-in-out infinite alternate; }
@keyframes lb-ayun { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.lb-bintang { fill: #fff; opacity: 0; }
html[data-ilustrasi="lebaran"][data-waktu="malam"] .lb-bintang { animation: lb-kelip 2.6s ease-in-out infinite; }
@keyframes lb-kelip { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
/* Malam: jendela masjid menyala, ketupat tetap cerah (tidak ikut digelapkan) */
html[data-ilustrasi="lebaran"][data-waktu="malam"] .lb-masjid .lb-jendela { fill: #ffe39a; opacity: 1; }
html[data-ilustrasi="lebaran"][data-waktu="malam"] .lb-gantung { filter: brightness(.85); }
html[data-ilustrasi="lebaran"][data-waktu="malam"] .lb-masjid { fill: #16331f; }
/* Malam: bulan sabit menggantikan bulan purnama */
html[data-ilustrasi="lebaran"][data-waktu="malam"] .matahari,
html[data-ilustrasi="lebaran"][data-waktu="malam"] .mthr {
  background: none; border-radius: 50%; box-shadow: inset -26px 10px 0 2px #fdf0c2; filter: drop-shadow(0 0 16px rgba(253, 240, 194, .55)); opacity: 1;
}
html[data-ilustrasi="lebaran"][data-waktu="malam"] .hero .matahari { width: 110px; height: 110px; top: 110px; right: 30%; }
html[data-ilustrasi="lebaran"][data-waktu="malam"] .dd-scene .mthr,
html[data-ilustrasi="lebaran"][data-waktu="malam"] .dd-hero-home .mthr { width: 70px; height: 70px; right: 38%; top: 16px; box-shadow: inset -16px 6px 0 1px #fdf0c2; }
/* Siang & pagi: matahari tidak menutupi ketupat */
html[data-ilustrasi="lebaran"] .hero .matahari { right: 36%; }
@media (prefers-reduced-motion: reduce) { .lb-ayun, .lb-bintang, .lb-lampu { animation: none !important; } }

/* ================= Ilustrasi KEMERDEKAAN ================= */
html[data-ilustrasi="kemerdekaan"] .hero .pemandangan,
html[data-ilustrasi="kemerdekaan"] .dd-scene .pemandangan,
html[data-ilustrasi="kemerdekaan"] .dd-hero-home .pemandangan { height: 100%; }
.km-bukit-jauh { fill: color-mix(in srgb, #7fb77e 70%, var(--sw-latar)); opacity: .8; }
.km-bukit { fill: #5e9f5a; }
.km-rumput { fill: #3f8445; }
.km-rumah rect { fill: #f3e6d4; }
.km-rumah .km-atap { fill: color-mix(in srgb, var(--sw-primer) 75%, #7a3b1d); }
.km-rumah .km-pintu { fill: #8a5a32; }
/* Bendera: warna tetap Merah Putih */
.km-merah { fill: #ce1126; }
.km-putih { fill: #fff; stroke: #e2e2e2; stroke-width: 1; }
.km-tiang { fill: #cfd6dc; stroke: #9aa5ae; stroke-width: 1; }
.km-pucuk { fill: #f2c14e; }
.km-tali-hias { fill: none; stroke: #7a5a3a; stroke-width: 1.8; }
.km-panji { transform-box: fill-box; transform-origin: 50% 0; animation: km-kibar-panji 2.2s ease-in-out infinite alternate; }
.km-panji.merah { fill: #ce1126; }
.km-panji.putih { fill: #fff; stroke: #e4e4e4; stroke-width: .8; }
@keyframes km-kibar-panji { from { transform: rotate(-8deg) skewX(-4deg); } to { transform: rotate(8deg) skewX(4deg); } }
.km-bambu { fill: none; stroke: #b8925a; stroke-width: 5; stroke-linecap: round; }
.km-kain.merah { fill: #ce1126; }
.km-kain.putih { fill: #fff; }
.km-goyang { transform-origin: 0 0; animation: km-goyang 4s ease-in-out infinite alternate; }
@keyframes km-goyang { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.km-batang { fill: #9b6a3c; }
.km-roda { fill: none; stroke: #7a4f28; stroke-width: 4; }
.km-tali-hadiah { stroke: #7a4f28; stroke-width: 1.4; }
.km-hadiah.h0 { fill: var(--sw-sorot); }
.km-hadiah.h1 { fill: #3aa0d8; }
.km-hadiah.h2 { fill: #5cb85c; }
.km-tiang-kecil { stroke: #7a4f28; stroke-width: 2; }
/* Malam: kembang api & bintang, jendela/rumah sedikit gelap, bendera tetap cerah */
.km-kembang-grup, .km-bintang { opacity: 0; }
html[data-ilustrasi="kemerdekaan"][data-waktu="malam"] .km-kembang-grup { opacity: 1; }
.km-kembang line { stroke-width: 3; stroke-linecap: round; }
.km-kembang.k0 line { stroke: #ff5a6a; }
.km-kembang.k1 line { stroke: #ffd166; }
.km-kembang.k2 line { stroke: #ffffff; }
.km-kembang { transform-box: view-box; transform-origin: 0 0; opacity: 0; }
html[data-ilustrasi="kemerdekaan"][data-waktu="malam"] .km-kembang { animation: km-meletus 3.2s ease-out infinite; filter: drop-shadow(0 0 6px rgba(255, 220, 150, .8)); }
@keyframes km-meletus { 0% { transform: scale(.1); opacity: 0; } 12% { opacity: 1; } 55% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }
html[data-ilustrasi="kemerdekaan"][data-waktu="malam"] .km-bintang { fill: #fff; animation: lb-kelip 2.6s ease-in-out infinite; }
html[data-ilustrasi="kemerdekaan"][data-waktu="malam"] .km-rumah-grup { filter: brightness(.55); }
html[data-ilustrasi="kemerdekaan"][data-waktu="malam"] .km-bendera-grup { filter: brightness(.9); }
/* Pagi & siang: matahari tidak menutupi bendera */
html[data-ilustrasi="kemerdekaan"] .hero .matahari { right: 35%; }
/* HP: pemandangan di bagian bawah hero supaya bendera & matahari tidak di belakang judul */
@media (max-width: 719px) {
  html[data-ilustrasi="kemerdekaan"] .hero .pemandangan { height: 46%; }
  html[data-ilustrasi="kemerdekaan"][data-waktu] .hero .matahari { width: 64px; height: 64px; right: 38%; top: auto; bottom: 25%; }
}
@media (prefers-reduced-motion: reduce) { .km-panji, .km-goyang, .km-kembang, .km-bintang { animation: none !important; } }