/* Tema: Halloween
 *
 * Jadwal: 10-01..11-01
 *
 * Dimuat SETELAH app.css, hanya jika tema ini aktif di Admin > Tema.
 * Berkas ini juga jadi kerangka untuk tema lain. Aturan main:
 *   - Hanya timpa CSS variable dan tambah ornamen. Jangan menyalin gaya dari app.css.
 *   - Ornamen murni CSS + data URI. Tanpa mengimpor CSS lain, tanpa alamat luar di dalam url(), tanpa JS.
 *   - Animasi hanya transform/opacity (atau elemen kecil), dan hanya di dalam
 *     @media (prefers-reduced-motion: no-preference).
 *   - Tambahkan @media (max-width: 640px) agar ornamen tidak menutupi teks hero.
 *   - Satu tema, satu konsep. Sebar posisinya, jangan semua di sudut atas.
 *
 * Kait yang tersedia:
 *   html[data-theme]  .hero  .hero img (foto fasad, bisa diberi filter warna)
 *   body > header  body > footer  body::after (bebas, mis. kabut tetap)
 *   .ember-veins (hiasan sudut)  .stone-texture  .chrome  .glow-amber  .pulse-dot
 */

:root {
    --color-void: #08030f;
    --color-surface: #12081e;
    --color-surface-2: #1c0e2c;
    --color-maroon-deep: #1a0b2a;
    --color-maroon: #4a1d78;
    --color-maroon-lit: #7a3fc4;
    --color-ember: #ff6a13;
    --color-amber: #ff7a1a;
    --color-amber-soft: #ffa24a;
    --color-chrome-100: #f3eefb;
    --color-chrome-300: #cfc3e0;
    --color-chrome-500: #b0a1c8;
    --color-chrome-700: #8f7fae;
    --color-chrome-900: #6a5b88;
    --color-hairline: #2d1846;
    --halloween-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3CradialGradient id='m' cx='.38' cy='.35' r='.75'%3E%3Cstop offset='0' stop-color='%23fffbe8'/%3E%3Cstop offset='1' stop-color='%23d9ceaa'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='60' cy='60' r='54' fill='url(%23m)'/%3E%3Ccircle cx='42' cy='40' r='9' fill='%23cfc39c' opacity='.55'/%3E%3Ccircle cx='76' cy='50' r='6' fill='%23cfc39c' opacity='.5'/%3E%3Ccircle cx='58' cy='80' r='11' fill='%23cfc39c' opacity='.5'/%3E%3Ccircle cx='34' cy='70' r='5' fill='%23cfc39c' opacity='.55'/%3E%3Ccircle cx='82' cy='82' r='7' fill='%23cfc39c' opacity='.45'/%3E%3C/svg%3E");
    --halloween-bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M20 6C18 3 14 3 10 2c2 3 1 5-2 7-3-1-5 0-8 3 4-1 6 0 8 2 1-2 3-3 5-2 2 1 4 3 7 6 3-3 5-5 7-6 2-1 4 0 5 2 2-2 4-3 8-2-3-3-5-4-8-3-3-2-4-4-2-7-4 1-8 1-10 4z' fill='%232a1346' stroke='%238a55d0' stroke-width='.6'/%3E%3C/svg%3E");
    --halloween-spider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 90'%3E%3Cpath d='M12 0V70' stroke='%23cbbfe6' stroke-width='.8' opacity='.8'/%3E%3Cpath d='M9 75.0Q5 65 2 72' fill='none' stroke='%236b3fa8' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M9 76.5Q3 69 0 76' fill='none' stroke='%236b3fa8' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M9 78.0Q3 74 0 81' fill='none' stroke='%236b3fa8' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M9 79.5Q5 78 2 85' fill='none' stroke='%236b3fa8' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M15 75.0Q19 65 22 72' fill='none' stroke='%236b3fa8' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M15 76.5Q21 69 24 76' fill='none' stroke='%236b3fa8' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M15 78.0Q21 74 24 81' fill='none' stroke='%236b3fa8' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M15 79.5Q19 78 22 85' fill='none' stroke='%236b3fa8' stroke-width='1' stroke-linecap='round'/%3E%3Cellipse cx='12' cy='79' rx='5.5' ry='6.5' fill='%231a0b2a' stroke='%238a55d0' stroke-width='.7'/%3E%3Ccircle cx='12' cy='71' r='3.2' fill='%231a0b2a' stroke='%238a55d0' stroke-width='.7'/%3E%3Cpath d='M10.4 76L13.6 82M13.6 76L10.4 82' stroke='%23ff6a13' stroke-width='1'/%3E%3Ccircle cx='10.8' cy='70.4' r='.8' fill='%23ff7a1a'/%3E%3Ccircle cx='13.2' cy='70.4' r='.8' fill='%23ff7a1a'/%3E%3C/svg%3E");
    --halloween-pumpkins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90'%3E%3Cpath d='M41 44Q42 35 50 33L52 37Q47 39 47 44Z' fill='%233d5a1e'/%3E%3Cellipse cx='44' cy='66' rx='26' ry='22' fill='%23ff7a1a'/%3E%3Cpath d='M44 44C29.7 50.6 29.7 81.4 44 88' fill='none' stroke='%23c4480a' stroke-width='1.6'/%3E%3Cpath d='M44 44C36.85 50.6 36.85 81.4 44 88' fill='none' stroke='%23c4480a' stroke-width='1.6'/%3E%3Cpath d='M44 44C51.15 50.6 51.15 81.4 44 88' fill='none' stroke='%23c4480a' stroke-width='1.6'/%3E%3Cpath d='M44 44C58.3 50.6 58.3 81.4 44 88' fill='none' stroke='%23c4480a' stroke-width='1.6'/%3E%3Ccircle cx='36' cy='56' r='3.4' fill='%23ffd36b'/%3E%3Ccircle cx='52' cy='56' r='3.4' fill='%23ffd36b'/%3E%3Cpath d='M32 68Q44 80 56 68Q44 74 32 68Z' fill='%23ffd36b'/%3E%3Cpath d='M153 47Q154 38 162 36L164 40Q159 42 159 47Z' fill='%233d5a1e'/%3E%3Cellipse cx='156' cy='68' rx='25' ry='21' fill='%23ff7a1a'/%3E%3Cpath d='M156 47C142.25 53.3 142.25 82.7 156 89' fill='none' stroke='%23c4480a' stroke-width='1.6'/%3E%3Cpath d='M156 47C149.125 53.3 149.125 82.7 156 89' fill='none' stroke='%23c4480a' stroke-width='1.6'/%3E%3Cpath d='M156 47C162.875 53.3 162.875 82.7 156 89' fill='none' stroke='%23c4480a' stroke-width='1.6'/%3E%3Cpath d='M156 47C169.75 53.3 169.75 82.7 156 89' fill='none' stroke='%23c4480a' stroke-width='1.6'/%3E%3Cpath d='M142 58l9 3-1-6zM170 58l-9 3 1-6z' fill='%23ffd36b'/%3E%3Cpath d='M144 70l5 4 4-4 4 4 4-4 4 4 4-4q-12 8-25 0z' fill='%23ffd36b'/%3E%3Cpath d='M97 20Q98 11 106 9L108 13Q103 15 103 20Z' fill='%233d5a1e'/%3E%3Cellipse cx='100' cy='50' rx='36' ry='30' fill='%23ff7a1a'/%3E%3Cpath d='M100 20C80.2 29.0 80.2 71.0 100 80' fill='none' stroke='%23c4480a' stroke-width='1.6'/%3E%3Cpath d='M100 20C90.1 29.0 90.1 71.0 100 80' fill='none' stroke='%23c4480a' stroke-width='1.6'/%3E%3Cpath d='M100 20C109.9 29.0 109.9 71.0 100 80' fill='none' stroke='%23c4480a' stroke-width='1.6'/%3E%3Cpath d='M100 20C119.8 29.0 119.8 71.0 100 80' fill='none' stroke='%23c4480a' stroke-width='1.6'/%3E%3Cpath d='M82 40l8 0-4-9zM110 40l8 0-4-9zM100 46l-3 6h6zM80 58l9-3 5 7 6-6 6 6 5-7 9 3q-20 14-40 0z' fill='%23ffd36b'/%3E%3C/svg%3E");
    --halloween-veins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='none' stroke='%23cbbfe6' stroke-width='1' stroke-linecap='round' d='M100 100L191 138M100 100L138 191M100 100L62 191M100 100L9 138M100 100L9 62M100 100L62 9M100 100L138 9M100 100L191 62M115 106Q108 108 106 115Q100 112 94 115Q92 108 85 106Q88 100 85 94Q92 92 94 85Q100 88 106 85Q108 92 115 94Q112 100 115 106M130 112Q117 117 112 130Q100 124 88 130Q83 117 70 112Q76 100 70 88Q83 83 88 70Q100 76 112 70Q117 83 130 88Q124 100 130 112M146 119Q126 126 119 146Q100 137 81 146Q74 126 54 119Q63 100 54 81Q74 74 81 54Q100 63 119 54Q126 74 146 81Q137 100 146 119M165 127Q137 137 127 165Q100 152 73 165Q63 137 35 127Q48 100 35 73Q63 63 73 35Q100 48 127 35Q137 63 165 73Q152 100 165 127M185 135Q148 148 135 185Q100 168 65 185Q52 148 15 135Q32 100 15 65Q52 52 65 15Q100 32 135 15Q148 52 185 65Q168 100 185 135'/%3E%3C/svg%3E");
}

