/* Font di-host sendiri (public/fonts, subset latin dari Google Fonts) supaya tidak ada CSS pemblokir render dari domain luar.
   Montserrat: variable font 400–800, SIL OFL 1.1. Luckiest Guy: Apache 2.0. Teks lisensi ada di public/fonts. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Luckiest Guy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/luckiest-guy-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--font-sans); }
.mbf-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.mbf-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }

/* Button */
.mbf-btn { font: 600 14px/20px var(--font-sans); border-radius: var(--radius-md); padding: 10px 20px; border: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); }
.mbf-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mbf-btn-primary { background: var(--action); color: var(--on-action); }
.mbf-btn-primary:hover { background: var(--action-hover); }
.mbf-btn-secondary { background: var(--surface-raised); color: var(--heading); border-color: var(--heading); }
.mbf-btn-secondary:hover { background: var(--surface-tint); }
.mbf-btn-quiet { background: transparent; color: var(--heading); text-decoration: underline; text-underline-offset: 3px; padding-inline: var(--space-2); }
.mbf-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Field + Select */
.mbf-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 220px; flex: 1; }
.mbf-field-label { font: 600 13px/18px var(--font-sans); color: var(--text); }
.mbf-field-label .mbf-req { color: var(--status-danger); margin-left: 2px; }
.mbf-input { font: 400 15px/22px var(--font-sans); color: var(--text); background: var(--surface-raised); border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 9px var(--space-3); }
.mbf-input::placeholder { color: var(--text-muted); }
.mbf-input:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.mbf-input[aria-invalid="true"] { border-color: var(--status-danger); }
.mbf-field-hint { font: 500 12px/16px var(--font-sans); color: var(--text-muted); }
.mbf-field-error { font: 600 12px/16px var(--font-sans); color: var(--status-danger); }

/* Badges */
.mbf-badge { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/16px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); }
.mbf-badge-olahraga { background: var(--cat-sport-bg); color: var(--cat-sport-fg); }
.mbf-badge-pengetahuan { background: var(--cat-know-bg); color: var(--cat-know-fg); }
.mbf-badge-seni { background: var(--cat-art-bg); color: var(--cat-art-fg); }
.mbf-status { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-sans); }
.mbf-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mbf-status-ok { color: var(--status-ok); }
.mbf-status-wait { color: var(--status-wait); }
.mbf-status-danger { color: var(--status-danger); }
.mbf-status-draft { color: var(--text-muted); }

/* Competition card */
.mbf-card { background: var(--surface-raised); border: 1.5px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); width: 260px; box-sizing: border-box; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.mbf-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mbf-card[aria-pressed="true"] { background: var(--surface-tint); border-color: var(--heading); }
.mbf-card-title { font: 700 17px/24px var(--font-sans); color: var(--heading); margin: 0; }
.mbf-card-meta { font: 500 12px/18px var(--font-sans); color: var(--text-muted); margin: 0; }
.mbf-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-1); font: 600 13px/18px var(--font-sans); color: var(--text); }

/* Stepper */
.mbf-steps { list-style: none; display: flex; gap: var(--space-2); padding: 0; margin: 0; counter-reset: s; flex-wrap: wrap; }
.mbf-step { display: flex; align-items: center; gap: var(--space-2); font: 600 13px/18px var(--font-sans); color: var(--text-muted); counter-increment: s; }
.mbf-step::before { content: counter(s); width: 28px; height: 28px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; border: 2px solid var(--border-strong); color: var(--text-muted); background: var(--surface-raised); }
.mbf-step + .mbf-step { padding-left: var(--space-2); }
.mbf-step + .mbf-step::after { order: -1; content: ""; width: 24px; height: 2px; background: var(--border-strong); margin-right: var(--space-2); }
.mbf-step[data-state="done"]::before { content: "✓"; background: var(--heading); border-color: var(--heading); color: var(--surface-raised); }
.mbf-step[data-state="current"] { color: var(--heading); }
.mbf-step[data-state="current"]::before { border-color: var(--heading); color: var(--heading); box-shadow: 0 0 0 3px var(--surface-tint); }

