@font-face{font-family:Manrope;src:url('../fonts/manrope-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('../fonts/manrope-800.ttf') format('truetype');font-weight:800;font-display:swap}
:root{color-scheme:dark;--ink:#03262b;--cream:#f7f8f7;--gold:#e99563}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink)}
body{font-family:Manrope,Arial,sans-serif;color:var(--cream)}
.page{position:relative;isolation:isolate;overflow:hidden;min-height:max(100svh,56.25vw);background:url('../images/background-desktop.png') center/cover no-repeat;padding-bottom:4vw}
.site-header{position:absolute;top:2.8vw;left:3.5vw;z-index:1}
.logo-hiera{display:block;width:8.9vw;height:auto}
.partners{position:absolute;top:3.2vw;right:3.5vw;width:28vw;z-index:1}
.partners img{display:block;width:100%;height:auto}
.ornament{position:absolute;pointer-events:none;z-index:-1;height:auto}
.ornament-left{left:0;bottom:0;width:13.2vw}
.ornament-right{right:0;top:11vw;width:10vw}
.content{display:grid;grid-template-columns:40% 44%;justify-content:space-between;align-items:start;width:76.5%;margin-left:12.8%;padding-top:12.7vw}
.event-info{padding-top:.7vw;text-align:center}
.event-heading{display:block;width:100%}
.event-heading img{display:block;width:100%;height:auto}
.event-details{display:block;width:88%;height:auto;margin:2vw auto 0}
.registration h2{font-family:Manrope,Arial,sans-serif;font-size:3vw;line-height:1.2;font-weight:800;text-align:center;margin:0 0 2.45vw;letter-spacing:-.035em}
.field{margin-bottom:1.75vw}
.field label{display:block;font-size:1.3vw;line-height:1.5;margin-bottom:.35vw}
.field input{display:block;width:100%;min-height:44px;height:3.65vw;border:1px solid #d6dcdd;border-radius:5px;background:#fff;color:#152c2e;padding:9px 14px;font:inherit;font-size:max(16px,1.2vw);box-shadow:3px 5px 8px #0005;outline:none}
.field input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.field input[aria-invalid=true]{border-color:#ffb2a0;outline:2px solid #ffb2a0}
.field-error{display:block;font-size:14px;margin-top:8px;color:#ffc8ba}
.submit-wrapper{text-align:center;margin-top:2vw}
.submit-button{position:relative;display:inline-block;padding:0;width:15vw;min-width:150px;background:transparent;border:0;border-radius:6px;cursor:pointer;filter:drop-shadow(3px 5px 6px #0005)}
.submit-button img{display:block;width:100%;height:auto}
.submit-button:hover{filter:brightness(1.08) drop-shadow(3px 5px 6px #0005)}
.submit-button:focus-visible{outline:3px solid white;outline-offset:5px}
.submit-button:disabled{cursor:wait;opacity:.75}
.submit-button[aria-busy=true] img{visibility:hidden}
.submit-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:5px;background:linear-gradient(#f1af86,#ad5b1c);color:var(--ink);font-size:clamp(14px,1.2vw,22px);font-weight:800}
.form-status{padding:14px 16px;border:1px solid #ecac80;border-radius:6px;background:#073439;font-size:15px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}
.form-status.is-success{border-color:#9bcdb0;background:#113f38}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Desktop: proporsi mengikuti batas lebar DAN tinggi viewport. */
@media (min-width:768px){
    .page{
        --desktop-unit:min(1vw,1.777777vh);
        --desktop-unit:min(1vw,1.777777svh);
        min-height:100vh;min-height:100svh;padding-bottom:calc(3 * var(--desktop-unit));
    }
    .site-header{top:calc(2.8 * var(--desktop-unit));left:3.5vw}
    .logo-hiera{width:calc(8.9 * var(--desktop-unit))}
    .partners{top:calc(3.2 * var(--desktop-unit));width:calc(28 * var(--desktop-unit))}
    .ornament-left{width:calc(13.2 * var(--desktop-unit))}
    .ornament-right{top:calc(11 * var(--desktop-unit));width:calc(10 * var(--desktop-unit))}
    .content{
        width:calc(76.5 * var(--desktop-unit));margin:0 auto;
        padding-top:calc(11.8 * var(--desktop-unit));
        grid-template-columns:40% 44%;
    }
    .event-info{padding-top:calc(.7 * var(--desktop-unit))}
    .event-details{margin-top:calc(2 * var(--desktop-unit))}
    .registration h2{font-size:calc(3 * var(--desktop-unit));margin-bottom:calc(1.8 * var(--desktop-unit))}
    .field{margin-bottom:calc(1.4 * var(--desktop-unit))}
    .field label{font-size:max(14px,calc(1.25 * var(--desktop-unit)));line-height:1.4;margin-bottom:calc(.3 * var(--desktop-unit))}
    .field input{height:calc(3.3 * var(--desktop-unit));min-height:38px;font-size:max(16px,calc(1.15 * var(--desktop-unit)));padding:6px 12px}
    .submit-wrapper{margin-top:calc(1 * var(--desktop-unit))}
    .submit-button{width:calc(15 * var(--desktop-unit));min-width:120px}
    .submit-loading{font-size:max(12px,calc(1.2 * var(--desktop-unit)))}
}
/* Laptop dengan area browser pendek: rapatkan jarak, tetap pertahankan ukuran input. */
@media (min-width:768px) and (max-height:650px){
    .content{padding-top:14vh;padding-top:14svh}
    .registration h2{margin-bottom:12px}
    .field{margin-bottom:10px}
    .field label{font-size:14px;margin-bottom:4px}
    .field input{height:36px;min-height:36px}
    .submit-wrapper{margin-top:12px}
    .page{padding-bottom:16px}
}
@media (max-width:767px){
    .page{min-height:max(100svh,235.64vw);background-image:url('../images/background-mobile.png');padding-bottom:53vw}
    .site-header{position:relative;top:auto;left:auto;padding-top:3.68vw;display:flex;justify-content:center}
    .logo-hiera{width:19.8vw}
    .content{display:block;width:auto;margin:0;padding:5.4vw 0 0}
    .event-info{padding:0}
    .event-heading{width:79%;margin:0 auto}
    .event-details{width:54%;margin:3.7vw auto 0}
    .registration{width:85.6%;margin:13.5vw auto 0}
    .registration h2{font-size:7.4vw;line-height:1.2;margin:0 0 2.4vw;letter-spacing:-.03em}
    .field{margin-bottom:4.5vw}
    .field label{font-size:clamp(16px,3.25vw,25px);line-height:1.4;margin-bottom:1.2vw}
    .field input{height:9.1vw;min-height:44px;border-radius:5px;padding:10px 13px;font-size:clamp(16px,3.1vw,23px)}
    .submit-wrapper{margin-top:5.3vw}
    .submit-button{width:38vw;min-width:150px}
    .submit-loading{font-size:clamp(14px,3vw,22px)}
    .ornament-left{width:33.2vw;bottom:0}
    .ornament-right{width:19vw;top:64.4vw}
    .partners{top:auto;bottom:6.8vw;right:4.8vw;width:43.2vw}
}