::selection {
    background: var(--color-ember);
    color: var(--color-void);
}

.chrome {
    filter: drop-shadow(0 4px 36px rgba(255,106,19, 0.38));
}

.glow-amber:hover,
.glow-amber:focus-visible {
    box-shadow: 0 0 0 1px rgba(255,122,26, 0.45), 0 0 30px 2px rgba(255,106,19, 0.4);
}

.pulse-dot {
    box-shadow: 0 0 6px 1px rgba(255,122,26, 0.7);
}

.ember-veins {
    background-image: var(--halloween-veins);
}

/* Fasad berpendar ungu di bawah bulan purnama. */
.hero img {
    filter: hue-rotate(-100deg) saturate(1.15) brightness(0.95);
}

.hero::before {
    content: "";
    position: absolute;
    z-index: -5;
    right: 9%;
    top: 9%;
    width: 120px;
    height: 120px;
    background: var(--halloween-moon) no-repeat center / contain;
    filter: drop-shadow(0 0 28px rgba(255, 236, 170, 0.5));
    pointer-events: none;
}

/* Kawanan kelelawar melintas di depan bulan. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    background-image: var(--halloween-bat), var(--halloween-bat), var(--halloween-bat), var(--halloween-bat);
    background-repeat: no-repeat;
    background-size: 46px 23px, 30px 15px, 38px 19px, 24px 12px;
    background-position: 3% 16%, 8% 30%, 13% 22%, 18% 34%;
}

/* Dua laba-laba turun dari tepi bawah header dengan panjang benang berbeda. */
body > header::before,
body > header::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 100%;
    width: 24px;
    background: var(--halloween-spider) no-repeat 50% 100% / 24px 90px;
    pointer-events: none;
}

