:root { --forest:#183e2a; --forest-dark:#092a1d; --paper:#fff9e9; --ink:#263629; --shadow:rgba(15,35,20,.35); }
* { box-sizing:border-box; }
html { min-height:100%; background:linear-gradient(180deg,rgba(5,30,20,.05),rgba(8,39,27,.38)),url('/assets/background.jpeg') center top/cover fixed; background-color:var(--forest-dark); }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
.festival-page { position:relative; isolation:isolate; overflow:visible; background:transparent; }
.festival-page::before { position:absolute; z-index:0; inset:0; min-height:100%; content:''; opacity:.65; pointer-events:none; background:radial-gradient(ellipse 16rem 5rem at -2rem 29%,rgba(247,105,41,.68) 0 20%,transparent 22%),radial-gradient(circle at 12% 34%,rgba(249,177,49,.88) 0 .35rem,transparent .42rem),radial-gradient(circle at 16% 37%,rgba(247,84,54,.72) 0 .22rem,transparent .3rem),radial-gradient(circle at 8% 39%,rgba(249,177,49,.72) 0 .14rem,transparent .22rem),radial-gradient(ellipse 12rem 4rem at 106% 48%,rgba(32,190,169,.6) 0 24%,transparent 26%),radial-gradient(circle at 89% 52%,rgba(251,209,75,.88) 0 .34rem,transparent .42rem),radial-gradient(circle at 83% 55%,rgba(32,190,169,.72) 0 .22rem,transparent .3rem),radial-gradient(circle at 94% 57%,rgba(247,84,54,.75) 0 .16rem,transparent .25rem),linear-gradient(20deg,transparent 41%,rgba(237,104,42,.28) 42% 44%,transparent 45%),linear-gradient(-18deg,transparent 56%,rgba(34,178,158,.24) 57% 59%,transparent 60%); mix-blend-mode:multiply; }
.festival-page::after { position:fixed; z-index:0; inset:0; content:''; background:radial-gradient(ellipse at center,transparent 25%,rgba(4,29,20,.28) 100%); pointer-events:none; }
.leaf { position:absolute; z-index:3; display:block; background-repeat:no-repeat; background-size:contain; pointer-events:none; user-select:none; }
.leaf-left { bottom:0; left:0; width:min(32vw,15rem); height:min(54vw,25rem); background-image:url('/assets/daun3.png'); background-position:bottom left; transform-origin:bottom left; animation:leaf-sway-left 5.5s ease-in-out infinite; }
.leaf-right { right:0; bottom:0; width:min(31vw,14rem); height:min(35vw,16rem); background-image:url('/assets/daun4.png'); background-position:bottom right; transform-origin:bottom right; animation:leaf-sway-right 6.4s ease-in-out infinite; }
.leaf-top { top:0; right:0; width:min(28vw,12rem); height:min(28vw,12rem); background-image:url('/assets/daun5.png'); background-position:top right; transform-origin:top right; animation:leaf-sway-top 5.9s ease-in-out infinite; }
.glow { position:absolute; z-index:2; display:block; width:.7rem; height:.7rem; border-radius:50%; background:#fffcef; box-shadow:0 0 .4rem .15rem rgba(255,238,132,.95),0 0 1.5rem .5rem rgba(255,205,69,.55); opacity:0; pointer-events:none; animation:glow-float 7s ease-in-out infinite; }
.glow::after { position:absolute; top:50%; right:45%; width:clamp(2rem,10vw,5.5rem); height:.12rem; content:''; transform:translateY(-50%) rotate(-24deg); transform-origin:right center; border-radius:100%; background:linear-gradient(90deg,transparent,rgba(255,231,128,.1) 45%,rgba(255,255,240,.9)); box-shadow:0 0 .45rem rgba(255,216,88,.7); }
.glow-one { top:28%; left:13%; animation-delay:-1s; }
.glow-two { top:52%; right:15%; width:.45rem; height:.45rem; animation-delay:-3.7s; animation-duration:8.5s; }
.glow-three { top:73%; left:41%; width:.55rem; height:.55rem; animation-delay:-5.2s; animation-duration:6.4s; }
.glow-four { top:39%; left:76%; width:.35rem; height:.35rem; animation-delay:-2.4s; animation-duration:7.8s; }
.glow-five { top:84%; left:19%; width:.42rem; height:.42rem; animation-delay:-6.1s; animation-duration:9.2s; }
/* Semua daun bergerak ke arah tengah layar agar tidak terpotong di tepi viewport. */
@keyframes leaf-sway-left { 0%,100% { transform:rotate(0deg); } 50% { transform:rotate(2.5deg); } }
@keyframes leaf-sway-right { 0%,100% { transform:rotate(0deg); } 50% { transform:rotate(-2.5deg); } }
@keyframes leaf-sway-top { 0%,100% { transform:rotate(0deg); } 50% { transform:rotate(-3deg); } }
@keyframes glow-float { 0%,100% { opacity:0; transform:translate3d(0,.7rem,0) scale(.65); } 20%,80% { opacity:.82; } 50% { opacity:.36; transform:translate3d(.7rem,-2.2rem,0) scale(1.2); } }
.site-content { position:relative; z-index:1; width:min(100% - 1.25rem,43rem); margin-inline:auto; }
.landing-content { padding:.8rem 0 2rem; }
.festival-hero { width:100%; margin:0 auto .35rem; text-align:center; }
.logo-panel { display:grid; min-height:clamp(11.2rem,55vw,17rem); place-items:center; overflow:hidden; }
.festival-logo { display:block; width:min(160%,57.5rem); max-width:none; height:auto; transform:translateY(-8%); filter:drop-shadow(0 .55rem .35rem rgba(49,21,8,.5)); }
.paper-card,.registration-card,.form-card,.result-card { border:1px solid rgba(125,74,26,.43); border-radius:1.05rem; background:radial-gradient(circle at 96% 8%,rgba(238,122,46,.22) 0 .22rem,transparent .27rem),radial-gradient(circle at 91% 13%,rgba(33,178,160,.2) 0 .15rem,transparent .2rem),radial-gradient(circle at 7% 93%,rgba(243,187,56,.22) 0 .2rem,transparent .25rem),linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,247,216,.93)),var(--paper); box-shadow:0 1.2rem 2.7rem var(--shadow),inset 0 0 0 .28rem rgba(255,255,255,.34); }
.festival-intro,.registration-card { padding:1.25rem 1.1rem; }
.festival-intro { margin-top:-.55rem; }
.registration-card { margin-top:.8rem; text-align:center; }
.contact-footer { position:relative; z-index:1; margin-top:.8rem; border:1px solid rgba(255,243,183,.5); border-radius:1rem; background:rgba(9,42,29,.78); box-shadow:0 .8rem 1.6rem rgba(8,35,24,.25); color:#fff9db; padding:1.1rem; text-align:center; }
.contact-footer .eyebrow { color:#f7d46b; }
.contact-footer p { margin:.35rem 0; line-height:1.5; }
.contact-footer a { color:#fff7b7; font-weight:700; text-decoration:none; }
.contact-footer a:hover,.contact-footer a:focus-visible { text-decoration:underline; }
.eyebrow { margin:0 0 .45rem; color:#58772f; font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3 { margin:0; color:var(--forest); font-family:Georgia,'Times New Roman',serif; }
.festival-intro h2 { font-size:clamp(1.6rem,7vw,2.3rem); line-height:1.12; }
.about-image { display:block; width:100%; height:auto; margin:1rem auto 0; border-radius:.75rem; filter:drop-shadow(0 .35rem .5rem rgba(44,62,28,.22)); }
.lead { margin:.7rem 0 0; font-size:1rem; line-height:1.62; text-align:justify; }
.about-waf { margin-top:1.15rem; border-top:1px solid rgba(62,99,44,.24); padding-top:.85rem; }
.about-waf summary { cursor:pointer; color:#3f6d35; font-weight:700; }
.about-waf div { padding-top:.7rem; }
.about-waf p { margin:0 0 .85rem; line-height:1.6; text-align:justify; }
.registration-card h2 { font-size:1.6rem; }
.registration-card>p:not(.eyebrow) { margin:.6rem 0 0; line-height:1.5; }
.payment-actions { display:grid; grid-template-columns:1fr; gap:.75rem; margin-top:1.15rem; }
.payment-button { display:grid; min-height:4.65rem; place-content:center; gap:.1rem; border:2px solid rgba(255,255,255,.55); border-radius:1rem; color:#fff; box-shadow:0 .55rem .9rem rgba(29,39,17,.22); text-decoration:none; transition:transform 160ms ease,filter 160ms ease; }
.payment-button span { font-size:.84rem; font-weight:700; }
.payment-button strong { font-size:1.35rem; }
.ovo-logo { display:block; width:min(10.5rem,74vw); height:auto; max-height:2.9rem; object-fit:contain; }
.ovo-button { background:linear-gradient(135deg,#7558c8,#56359e); }
.cash-button { background:linear-gradient(135deg,#5a973d,#287044); }
.payment-button:hover,.payment-button:focus-visible,.submit-button:hover,.submit-button:focus-visible,.back-link:hover,.back-link:focus-visible { transform:translateY(-.16rem); filter:brightness(1.08); }
.registration-page { padding:.9rem 0 2rem; }
.registration-page .site-content { width:min(100% - 1.25rem,38rem); }
.compact-hero { margin-bottom:.75rem; }
.compact-hero .logo-panel { min-height:8.5rem; }
.back-link { display:inline-flex; margin-bottom:.85rem; color:var(--forest); font-weight:700; text-decoration:none; transition:transform 160ms ease; }
.back-link::before { content:'←'; margin-right:.3rem; }
.form-card,.result-card { padding:1.35rem 1.1rem; }
.form-card h1,.result-card h1 { font-size:clamp(1.75rem,7vw,2.4rem); }
.form-card>p,.result-card p { line-height:1.55; }
.transfer-info { margin:1.15rem 0; border:1px dashed #7b9144; border-radius:.9rem; background:rgba(241,222,147,.3); padding:1rem; }
.transfer-info h2 { font-size:1.2rem; }
.transfer-info p { line-height:1.5; }
.transfer-info ol { display:grid; gap:.5rem; margin:.9rem 0 0; padding-left:1.35rem; }
.registration-form { display:grid; gap:1rem; margin-top:1.25rem; }
.field { display:grid; gap:.42rem; }
.field label { color:var(--forest); font-size:.94rem; font-weight:700; }
.field input { width:100%; min-height:3.25rem; border:1px solid #a9b184; border-radius:.75rem; background:rgba(255,255,255,.84); color:var(--ink); font:inherit; padding:.72rem .82rem; }
.field input:focus { outline:3px solid rgba(101,160,69,.28); border-color:#5a913d; }
.field input[type='file'] { min-height:auto; padding:.52rem; }
.field small { color:#51604b; line-height:1.45; }
.submit-button,.dialog-button { min-height:3.25rem; border:0; border-radius:.8rem; color:#fff; cursor:pointer; font:inherit; font-weight:800; padding:.75rem 1rem; }
.submit-button { margin-top:.3rem; background:linear-gradient(135deg,#366f37,#1d4d32); box-shadow:0 .6rem .9rem rgba(24,62,42,.22); }
.cash-page .submit-button { background:linear-gradient(135deg,#609c41,#34723c); }
.result-card { text-align:center; }
.result-number { display:inline-block; margin:.65rem 0; border-radius:.7rem; background:rgba(241,222,147,.4); color:var(--forest); font-size:1.2rem; letter-spacing:.04em; padding:.68rem .85rem; }
dialog { width:min(calc(100% - 2rem),30rem); border:1px solid rgba(125,74,26,.45); border-radius:1.1rem; background:var(--paper); box-shadow:0 1.5rem 4rem rgba(0,0,0,.38); color:var(--ink); padding:1.5rem; }
dialog::backdrop { background:rgba(4,31,20,.62); backdrop-filter:blur(3px); }
dialog h2 { font-size:1.5rem; }
.dialog-actions { display:grid; grid-template-columns:1fr; gap:.7rem; margin-top:1.2rem; }
.dialog-button.cancel { border:1px solid #8d9a75; background:#fffdf6; color:var(--forest); }
.dialog-button.confirm { background:var(--forest); }
.warning-text { color:#9c291f; font-weight:800; line-height:1.5; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (min-width:560px) { .site-content { width:min(100% - 2rem,43rem); } .landing-content { padding-top:1.3rem; } .logo-panel { border-radius:1.6rem; } .payment-actions { grid-template-columns:repeat(2,1fr); } .festival-intro,.registration-card { padding:1.7rem; } .form-card,.result-card { padding:2rem; } .dialog-actions { grid-template-columns:auto auto; justify-content:end; } }
/* Efek desktop diperkecil di ponsel agar scroll dan form tetap responsif. */
@media (max-width:767px) {
    html { background:#173d2a; overscroll-behavior-y:none; }
    body { background:#173d2a; }
    .festival-page { background:#173d2a; }
    .festival-page::before { position:fixed; z-index:-1; display:block; min-height:0; background:linear-gradient(rgba(5,30,20,.12),rgba(8,39,27,.32)),url('/assets/background.jpeg') center top/cover no-repeat; opacity:1; mix-blend-mode:normal; transform:translateZ(0); }
    .festival-page::after { display:none; }
    .glow { display:none; }
    /* Tetap tampil di ponsel, tetapi statis agar tidak membebani scroll/keyboard. */
    .leaf { display:block; animation:none; z-index:3; }
    .leaf-left,.leaf-right { position:fixed; bottom:0; }
    .leaf-left { width:min(30vw,8.5rem); height:min(51vw,14.5rem); }
    .leaf-right { width:min(29vw,8rem); height:min(33vw,9.5rem); }
    .leaf-top { position:absolute; width:min(25vw,7.5rem); height:min(25vw,7.5rem); }
    /* Saat keyboard terbuka daun disembunyikan, bukan ikut naik bersama viewport. */
    body:has(input:focus) .leaf-left,body:has(input:focus) .leaf-right { display:none; }
    .festival-logo { filter:drop-shadow(0 .25rem .18rem rgba(49,21,8,.35)); }
    .paper-card,.registration-card,.form-card,.result-card { box-shadow:0 .65rem 1.3rem rgba(15,35,20,.24),inset 0 0 0 .2rem rgba(255,255,255,.3); }
}
@media (prefers-reduced-motion:reduce) { .leaf,.glow { animation:none; } }