/* Homepage Art of Race — "lembar kontak hari lomba". Scroll asli browser, tanpa pin/hijack. */
body.home {
  --paper: #eef0f1;      /* putih marka lintasan, dingin */
  --paper-2: #e2e5e8;
  --ink: #131218;
  --ink-2: #4a4856;
  --rule: #c9ccd3;
  --plate: #ffb81c;
  --eye: #e8282e;
  background: var(--paper); color: var(--ink);
  color-scheme: light;
}
.home h1, .home h2, .home h3 { text-transform: none; }
.home ::selection { background: var(--plate); color: var(--ink); }
.home :focus-visible { outline-color: var(--ink); }
.home .btn.ghost { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.home .btn.ghost::before { background: var(--ink); }
.home .btn.ghost:hover { color: var(--paper); }
.btn.dark { background: var(--ink); color: var(--paper); }
.btn.dark::before { background: var(--plate); }
.btn.dark:hover { color: var(--ink); }
.wrap { width: min(100% - 32px, 1240px); margin-inline: auto; }

/* ---------- bar atas ---------- */
.bar { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); }
.bar-in { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 900 1.55rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.brand img { width: 36px; height: 36px; object-fit: contain; }
.bar nav { display: flex; align-items: center; gap: 26px; }
.bar nav a:not(.btn) { text-decoration: none; font-weight: 600; color: var(--ink-2); padding: 10px 0; }
.bar nav a:not(.btn):hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
@media (max-width: 720px) { .bar nav a:not(.btn) { display: none; } }

/* ---------- hero ---------- */
.hero { padding-top: clamp(24px, 4vw, 56px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.kicker { font-weight: 600; color: var(--ink-2); font-size: .98rem; margin-bottom: 18px; }
.hero h1 { font: 900 clamp(4.4rem, 7.6vw, 7.6rem)/.84 var(--font-display); letter-spacing: -.012em; text-transform: uppercase; }
.lede { font-size: 1.15rem; line-height: 1.55; color: var(--ink-2); max-width: 30em; margin-top: 22px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
.link-arrow { font-weight: 700; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; padding: 12px 0; }
.link-arrow:hover { color: var(--eye); }

.mosaic { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: clamp(380px, 46vw, 620px); }
.mosaic figure { margin: 0; overflow: hidden; background: var(--paper-2); position: relative; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .m1 { grid-row: 1 / 3; }
.mosaic .m1 img { object-position: 55% 40%; }
.mosaic .m3 img { object-position: 70% 50%; }
.mosaic figure::after { counter-increment: fr; position: absolute; left: 10px; bottom: 8px; font: 800 .95rem/1 var(--font-display); letter-spacing: .1em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.mosaic .m1::after { content: 'FR 01'; } .mosaic .m2::after { content: 'FR 02'; } .mosaic .m3::after { content: 'FR 03'; }

/* satu momen gerak: hero muncul sekali */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .kicker, .hero .lede, .hero .cta { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
  .hero .kicker { animation-delay: .05s; } .hero h1 { animation-delay: .1s; } .hero .lede { animation-delay: .22s; } .hero .cta { animation-delay: .3s; }
  .mosaic figure { animation: develop .9s cubic-bezier(.2, .8, .2, 1) both; }
  .mosaic .m2 { animation-delay: .12s; } .mosaic .m3 { animation-delay: .24s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes develop { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }

.next-bar { margin-top: clamp(28px, 4vw, 48px); background: var(--ink); color: var(--paper); }
.next-bar[hidden] { display: none; }
.next-in { display: flex; align-items: center; gap: 14px 18px; min-height: 64px; padding-block: 10px; flex-wrap: wrap; }
.next-in p { flex: 1 1 260px; font-weight: 500; }
.next-in b { font: 800 1.45rem/1 var(--font-display); text-transform: uppercase; color: var(--plate); margin-right: 6px; }
.rec { width: 11px; height: 11px; border-radius: 50%; background: var(--eye); flex: none; }
@media (prefers-reduced-motion: no-preference) { .rec { animation: blink 1.4s steps(2, jump-none) infinite; } }
@keyframes blink { 50% { opacity: .2; } }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .mosaic { height: auto; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; aspect-ratio: 4 / 3.4; order: -1; }
  .hero h1 { font-size: clamp(4.4rem, 22vw, 7.5rem); }
}

/* ---------- bagian umum ---------- */
.sec { padding: clamp(64px, 9vw, 120px) 0; }
.head { display: grid; gap: 10px; margin-bottom: clamp(26px, 4vw, 44px); max-width: 44em; }
.head h2 { font: 900 clamp(2.8rem, 6vw, 4.8rem)/.9 var(--font-display); text-transform: uppercase; }
.head p { color: var(--ink-2); font-size: 1.08rem; }

/* ---------- jadwal: kartu bib ---------- */
.events { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.bib { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; background: #fff; border: 2px solid var(--ink); padding: 20px 20px 18px; transition: transform .18s, box-shadow .18s; }
.bib:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.bib .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bib .date { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .82; }
.bib .date .d { font-size: 4.4rem; display: block; }
.bib .date .m { font-size: 1.25rem; }
.bib .tag { font: 800 .95rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; background: var(--plate); padding: 6px 10px; white-space: nowrap; }
.bib .tag.off { background: var(--paper-2); color: var(--ink-2); }
.bib h3 { font: 800 clamp(1.7rem, 2.6vw, 2.1rem)/1 var(--font-display); }
.bib .venue { color: var(--ink-2); margin-top: 6px; }
.bib .prices { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-weight: 600; font-size: .95rem; }
.bib .prices b { font: 900 1.35rem/1 var(--font-display); margin-left: 6px; }
.bib .btn { width: 100%; }
.bib.closed { opacity: .6; }
.bib.closed:hover { transform: none; box-shadow: none; }
.empty { border: 2px dashed var(--rule); padding: 28px; color: var(--ink-2); }

/* ---------- galeri: masonry kolom, scroll asli ---------- */
.gallery-sec { background: var(--ink); color: var(--paper); }
.gallery-sec .head p { color: #b5b3c2; }
.masonry { columns: 3 280px; column-gap: 12px; }
.shot { display: block; width: 100%; margin: 0 0 12px; padding: 0; border: 0; background: #23212c; cursor: zoom-in; break-inside: avoid; position: relative; overflow: hidden; }
.shot img { width: 100%; height: auto; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s; }
.shot:hover img { transform: scale(1.03); }
.shot span { position: absolute; left: 10px; bottom: 8px; font: 800 .9rem/1 var(--font-display); letter-spacing: .1em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.shot:focus-visible { outline: 3px solid var(--plate); outline-offset: 2px; }

/* muncul saat terlihat (sekali, ringan) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* ---------- cara booking ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.steps li { border-top: 4px solid var(--ink); padding-top: 18px; }
.steps .n { display: inline-grid; place-items: center; width: 40px; height: 40px; background: var(--plate); font: 900 1.4rem/1 var(--font-display); margin-bottom: 14px; }
.steps h3 { font: 800 1.65rem/1.02 var(--font-display); margin-bottom: 8px; }
.steps p { color: var(--ink-2); }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- harga ---------- */
.price { background: var(--plate); padding: clamp(56px, 8vw, 104px) 0; }
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.price h2 { font: 900 clamp(2.6rem, 5.4vw, 4.4rem)/.9 var(--font-display); text-transform: uppercase; }
.rules { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; font-weight: 500; }
.rules li { padding-left: 22px; position: relative; }
.rules li::before { content: ''; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; background: var(--ink); }
.tiers { margin: 0; display: grid; gap: 12px; }
.tiers > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 3px solid var(--ink); padding-bottom: 10px; }
.tiers dt { font-weight: 700; font-size: 1.1rem; }
.tiers dd { margin: 0; font: 900 clamp(4.4rem, 10vw, 8rem)/.8 var(--font-display); }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; } }

/* ---------- kontak & footer ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.contact h2 { font: 900 clamp(2.8rem, 6vw, 4.8rem)/.9 var(--font-display); text-transform: uppercase; }
.links { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 4px; border-bottom: 2px solid var(--ink); text-decoration: none; transition: background .15s, padding .15s; }
.links a:hover { background: var(--plate); padding-inline: 14px; }
.links span { color: var(--ink-2); font-weight: 500; }
.links b { font-weight: 700; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.foot { background: var(--ink); color: #b5b3c2; padding: 36px 0 calc(36px + env(safe-area-inset-bottom)); }
.foot-in { display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap; }
.foot img { width: 64px; height: auto; }
.foot p { flex: 1 1 240px; font-size: .95rem; }

/* tombol booking melayang di HP setelah hero lewat */
.fab { position: fixed; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
@media (max-width: 720px) { .fab { display: flex; transform: translateY(140%); transition: transform .25s; } .fab.on { transform: none; } }

/* ---------- lightbox ---------- */
.lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(10, 9, 14, .96); }
.lb::backdrop { background: rgba(10, 9, 14, .96); }
.lb img { position: absolute; inset: 0; margin: auto; max-width: min(94vw, 1400px); max-height: 84dvh; object-fit: contain; }
.lb-n { position: absolute; left: 16px; top: 18px; color: #fff; font: 800 1.1rem/1 var(--font-display); letter-spacing: .1em; }
.lb-btn { position: absolute; min-width: 48px; min-height: 48px; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.25); font: 700 1rem var(--font-body); cursor: pointer; }
.lb-btn:hover { background: var(--plate); color: var(--ink); }
.lb-x { top: 12px; right: 12px; padding: 0 16px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 2rem; line-height: 1; width: 52px; height: 64px; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
@media (max-width: 720px) { .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; } }