body > header::before { left: 24%; height: 36px; }
body > header::after  { left: 69%; height: 62px; }

/* Kabut ungu dan jingga merayap di dasar layar, di semua halaman. */
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    left: -10%;
    right: -10%;
    bottom: 0;
    height: 200px;
    pointer-events: none;
    background:
        radial-gradient(60% 100% at 20% 100%, rgba(122, 63, 196, 0.28), transparent 70%),
        radial-gradient(50% 90% at 78% 100%, rgba(255, 106, 19, 0.14), transparent 70%);
}

/* Tiga labu menyala di sisi kanan footer. */
body > footer::after {
    content: "";
    position: absolute;
    right: 5%;
    top: 34px;
    width: 190px;
    height: 86px;
    background: var(--halloween-pumpkins) no-repeat center / contain;
    filter: drop-shadow(0 0 14px rgba(255, 122, 26, 0.5));
    pointer-events: none;
}

/* Di layar sedang ke atas kolom sosial ada di kanan: pindahkan labu ke tengah
   baris bawah, di antara hak cipta (kiri) dan tautan legal (kanan). */
@media (min-width: 768px) {
    body > footer::after {
        top: auto;
        right: auto;
        bottom: 6px;
        left: calc(50% - 95px);
        height: 62px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hero::before         { animation: hw-float 9s ease-in-out infinite alternate; }
    .hero::after          { animation: hw-bats 34s linear infinite; }
    body > header::before { animation: hw-dangle 5s ease-in-out infinite alternate; }
    body > header::after  { animation: hw-dangle 6s ease-in-out -2.5s infinite alternate; }
    body::after           { animation: hw-fog 26s ease-in-out infinite alternate; }
    body > footer::after  { animation: hw-flicker 3.4s ease-in-out infinite; }
}

@keyframes hw-float   { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
@keyframes hw-bats    { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes hw-dangle  { from { background-position: 50% 100%; } to { background-position: 50% calc(100% + 10px); } }
@keyframes hw-fog     { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
@keyframes hw-flicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.82; } 60% { opacity: 0.95; } }

@media (max-width: 640px) {
    .hero::before { right: 6%; top: 4%; width: 76px; height: 76px; }
}