/* ===== Base ===== */
:root {
    --font-heading: 'Cinzel', serif;
    --font-body: 'Lato', sans-serif;
    --gold: #e8c27a;
    --gold-2: #c8913a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font-body); color: #fff; background: #0b1117; }

/* ===== Splash ===== */
body.splash { overflow: hidden; }

.bg-layer { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.bg-image {
    position: absolute; inset: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    animation: slowzoom 30s ease-in-out infinite alternate;
}
.bg-fallback { background: linear-gradient(160deg, #1b2a38, #0b1117); animation: none; }
.bg-dark {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,.25) 0%, rgba(0,0,0,.65) 100%),
        linear-gradient(to bottom, rgba(5,10,18,.55), rgba(5,10,18,.75));
}
@keyframes slowzoom { from { transform: scale(1); } to { transform: scale(1.1); } }

/* Video YouTube sebagai background fullscreen (cover) */
.bg-video { position: absolute; inset: 0; pointer-events: none; }
.bg-video iframe {
    position: absolute; top: 50%; left: 50%;
    width: 100vw; height: 56.25vw;
    min-height: 100vh; min-width: 177.78vh;
    transform: translate(-50%, -50%);
    border: 0;
}

/* ===== Overlay Adventure ===== */
#fx { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.adv { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }

/* Awan melayang */
.cloud {
    position: absolute; left: 0; width: 200%; height: 22%;
    background-repeat: repeat-x; filter: blur(10px); opacity: .35;
    background-image:
        radial-gradient(ellipse 9% 30% at 8% 50%, rgba(255,255,255,.7), transparent 70%),
        radial-gradient(ellipse 12% 38% at 30% 45%, rgba(255,255,255,.55), transparent 70%),
        radial-gradient(ellipse 10% 30% at 58% 55%, rgba(255,255,255,.65), transparent 70%),
        radial-gradient(ellipse 13% 36% at 85% 48%, rgba(255,255,255,.5), transparent 70%);
}
.cloud-1 { top: 6%;  animation: drift 120s linear infinite; }
.cloud-2 { top: 24%; opacity: .25; animation: drift 170s linear infinite reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Burung terbang */
.bird { position: absolute; width: 22px; height: 10px; left: -40px; fill: none; stroke: rgba(255,255,255,.8); stroke-width: 1.6; stroke-linecap: round; animation: fly 26s linear infinite; }
.bird path { transform-origin: 50% 100%; animation: flap .5s ease-in-out infinite alternate; }
.bird-1 { top: 16%; }
.bird-2 { top: 20%; animation-delay: -4s; width: 16px; animation-duration: 30s; }
.bird-3 { top: 12%; animation-delay: -11s; width: 18px; animation-duration: 34s; }
@keyframes fly { from { transform: translate(0, 0); } 50% { transform: translate(55vw, -18px); } to { transform: translate(112vw, 8px); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

/* Punggungan gunung berlapis */
.ridges { position: absolute; left: 0; bottom: 0; width: 100%; height: 34vh; display: block; }
.ridge-back  { fill: rgba(20,32,46,.55); animation: sway 14s ease-in-out infinite alternate; }
.ridge-mid   { fill: rgba(12,20,30,.75); animation: sway 18s ease-in-out infinite alternate-reverse; }
.ridge-front { fill: rgba(6,11,17,.95); }
@keyframes sway { from { transform: translateY(0); } to { transform: translateY(6px); } }

/* Pendaki menuju puncak */
.climb {
    position: absolute; right: 3vw; bottom: 0;
    width: clamp(200px, 30vw, 400px); height: auto;
}
.climb .peak { fill: #0a121a; }
.climb .snow { fill: #dfe9f2; opacity: .9; }
.climb .trail {
    fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 5 7; animation: dash 1.4s linear infinite; opacity: .8;
}
@keyframes dash { to { stroke-dashoffset: -24; } }
.climb .lamp { fill: #fff6d6; filter: drop-shadow(0 0 5px #ffd36b) drop-shadow(0 0 10px #ffb02e); }
.climb .pole { stroke: #cfd8e0; stroke-width: 1.6; }
.climb .flag { fill: #e5484d; transform-origin: 0 50%; animation: wave 1.6s ease-in-out infinite alternate; }
@keyframes wave { from { transform: skewY(-8deg) scaleX(1); } to { transform: skewY(8deg) scaleX(.82); } }
/* Konten */
.content {
    position: relative; z-index: 3;
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 2rem 1.25rem 4rem;
    max-width: 860px; margin: 0 auto;
}
.sub-heading {
    font-weight: 300; letter-spacing: .5em; text-transform: uppercase;
    font-size: clamp(.75rem, 2.2vw, 1rem); color: var(--gold);
    animation: rise 1.2s ease both;
}
.heading {
    font-family: var(--font-heading); font-weight: 700;
    font-size: clamp(2.2rem, 8vw, 5.2rem); line-height: 1.1; margin: .6rem 0 0;
    text-shadow: 0 4px 30px rgba(0,0,0,.6);
    animation: rise 1.2s .25s ease both;
}
.divider { margin: 1.6rem 0; animation: rise 1.2s .45s ease both; }
.divider span {
    display: block; width: 120px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.description {
    font-weight: 300; font-size: clamp(1rem, 2.4vw, 1.25rem); line-height: 1.8;
    color: rgba(255,255,255,.9); max-width: 640px;
    animation: rise 1.2s .6s ease both;
}
.cta {
    position: relative; display: inline-flex; align-items: center; gap: .7rem; overflow: hidden;
    margin-top: 2.2rem; padding: 1rem 2.6rem; border-radius: 999px; isolation: isolate;
    font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
    color: #1a1208; background: linear-gradient(135deg, var(--gold), var(--gold-2));
    box-shadow: 0 8px 30px rgba(200,145,58,.45);
    transition: transform .25s, box-shadow .25s, filter .25s;
    animation: rise 1.2s .8s ease both, bob 3s 2.2s ease-in-out infinite;
}
/* kilau yang menyapu tombol */
.cta::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
    transform: skewX(-20deg); animation: shine 3.2s 2s ease-in-out infinite;
}
/* cincin gelombang */
.cta::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
    box-shadow: 0 0 0 0 rgba(232,194,122,.7); animation: ring 2.4s 2s ease-out infinite;
}
.cta-icon { width: 1.25em; height: 1.25em; flex: none; animation: climb-up 1.6s ease-in-out infinite; }
.cta:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 14px 44px rgba(232,194,122,.7); filter: brightness(1.08); }
.cta:hover .cta-icon { animation-duration: .6s; }
.cta:active { transform: scale(.97); }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes shine { 0% { left: -60%; } 55%,100% { left: 130%; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(232,194,122,.65); } 80%,100% { box-shadow: 0 0 0 26px rgba(232,194,122,0); } }
@keyframes climb-up { 0%,100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.foot {
    position: fixed; bottom: .8rem; left: 0; right: 0; z-index: 3;
    text-align: center; font-size: .75rem; letter-spacing: .1em; color: rgba(255,255,255,.55);
}

@media (prefers-reduced-motion: reduce) {
    .bg-image, .adv *, .cta, .cta::before, .cta::after, .cta-icon, .sub-heading, .heading, .divider, .description { animation: none !important; }
}

/* ===== Admin ===== */
body.admin { background: #0f1720; min-height: 100vh; padding: 1.5rem 1rem; }
.admin-wrap { max-width: 760px; margin: 0 auto; }
.admin-wrap.narrow { max-width: 420px; padding-top: 10vh; }
.admin h1 { font-family: 'Cinzel', serif; font-size: 1.5rem; margin-bottom: 1rem; color: var(--gold); }
.admin-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.admin-head h1 { margin: 0; }
.head-actions { display: flex; gap: .5rem; }
.card { background: #172230; border: 1px solid #243447; border-radius: 12px; padding: 1.5rem; }
.card label { display: block; margin-bottom: 1rem; font-size: .9rem; color: #c9d4df; }
.card input, .card textarea, .card select {
    display: block; width: 100%; margin-top: .35rem; padding: .7rem .8rem;
    background: #0f1720; color: #fff; border: 1px solid #2c4058; border-radius: 8px;
    font: inherit;
}
.card input:focus, .card textarea:focus, .card select:focus { outline: 2px solid var(--gold-2); border-color: transparent; }
.card small { display: block; margin-top: .35rem; color: #8196ab; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .row { grid-template-columns: 1fr; } }
.btn {
    display: inline-block; padding: .75rem 1.4rem; border: 0; border-radius: 8px; cursor: pointer;
    font: inherit; font-weight: 700; text-decoration: none; color: #1a1208;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
}
.btn.ghost { background: transparent; color: #fff; border: 1px solid #2c4058; }
.btn.danger { background: #b64040; color: #fff; }
.alert { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .92rem; }
.alert.ok { background: #153a27; border: 1px solid #1f6b46; color: #bff0d3; }
.alert.err { background: #3d1a1a; border: 1px solid #7a2c2c; color: #ffd0d0; }
.alert ul { margin-left: 1.1rem; }