:root{--hl:#c62d1c;--table:#4b3322;--paper:#f0e1c0;--paper2:#e6d1a6;--ink:#3a2615;--muted:#6a5037;--line:#c4a870;--leather:#7a5030;--leather-d:#3f2713;--wax:#8c2f27;--gold:#c1923a;--on:#f3e6c8;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hl:#ffd166;--table:#17100a;--paper:#33261a;--paper2:#3e2f20;--ink:#ecdcb8;--muted:#b9a27d;--line:#5a4630;--leather:#7a5030;--leather-d:#24160b}}
:root[data-theme="dark"]{--hl:#ffd166;--table:#17100a;--paper:#33261a;--paper2:#3e2f20;--ink:#ecdcb8;--muted:#b9a27d;--line:#5a4630;--leather:#7a5030;--leather-d:#24160b}
html{height:100%}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;min-height:100%;background:var(--table) repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 2px,transparent 2px 9px);color:var(--ink);font:400 1.05rem/1.7 "Lora",Georgia,serif}
h1,h2,h3{font-family:"Playfair Display",Georgia,Georgia,serif;margin:0 0 .6rem;line-height:1.1;font-weight:900;letter-spacing:0;font-variant-numeric:lining-nums}
h1{font-size:clamp(2rem,5.6vw,3.3rem)}
h2{font-size:clamp(1.35rem,3.4vw,1.85rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem;max-width:64ch}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:900px;margin:0 auto;padding:0 1.4rem}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:linear-gradient(var(--leather),var(--leather-d));color:var(--on);border-bottom:3px solid var(--gold);box-shadow:0 4px 12px rgba(0,0,0,.4)}
header .wrap{display:flex;align-items:center;gap:.4rem 1.2rem;padding-top:.55rem;padding-bottom:.55rem;flex-wrap:wrap;max-width:1000px}
.brand{font-family:"Playfair Display",Georgia,serif;font-weight:900;font-size:1.3rem;margin-right:auto;text-decoration:none}
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand .logo{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fbf1d8,#ead6a8);border:2px solid var(--gold);box-shadow:0 2px 0 rgba(0,0,0,.35);transition:transform .2s}
.brand:hover .logo{transform:rotate(-8deg) scale(1.08)}
nav{display:flex;gap:.3rem;flex-wrap:wrap}
nav a{text-decoration:none;padding:.3rem .95rem;border-radius:14px;font:700 .95rem "Nunito",system-ui,sans-serif;transition:transform .15s}
nav a:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
nav a.on{background:var(--wax);box-shadow:0 3px 0 #4a1410,inset 0 1px 0 rgba(255,255,255,.25)}
#app{max-width:1000px;margin:1.6rem auto;background-color:var(--paper);background-image:radial-gradient(ellipse at 12% 8%,rgba(150,100,45,.22),transparent 42%),radial-gradient(ellipse at 88% 32%,rgba(130,85,35,.16),transparent 38%),radial-gradient(ellipse at 35% 96%,rgba(150,100,45,.26),transparent 48%);border-radius:5px;box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 0 70px rgba(110,70,25,.38);overflow:hidden}
@media (max-width:1030px){#app{margin:1rem .6rem}}
.btn{position:relative;display:inline-block;background:linear-gradient(#855733,#5f3c22);color:var(--on);font:700 1rem "Nunito",system-ui,sans-serif;padding:.7rem 1.6rem;border-radius:16px;border:2px solid var(--leather-d);box-shadow:0 5px 0 var(--leather-d),inset 0 1px 0 rgba(255,255,255,.28);text-decoration:none;cursor:pointer;text-align:center;transition:transform .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
.btn:before{content:"";position:absolute;inset:3px;border:1px dashed rgba(243,230,200,.5);border-radius:12px;pointer-events:none}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--leather-d),inset 0 1px 0 rgba(255,255,255,.28)}
.btn:active,.btn.press{transform:translateY(4px);box-shadow:0 1px 0 var(--leather-d),inset 0 1px 0 rgba(255,255,255,.28)}
.btn.gold{background:linear-gradient(#d8aa4e,#b4852c);color:#2b1a0b;border-color:#5b3f10;box-shadow:0 5px 0 #5b3f10,inset 0 1px 0 rgba(255,255,255,.4)}
.btn.gold:before{border-color:rgba(43,26,11,.45)}
.btn.gold:hover{box-shadow:0 8px 0 #5b3f10,inset 0 1px 0 rgba(255,255,255,.4)}
.btn.gold:active,.btn.gold.press{box-shadow:0 1px 0 #5b3f10,inset 0 1px 0 rgba(255,255,255,.4)}
.btn.rose{background:linear-gradient(#b0443a,#85291f);border-color:#4a1410;box-shadow:0 5px 0 #4a1410,inset 0 1px 0 rgba(255,255,255,.25)}
.btn.rose:hover{box-shadow:0 8px 0 #4a1410,inset 0 1px 0 rgba(255,255,255,.25)}
.btn.rose:active,.btn.rose.press{box-shadow:0 1px 0 #4a1410,inset 0 1px 0 rgba(255,255,255,.25)}
.btn.mint{background:linear-gradient(#85763f,#5e5128);border-color:#2f2810;box-shadow:0 5px 0 #2f2810,inset 0 1px 0 rgba(255,255,255,.25)}
.btn.mint:hover{box-shadow:0 8px 0 #2f2810,inset 0 1px 0 rgba(255,255,255,.25)}
.btn.mint:active,.btn.mint.press{box-shadow:0 1px 0 #2f2810,inset 0 1px 0 rgba(255,255,255,.25)}
.btn.off{background:transparent;color:var(--muted);border:2px dashed var(--line);box-shadow:none;pointer-events:none}
.btn.off:before{display:none}
.btns{display:flex;gap:1.1rem .9rem;flex-wrap:wrap;margin:1.1rem 0 1.4rem}
.center{text-align:center}.center p{margin-left:auto;margin-right:auto}.center .btns{justify-content:center}
.banner{position:relative;text-align:center;padding:3rem 0 1.6rem;border-bottom:3px double var(--leather)}
.banner .wrap{position:relative;z-index:1}
.banner p{margin:0 auto 1.2rem;font-style:italic;font-size:1.2rem}
.cel{position:absolute;top:1rem;width:150px;color:var(--muted);opacity:.55;pointer-events:none}
.cel.l{left:1.2rem}.cel.r{right:1.2rem;transform:scaleX(-1)}
@media (max-width:760px){.cel{width:90px}}
.seal{position:relative;width:210px;height:250px;margin:0 auto .6rem;animation:hop 3.2s ease-in-out infinite}
.seal:before{content:"";position:absolute;left:50%;bottom:26px;width:176px;height:176px;margin-left:-88px;border-radius:50%;background:#f3e6c8 radial-gradient(circle at 50% 40%,#fbf1d8,#ead6a8);border:10px solid #8c2f27;box-shadow:0 5px 0 #4a1410,0 10px 18px rgba(0,0,0,.28),inset 0 0 18px rgba(110,70,25,.35)}
.seal img{position:absolute;left:50%;bottom:0;height:250px;width:auto;transform:translateX(-50%);filter:drop-shadow(0 3px 0 rgba(60,35,10,.35)) drop-shadow(0 8px 8px rgba(0,0,0,.25))}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ph{position:relative;border:1px solid var(--line);background:var(--paper2);filter:sepia(.35);display:grid;place-items:center;text-align:center;color:var(--muted);font:600 .85rem "Nunito",system-ui,sans-serif;padding:1.4rem 1rem;min-height:190px;box-shadow:0 7px 14px rgba(60,35,10,.35);transform:rotate(-1.4deg)}
.ph:nth-child(even){transform:rotate(1.2deg)}
.ph:before,.ph:after{content:"";position:absolute;top:-12px;width:70px;height:22px;background:rgba(196,170,120,.78);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.ph:before{left:12%;transform:rotate(-6deg)}.ph:after{right:12%;transform:rotate(5deg)}
.ph.pic{filter:none;background:#f3e6c8 radial-gradient(circle at 50% 40%,#fbf1d8,#ead6a8);padding:1.1rem;transition:transform .25s}
.ph.pic img{display:block;width:100%;height:250px;object-fit:contain}
.ph.pic:hover{transform:rotate(0deg) scale(1.03)}

.facts{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:1.8rem 0}
.fact{background:var(--paper2);border:1px solid var(--line);padding:1rem;text-align:center;box-shadow:0 5px 12px rgba(60,35,10,.25);border-radius:4px}
.fact small{display:block;font:600 .8rem "Nunito",system-ui,sans-serif;color:var(--muted)}
.fact b{display:block;font-family:"Playfair Display",Georgia,serif;font-weight:900;font-size:1.15rem;line-height:1.25;margin:.2rem 0}
.fact span{font-size:.95rem}
.gb details{background:var(--paper2);border:1px solid var(--line);border-radius:12px;margin:.6rem 0;box-shadow:0 3px 8px rgba(60,35,10,.2)}
.gb summary{cursor:pointer;padding:.8rem 1.1rem;font:700 1.05rem "Nunito",system-ui,sans-serif;list-style:none}
.gb summary::-webkit-details-marker{display:none}
.gb summary:before{content:"❦ ";color:var(--hl)}
.gb details[open]>summary{border-bottom:1px dashed var(--line)}
.gb .in{padding:.4rem 1.3rem 1rem;text-align:left}
.gb h4{font:800 1.08rem "Nunito",system-ui,sans-serif;color:var(--hl);margin:1rem 0 .3rem}
.gb ul{margin:.2rem 0 .6rem;padding-left:1.2rem}.gb li{margin-bottom:.3rem}
.gb h2.part{margin-top:2.4rem;text-align:left}
.gb .run{list-style:none;padding:0;margin:.6rem 0 0}.gb .run li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .2rem;border-bottom:1px dashed var(--line)}.gb .run b{font-family:"Nunito",system-ui,sans-serif;font-weight:700;white-space:nowrap}
.gb .note{font-size:.95rem;color:var(--muted);font-style:italic}
.banner .theme{font-style:italic;font-size:1.25rem;margin-bottom:.3rem}
.banner .meta{font:600 .95rem "Nunito",system-ui,sans-serif;color:var(--muted)}
.gl{display:flex!important;flex-wrap:wrap;justify-content:center;gap:1.8rem 1.4rem!important}
.gl .shot{flex:0 1 calc((100% - 2.8rem)/3);min-width:220px;max-width:100%}
.shot{position:relative;margin:0;background:#f3e6c8;padding:.6rem .6rem 0;box-shadow:0 8px 16px rgba(60,35,10,.35);transform:rotate(-1.6deg);transition:transform .25s;border-radius:3px}
.shot:nth-child(even){transform:rotate(1.4deg)}
.shot:nth-child(3n){transform:rotate(-.6deg)}
.shot:hover{transform:rotate(0) scale(1.04);z-index:2}
.shot:before{content:"";position:absolute;top:-12px;left:50%;width:76px;height:22px;margin-left:-38px;background:rgba(196,170,120,.8);box-shadow:0 1px 2px rgba(0,0,0,.2);transform:rotate(-4deg)}
.shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:sepia(.22) saturate(.95)}
.shot figcaption{padding:.55rem .2rem .7rem;font:600 .88rem "Nunito",system-ui,sans-serif;color:#3a2615;text-align:center}
.ph b{display:block;font-size:2.4rem;line-height:1.2}
section{padding:3rem 0}
.gl{display:grid;gap:1.6rem 1.2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:1.8rem}
.lomba{display:grid;gap:1.8rem;grid-template-columns:1fr 1fr;align-items:center;padding:2.2rem 0;border-bottom:1px dashed var(--line)}
.lomba:nth-of-type(even) .ph{order:-1}
@media (max-width:700px){.lomba{grid-template-columns:1fr}.lomba:nth-of-type(even) .ph{order:0}}
.syarat{background-color:var(--paper2);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(2rem - 1px),rgba(110,75,35,.38) calc(2rem - 1px),rgba(110,75,35,.38) 2rem);border:1px solid var(--line);border-left:4px double #b0443a;box-shadow:0 6px 14px rgba(60,35,10,.3);padding:1.2rem 1.4rem 1rem 1.8rem;margin-top:2.4rem;line-height:2rem}
.syarat h2{line-height:2rem;margin-bottom:0}
.syarat ol{margin:0;padding-left:1.3rem}.syarat li{margin:0}
.syarat .btns{margin:1rem 0 .4rem}
.hd{position:relative;overflow:hidden;padding:2.4rem 0 1.6rem;text-align:center;border-bottom:3px double var(--leather)}
.hd h1{font-size:clamp(1.8rem,5vw,2.7rem);margin:0}
.hd h1:after{content:"❦";display:block;font-size:1.3rem;color:var(--hl);margin-top:.3rem}
.hd p{margin:.4rem auto 0;font-style:italic}
footer{background:var(--leather-d);color:var(--on);text-align:center;padding:1.8rem 1.2rem;font:600 .9rem "Nunito",system-ui,sans-serif;border-top:4px double var(--gold)}
footer .soc{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-bottom:.8rem}
.spark{position:fixed;pointer-events:none;z-index:50;font-size:1.2rem;color:var(--gold);text-shadow:0 1px 0 #3f2713;animation:fly .75s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) scale(.4) rotate(120deg);opacity:0}}
.cel svg g,.cel svg path,.cel svg circle{transform-box:fill-box;transform-origin:center}
.o1{animation:spin 30s linear infinite}.o2{animation:spin 20s linear infinite reverse}.rays{animation:spin 14s linear infinite}.moon{animation:bob 4s ease-in-out infinite}
.tw circle{animation:tw 2.4s ease-in-out infinite}.tw circle:nth-child(2){animation-delay:.6s}.tw circle:nth-child(3){animation-delay:1.2s}.tw circle:nth-child(4){animation-delay:1.8s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{50%{transform:translateY(5px) rotate(-10deg)}}
@keyframes tw{50%{opacity:.15;transform:scale(1.9)}}
@keyframes sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(5deg) translateY(-4px)}}
@keyframes twk{50%{opacity:.25;transform:scale(1.25)}}
@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:.85}100%{transform:translateY(-18rem) rotate(200deg);opacity:0}}
.drift{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.drift i{position:absolute;bottom:-1.5rem;font-style:normal;color:var(--gold);font-size:1.1rem;opacity:0;animation:rise 7s linear infinite}
.drift i:nth-child(1){left:8%}.drift i:nth-child(2){left:24%;animation-delay:2s;font-size:.9rem}.drift i:nth-child(3){left:42%;animation-delay:4s}.drift i:nth-child(4){left:61%;animation-delay:1s}.drift i:nth-child(5){left:78%;animation-delay:3s;font-size:1.3rem}.drift i:nth-child(6){left:92%;animation-delay:5s;font-size:.9rem}
.hd:before{content:"✦ ✧";position:absolute;left:6%;top:1.2rem;color:var(--gold);letter-spacing:.4rem;animation:twk 2.6s ease-in-out infinite}
.hd:after{content:"☾";position:absolute;right:7%;top:1rem;font-size:1.8rem;color:var(--gold);animation:bob 4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.btn,nav a{transition:none}.spark,.drift{display:none}.cel *,.seal,.hd:before,.hd:after{animation:none!important}}