/* Timeline */
.mbf-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.mbf-tl-item { display: flex; flex-direction: column; gap: var(--space-2); }
.mbf-tl-phase { font: 700 11px/16px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.mbf-tl-date { background: var(--brand-navy); color: #ffffff; font: 700 15px/22px var(--font-sans); padding: 8px var(--space-3); border-radius: var(--radius-sm); }
.mbf-tl-item[data-active="true"] .mbf-tl-date { background: var(--brand-yellow); color: var(--brand-ink); }
.mbf-tl-note { font: 400 13px/18px var(--font-sans); color: var(--text); }

/* ---------------------------------------------------------------
   Motion — timing shared by every animation below.
   Everything that moves runs on every device (Windows "Animation effects" off no longer stops it); html.no-motion, set by the "Matikan animasi" button, stops it all.
   --------------------------------------------------------------- */
:root {
  --mbf-ease-out: cubic-bezier(.22, 1, .36, 1);
  --mbf-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --mbf-dur-fast: 150ms;
  --mbf-dur: 300ms;
  --mbf-dur-slow: 600ms;
}

@keyframes mbf-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mbf-pop { 0% { opacity: 0; transform: scale(.4) rotate(-12deg); } 70% { opacity: 1; transform: scale(1.08) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes mbf-zoom { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes mbf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes mbf-float { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, -14px) rotate(6deg); } }
@keyframes mbf-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes mbf-bump { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes mbf-ring { 0% { box-shadow: 0 0 0 0 var(--surface-tint); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes mbf-glow { 0%, 100% { box-shadow: 0 0 0 0 var(--brand-yellow); } 50% { box-shadow: 0 0 0 6px var(--brand-yellow); } }
@keyframes mbf-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes mbf-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Chunky buttons: a solid ledge underneath, like the logo's shadow. */
.mbf-btn-primary, .mbf-btn-secondary { box-shadow: 0 4px 0 rgba(0, 0, 0, .22); }

@media all { /* gerak selalu jalan; dimatikan lewat tombol "Matikan animasi" (html.no-motion) */
  .mbf-btn { transition: transform var(--mbf-dur-fast) var(--mbf-ease-out), box-shadow var(--mbf-dur-fast) var(--mbf-ease-out), background var(--mbf-dur-fast); }
  .mbf-btn-primary:hover:not(:disabled), .mbf-btn-secondary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, .22); }
  .mbf-btn-primary:active:not(:disabled), .mbf-btn-secondary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .22); }

  .mbf-card { transition: transform var(--mbf-dur) var(--mbf-ease-bounce), box-shadow var(--mbf-dur) var(--mbf-ease-out), background var(--mbf-dur), border-color var(--mbf-dur); }
  .mbf-card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 14px 28px rgba(47, 55, 116, .18); }
  .mbf-card:hover .mbf-badge { animation: mbf-wiggle .5s var(--mbf-ease-out); }
  .mbf-card[aria-pressed="true"], .mbf-card:has(input:checked) { animation: mbf-bump .35s var(--mbf-ease-bounce); }

  .mbf-step[data-state="current"]::before { animation: mbf-ring 1.6s var(--mbf-ease-out) infinite; }
  .mbf-tl-item[data-active="true"] .mbf-tl-date { animation: mbf-glow 2.4s ease-in-out infinite; }
  .mbf-status-wait::before { animation: mbf-blink 1.4s ease-in-out infinite; }

  /* Scroll reveal: a script adds .mbf-motion to <html>, then .is-in to each .mbf-reveal as it enters the viewport. */
  .mbf-motion .mbf-reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--mbf-dur-slow) var(--mbf-ease-out), transform var(--mbf-dur-slow) var(--mbf-ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .mbf-motion .mbf-reveal.is-in { opacity: 1; transform: none; }

  .mbf-float { animation: mbf-float 7s ease-in-out infinite; }
  .mbf-float:nth-child(2n) { animation-duration: 9s; animation-delay: -2s; }
  .mbf-float:nth-child(3n) { animation-duration: 11s; animation-delay: -5s; }
}

/* ---------------------------------------------------------------
   HeroSlider
   --------------------------------------------------------------- */
.mbf-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; }
.mbf-slider-track { display: flex; }
.mbf-slide { flex: 0 0 100%; min-height: 360px; position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; padding: var(--space-8) var(--space-8) 76px; box-sizing: border-box; }
/* Halftone streak, the texture behind the MBF 16 logo */
.mbf-slide::before { content: ""; position: absolute; inset: -40%; background-image: radial-gradient(circle, rgba(255, 255, 255, .28) 2.5px, transparent 3px); background-size: 18px 18px; transform: rotate(-24deg); -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 55%, #000 70%, transparent 90%); mask-image: linear-gradient(90deg, transparent 35%, #000 55%, #000 70%, transparent 90%); pointer-events: none; z-index: -1; }
.mbf-slide--blue { background: var(--brand-blue); color: #ffffff; }
.mbf-slide--navy { background: var(--brand-navy); color: #ffffff; }
.mbf-slide--yellow { background: var(--brand-yellow); color: var(--brand-ink); }
.mbf-slide--yellow::before { background-image: radial-gradient(circle, rgba(34, 31, 31, .14) 2.5px, transparent 3px); }
.mbf-slide--ink { background: var(--brand-ink); color: #ffffff; }
.mbf-slide--orange { background: var(--brand-orange); color: #ffffff; }

.mbf-slide-body { position: relative; z-index: 1; max-width: min(560px, 56%); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.mbf-slide-kicker { font: 700 12px/16px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; background: #ffffff; color: var(--brand-ink); padding: 6px 12px; border-radius: var(--radius-pill); }
.mbf-slide-title { font: 400 48px/1.05 var(--font-fun); margin: 0; letter-spacing: 1px; color: inherit; text-shadow: 3px 3px 0 rgba(0, 0, 0, .25); }
.mbf-slide--yellow .mbf-slide-title { text-shadow: 3px 3px 0 rgba(255, 255, 255, .55); }
/* 19px bold: white on brand-blue (4.06:1) and brand-orange (4.38:1) only passes as large text. */
.mbf-slide-text { font: 700 19px/28px var(--font-sans); margin: 0; }
.mbf-slide-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.mbf-slide-chips li { font: 700 13px/18px var(--font-sans); background: #ffffff; color: var(--brand-ink); padding: 6px 12px; border-radius: var(--radius-pill); }
.mbf-slide--yellow .mbf-slide-chips li { background: var(--brand-ink); color: #ffffff; }
.mbf-slide-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); }
.mbf-slide .mbf-btn-primary { background: var(--brand-yellow); color: var(--brand-ink); }
.mbf-slide .mbf-btn-primary:hover { background: #ffd27a; }
.mbf-slide--yellow .mbf-btn-primary { background: var(--brand-ink); color: #ffffff; }
.mbf-slide--yellow .mbf-btn-primary:hover { background: #3a3535; }
.mbf-slide .mbf-btn-secondary { background: #ffffff; color: var(--brand-ink); border-color: #ffffff; }
.mbf-slide .mbf-btn:focus-visible { outline-color: #ffffff; }
.mbf-slide--yellow .mbf-btn:focus-visible { outline-color: var(--brand-ink); }
.mbf-slide-art { position: absolute; right: var(--space-8); top: 0; bottom: 0; display: flex; align-items: center; z-index: 0; pointer-events: none; }
.mbf-slide-art { max-width: 36%; }
.mbf-slide-art img { width: 380px; max-width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
/* Oversized numeral in the logo's lettering: yellow fill, orange ledge */
.mbf-slide-num { font: 400 clamp(120px, 20vw, 240px)/0.9 var(--font-fun); color: var(--brand-yellow); text-shadow: 10px 10px 0 var(--brand-orange); display: block; }
.mbf-slide--yellow .mbf-slide-num { color: var(--brand-navy); }
.mbf-slide--orange .mbf-slide-num { text-shadow: 10px 10px 0 var(--brand-ink); }
.mbf-slide-blob { position: absolute; border-radius: 55% 45% 60% 40%; z-index: -1; pointer-events: none; opacity: .9; }

/* Countdown */
.mbf-countdown { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.mbf-countdown li { background: #ffffff; color: var(--brand-ink); border-radius: var(--radius-md); min-width: 64px; padding: 6px 8px; text-align: center; display: flex; flex-direction: column; box-shadow: 0 4px 0 rgba(0, 0, 0, .22); }
.mbf-countdown b { font: 400 30px/1.1 var(--font-fun); font-variant-numeric: tabular-nums; }
.mbf-countdown span { font: 700 10px/14px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; }

/* Controls */
.mbf-slider-nav { position: absolute; left: var(--space-8); right: var(--space-8); bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); z-index: 2; }
.mbf-slider-nav[hidden] { display: none; }
/* Titik tampak 14 px, area sentuh 24 px (WCAG 2.5.8): bingkai transparan 5 px di sekeliling titik ikut bisa diklik,
   cincin titik digambar dengan box-shadow inset. Bingkai itu juga jadi jarak antartitik, jadi dots tanpa gap.
   Latar titik selalu lewat background-color supaya tetap terpotong di padding-box. */
.mbf-slider-dots { display: flex; margin-right: auto; }
.mbf-slider-dot { box-sizing: border-box; width: 24px; height: 24px; border-radius: var(--radius-pill); border: 5px solid transparent; background: transparent padding-box; box-shadow: inset 0 0 0 2px #ffffff; padding: 0; cursor: pointer; position: relative; overflow: hidden; }
.mbf-slider-dot[aria-current="true"] { width: 54px; background-color: rgba(255, 255, 255, .4); }
.mbf-slider-dot[aria-current="true"]::after { content: ""; position: absolute; inset: 0; background: #ffffff; transform-origin: left; }
.mbf-slider[data-slide-theme="yellow"] .mbf-slider-dot { box-shadow: inset 0 0 0 2px var(--brand-ink); }
.mbf-slider[data-slide-theme="yellow"] .mbf-slider-dot[aria-current="true"] { background-color: rgba(34, 31, 31, .3); }
.mbf-slider[data-slide-theme="yellow"] .mbf-slider-dot[aria-current="true"]::after { background: var(--brand-ink); }
.mbf-slider-btn { width: 44px; height: 44px; border-radius: var(--radius-pill); border: 0; background: #ffffff; color: var(--brand-ink); font: 700 16px/1 var(--font-sans); cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(0, 0, 0, .22); }
.mbf-slider-btn:hover { background: var(--brand-yellow); }
.mbf-slider-btn:focus-visible, .mbf-slider-dot:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 2px; }
.mbf-slider-dot:focus-visible { outline-offset: -3px; } /* di dalam bingkai transparan: tetap 2 px dari titik */
.mbf-slider[data-slide-theme="yellow"] .mbf-slider-btn:focus-visible, .mbf-slider[data-slide-theme="yellow"] .mbf-slider-dot:focus-visible { outline-color: var(--brand-ink); }

@media all { /* gerak selalu jalan; dimatikan lewat tombol "Matikan animasi" (html.no-motion) */
  .mbf-slider-track { transition: transform 700ms var(--mbf-ease-out); }
  .mbf-slide.is-active .mbf-slide-body > * { animation: mbf-rise var(--mbf-dur-slow) var(--mbf-ease-out) both; }
  .mbf-slide.is-active .mbf-slide-body > :nth-child(2) { animation-delay: 80ms; }
  .mbf-slide.is-active .mbf-slide-body > :nth-child(3) { animation-delay: 160ms; }
  .mbf-slide.is-active .mbf-slide-body > :nth-child(4) { animation-delay: 240ms; }
  .mbf-slide.is-active .mbf-slide-body > :nth-child(5) { animation-delay: 320ms; }
  /* The logo is never tilted: art only scales in and bobs up and down. */
  .mbf-slide.is-active .mbf-slide-art { animation: mbf-zoom 800ms var(--mbf-ease-bounce) 150ms both; }
  .mbf-slide.is-active .mbf-slide-art > * { animation: mbf-bob 5s ease-in-out 1s infinite; }
  .mbf-slide-blob { animation: mbf-float 9s ease-in-out infinite; }
  .mbf-slider.is-playing .mbf-slider-dot[aria-current="true"]::after { animation: mbf-progress var(--mbf-interval, 6000ms) linear both; }
}
.mbf-slider:not(.is-playing) .mbf-slider-dot[aria-current="true"]::after { transform: scaleX(1); }

@media (max-width: 720px) {
  /* Phones: the art moves to the top-right corner above the text, never behind it. */
  .mbf-slide { min-height: 460px; padding: 104px var(--space-4) 76px; align-items: flex-start; }
  .mbf-slide-body { max-width: 100%; }
  .mbf-slide-title { font-size: 34px; }
  .mbf-slide-art { right: var(--space-4); top: var(--space-4); bottom: auto; max-width: 50%; align-items: flex-start; }
  .mbf-slide-num { font-size: 80px; text-shadow: 5px 5px 0 var(--brand-orange); }
  .mbf-slide--orange .mbf-slide-num { text-shadow: 5px 5px 0 var(--brand-ink); }
  .mbf-slide-art img { width: 150px; }
  .mbf-slide-blob { left: auto !important; right: -60px !important; top: -60px !important; bottom: auto !important; }
  .mbf-slider-nav { left: var(--space-4); right: var(--space-4); }
}