@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght,SOFT@9..144,500,20;9..144,650,20;9..144,750,20&display=swap');
:root{--ink:#24413d;--muted:#64746e;--cream:#faf5ea;--paper:#fdfaf3;--peach:#e39b81;--sage:#93a999;--red:#b45f54;--border:#dfded3}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"DM Sans",Arial,sans-serif;color:var(--ink)}
body{background:var(--cream)}
[hidden]{display:none!important}
button,input{font:inherit}
button,.button{cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--ink);border-radius:12px;padding:11px 17px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;transition:transform .18s,background .18s}
button:hover,.button:hover{transform:translateY(-2px);background:#f6f1e7}
button:disabled{opacity:.5;cursor:default;transform:none}
.primary{color:#fff;background:var(--ink);border-color:var(--ink)}
.primary:hover{background:#315b53;color:#fff}
input:not([type=file]){border:1px solid #c8d0c8;border-radius:12px;background:#fff;padding:13px 15px;width:100%;color:var(--ink)}
input:focus{outline:3px solid #b7cbb7;outline-offset:1px}
.eyebrow{font-size:clamp(12px,1.3vw,20px);letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:#b56e5b}
h1,h2{font-family:"Fraunces",Georgia,serif;letter-spacing:-.035em}
p{line-height:1.5}
.error{color:#b04137;min-height:1.2em;font-size:14px}
.muted{color:var(--muted);font-size:14px}
.login-card{max-width:540px;margin:min(18vh,130px) auto 30px;background:var(--paper);padding:50px;border:1px solid var(--border);border-radius:24px;box-shadow:0 20px 70px #34514a16}
.login-card h1{font-size:44px;margin:14px 0}.login-card form{display:flex;gap:10px}
.present-body{background:#deded4}
#stage{width:100%}
.slide{width:min(100vw,calc((100vh - 90px)*16/9));aspect-ratio:16/9;margin:0 auto;background:var(--paper);overflow:hidden;position:relative;box-shadow:0 4px 50px #273b381d}
.slide:before{content:"";position:absolute;width:52vw;height:52vw;border-radius:50%;background:#e7dfcc60;right:-25%;top:-70%;pointer-events:none}
.slide:after{content:"PERTEMUAN SEL MBK 5  /  13 NOVEMBER 2026";position:absolute;bottom:3%;left:5.5%;color:#82908a;font-size:clamp(9px,1.05vw,17px);letter-spacing:.16em;font-weight:700}
.slide-content,.welcome{display:grid;grid-template-columns:1fr .84fr;gap:4%;align-items:center;height:100%;padding:6% 6% 8%}
.slide-copy{position:relative;z-index:1;max-width:710px}
.slide-copy h1,.text-slide h1{font-size:clamp(31px,5vw,82px);line-height:1.1;margin:5% 0 5%}
.slide-copy p{font-size:clamp(16px,2.05vw,34px);line-height:1.45;color:#485c54;max-width:690px}
.drawing{width:100%;max-height:80vh;filter:drop-shadow(0 28px 24px #3a453316)}
.welcome{grid-template-columns:1fr 1fr;padding-left:7%}
.welcome h1{font-size:clamp(43px,6.4vw,104px);line-height:1.02;margin:5% 0 2%;letter-spacing:-.06em}
.welcome em{font-weight:500;color:#b4695e;font-style:italic}
.welcome-copy{z-index:2}.welcome-copy>p{font-size:clamp(17px,2vw,28px)}
.welcome-visual{transform:scale(1.03)}
.qr{margin-top:5%;background:#fff;padding:8px;display:inline-flex;border-radius:16px;box-shadow:0 8px 30px #2d473821}.qr img{width:clamp(90px,12vw,180px);height:auto}
.welcome-status{font-size:clamp(12px,1.2vw,18px);color:var(--muted);margin-top:2%}
.text-slide{height:100%;padding:5.5% 7% 8%;position:relative;z-index:1}
.text-slide h1{margin:1% 0 2%;font-size:clamp(34px,4.5vw,70px)}
.text-slide ol{font-size:clamp(15px,1.95vw,30px);line-height:1.43;display:grid;gap:3%;padding-left:4%;max-width:1300px}
.text-slide li{padding-left:1.5%}
.text-slide.long{padding:3.4% 6% 6%}
.text-slide.long h1{font-size:clamp(24px,2.8vw,45px);margin:1% 0}
.text-slide.long p{font-size:clamp(11px,1.36vw,21px);line-height:1.43;margin:0;max-width:1500px}
.final-slide{height:100%;padding:3% 6% 7%;display:flex;flex-direction:column;text-align:center}
.final-heading{position:relative;z-index:2}.final-heading span{font-weight:700;font-size:clamp(15px,1.8vw,28px);letter-spacing:.15em;text-transform:uppercase;color:#ad6c5c}
.final-heading h1{font-size:clamp(38px,4.6vw,73px);margin:.4% 0;font-weight:650}
.final-heading p{font-size:clamp(15px,1.55vw,25px);margin:0}
.final-art{margin:2% auto 0;flex:1;min-height:0;width:min(88%,1200px);background:#e7ddc9;border:11px solid #fff;border-radius:18px;box-shadow:0 14px 40px #36443d2b;overflow:hidden}
.final-art>img{width:100%;height:100%;object-fit:contain;background:#e7ddc9}
.waiting-art{height:100%;display:grid;place-content:center;color:#6b7d70}.waiting-art .drawing{max-height:36vh}.waiting-art p{font-size:clamp(16px,1.5vw,25px)}.sparkle{font-size:clamp(70px,13vw,180px);color:#c99575}
.controls{background:#f7f6f1;padding:10px 18px;max-width:1600px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--border);min-height:90px}
.controls-title{font-size:13px;letter-spacing:.06em;font-weight:700}.controls-title span{display:block;color:var(--muted);font-weight:400;letter-spacing:0}
.control-buttons{display:flex;gap:8px;flex-wrap:wrap}.control-buttons button,.control-buttons .button{font-size:13px;padding:9px 13px}
.controls .error{flex-basis:100%;margin:0;min-height:0}
.phone-body{min-height:100dvh;padding:24px 14px;background:linear-gradient(145deg,#e8f0e7,#faeee0)}
.phone-card{max-width:550px;margin:20px auto;background:var(--paper);border-radius:24px;padding:clamp(24px,6vw,42px);box-shadow:0 18px 60px #253f3125}
.phone-card h1{font-size:38px;line-height:1.05;margin:14px 0}.phone-card h2{font-size:28px;margin:20px 0 7px}
.phone-card label{display:block;font-weight:700;margin:22px 0 8px}
.phone-card video,.phone-card #selfie-preview{width:100%;max-height:55vh;object-fit:cover;border-radius:14px;margin:17px 0 0;background:#d4dcd0;transform:scaleX(-1)}
.phone-card #selfie-preview{transform:none}
.block{display:flex;width:100%;margin-top:20px;padding:15px}
.friend{display:flex;gap:13px;align-items:center;margin:14px 0;padding:10px;background:#f4f1e8;border-radius:15px}
.friend img{width:84px;height:96px;object-fit:cover;border-radius:10px;background:#ddd6c7}
.friend-fields{min-width:0;flex:1}.friend-fields strong{display:block;margin-bottom:6px}.friend-fields input{font-size:14px;padding:10px}
.friend-fields .small-button{font-size:12px;color:#546a5f;padding:4px 8px;border:0;background:transparent;margin-top:5px}
.done-icon{text-align:center;color:#c07f69;font-size:70px}
@media(max-width:700px){.login-card{margin:40px 14px;padding:25px}.login-card form{flex-direction:column}.slide{width:100%;aspect-ratio:16/9}.slide-copy p{line-height:1.3}.controls{padding:9px}.controls-title{font-size:11px}}