/* ==========================================================
   92 — Moto Art Kultour  ·  mobile-first
   Mobile (< 768px): semua section muat dalam 1 layar (100dvh).
   Desktop (>= 768px): section tampil penuh sesuai rasio Figma 1440px.

   Konsep:
   - .sec   = kotak section (container query, ukuran mengikuti layout)
   - .stage = kanvas artwork rasio Figma, di-"cover" ke dalam .sec
   - Elemen UI (chevron, cart, tombol, kontrol video) menempel ke .sec,
     jadi tetap terlihat walau artwork terpotong sedikit di mobile.
   ========================================================== */

:root {
  --ink: #1a1a1a;
  --ink-muted: #6b6b6b;
  --paper: #ffffff;
  --footer-bg: #f2f2f2;
  --placeholder: #dbdbdb;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* 1px artboard Figma, relatif ke container terdekat */
  --u: calc(100cqw / 1440);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--ink); color: var(--ink); font-family: var(--font); }
[hidden] { display: none !important; }
img { display: block; }
button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--ink); }

/* ---------- Layout halaman (mobile: 1 layar) ---------- */
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
.sec {
  position: relative;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  container-type: size;
  background: var(--placeholder);
}
.hero   { flex: 789 1 0; }
.slider { flex: 810 1 0; }
.story  { flex: 810 1 0; }
.footer { flex: none; aspect-ratio: 1440 / 178; background: var(--footer-bg); }

/* ---------- Stage: artwork rasio Figma, mode cover ---------- */
.stage {
  position: absolute;
  top: 50%; left: 50%;
  aspect-ratio: 1440 / 810;
  width: max(100cqw, 100cqh * 1440 / 810);
  transform: translate(-50%, -50%);
  overflow: hidden;
  container-type: inline-size;
}
.stage--hero {
  aspect-ratio: 1440 / 789;
  width: max(100cqw, 100cqh * 1440 / 789);
}
/* Slider: teks gambar ada di kiri bawah → potong dari kanan */
.stage--left { left: 0; transform: translateY(-50%); }

.divider {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: max(1px, calc(3 * var(--u)));
  background: var(--ink); z-index: 5;
}

/* ==========================================================
   01 HERO
   ========================================================== */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; background: #000;
}
.hero__photo {
  position: absolute;
  left: -1.530%; top: -9.193%;
  width: 105.317%; height: 120.081%;
  max-width: none;
}
.hero__overlay {
  position: absolute;
  left: -5.574%; top: -7.438%;
  width: 111.498%; height: 114.264%;
  max-width: none;
  mix-blend-mode: screen;
}
.hero__poster, .hero__play { transition: opacity .3s ease; }
.hero.is-playing .hero__poster,
.hero.is-playing .hero__play { opacity: 0; pointer-events: none; }

.hero__play {
  position: absolute;
  left: 50%; top: 51.33%;
  width: max(44px, 6.667%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.hero__play > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__play-icon {
  position: absolute;
  left: 39.583%; top: 33.333%;
  width: 29.167%; height: 33.333%;
}
.hero__play-icon img {
  position: absolute;
  top: -2.69%; left: -1.79%;
  width: 105.39%; height: 105.38%;
}

.hero__controls { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hero__controls > * { pointer-events: auto; }

.hero__toggle {
  position: absolute;
  left: 6.667%; top: 95.564%;
  width: max(9px, calc(12 * var(--u)));
  height: max(11px, calc(16 * var(--u)));
  transform: translateY(-50%);
  display: flex; justify-content: space-between;
}
.hero__toggle .bar { width: max(3px, calc(4 * var(--u))); background: var(--ink); }
.hero:not(.is-playing) .hero__toggle .bar { display: none; }
.hero:not(.is-playing) .hero__toggle::before {
  content: ""; position: absolute; inset: 0;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.hero__track {
  position: absolute;
  left: 9.722%; top: 95.437%;
  width: 82.5%; height: 2px;
  background: var(--ink-muted);
  cursor: pointer;
}
.hero__track::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.hero__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 27.778%; background: var(--ink); }
.hero__scrubber {
  position: absolute; top: 50%; left: 27.778%;
  width: max(8px, calc(10 * var(--u)));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.hero__duration {
  position: absolute;
  left: 90.764%; top: 95.564%;
  transform: translateY(-50%);
  font-weight: 500;
  font-size: max(9px, calc(13 * var(--u)));
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

/* ==========================================================
   CAROUSEL (Slider & Story)
   ========================================================== */
.carousel__track {
  position: absolute; inset: 0;
  display: flex;
  transition: transform .6s cubic-bezier(.65, 0, .35, 1);
  touch-action: pan-y;
}
.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
}

.chevron {
  position: absolute;
  top: 49.877%;
  width: max(12px, 1.944%);
  aspect-ratio: 1 / 2;
  transform: translate(-50%, -50%);
  z-index: 4;
}
.chevron::after { content: ""; position: absolute; inset: -14px; } /* area sentuh ≥ 40px */
.chevron--prev { left: max(18px, 4.028%); }
.chevron--next { left: min(calc(100% - 18px), 96.319%); }
.chevron span { position: absolute; top: -3.79%; right: -7.58%; bottom: -3.79%; left: -15.15%; }
.chevron--next span { transform: rotate(180deg); }
.chevron img { width: 100%; height: 100%; }
.chevron[disabled] { opacity: .35; cursor: default; }

/* ---------- 02 Slider ---------- */
.slide__img { position: absolute; max-width: none; object-fit: cover; }
.slide__img--1 { left: 0;       top: -0.494%; width: 100.347%; height: 100.617%; }
.slide__img--2 { left: 0;       top: 0;       width: 100%;     height: 100.370%; }
.slide__img--3 { left: -0.694%; top: -5.432%; width: 105.694%; height: 106.914%; }

.slide__cart {
  position: absolute;
  left: 92.535%; top: 89.383%;
  width: max(24px, 4.236%);
  aspect-ratio: 61 / 60;
  transform: translate(-50%, -50%);
  z-index: 4;
}
.slide__cart img { width: 100%; height: 100%; }

/* ---------- 04 Story ---------- */
.story__photo {
  position: absolute;
  left: -81.458%; top: -136.173%;
  width: 265.356%; height: 314.398%;
  max-width: none;
}
.story__logo {
  position: absolute;
  left: 24.444%; top: 34.198%;
  width: 51.042%; height: 59.877%;
}
.story__logo > span { position: absolute; }
.story__logo img { width: 100%; height: 100%; }

.btn-outline {
  position: absolute;
  right: 2.5%; top: 88.395%;
  transform: translateY(-50%);
  min-width: 8.611%;
  height: max(20px, 4.444%);
  padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  font-weight: 600;
  font-size: max(9px, calc(12 * var(--u)));
  letter-spacing: .08em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  z-index: 4;
  transition: background-color .2s, color .2s;
}
.btn-outline:hover { background: var(--ink); color: var(--paper); }

/* ==========================================================
   05 FOOTER
   ========================================================== */
.footer__art {
  position: absolute;
  left: 0.069%; top: -1.124%;
  width: 99.931%; height: 101.685%;
  max-width: none;
}
.footer__social {
  position: absolute;
  left: 88.772%; top: 40.264%;
  width: 4.265%; height: 22.483%;
  display: flex; flex-direction: column;
}
.footer__social a { flex: 1; }

/* ==========================================================
   TABLET / DESKTOP — section penuh sesuai desain, bisa scroll
   ========================================================== */
@media (min-width: 768px) {
  .page { display: block; height: auto; }
  .hero   { aspect-ratio: 1440 / 789; }
  .slider,
  .story  { aspect-ratio: 1440 / 810; }
  .btn-outline { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track, .hero__poster, .hero__play, .btn-outline { transition: none; }
}

/* ==========================================================
   VERIFIKASI USIA
   ========================================================== */
html.age-locked, html.age-locked body { overflow: hidden; }

.age-gate {
  --gate-ink: #2b2a33;
  --gate-dark: #35323f;
  --gate-line: #c9c7cf;
  --gate-error: #d62e33;
  position: fixed; inset: 0; z-index: 100;
  display: flex;
  padding: 16px;
  overflow-y: auto;
  background: rgba(43, 42, 51, .72); /* backdrop: website tetap samar terlihat */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--gate-ink);
  font-family: "Inclusive Sans", var(--font);
  text-align: center;
  transition: opacity .3s;
}
.age-gate[hidden] { display: none; }
.age-gate:focus { outline: none; }
.age-gate.is-leaving { opacity: 0; pointer-events: none; }

/* Kartu modal — margin auto: di tengah, tapi tetap bisa di-scroll di layar pendek */
.age-gate__box {
  width: 100%; max-width: 390px;
  margin: auto;
  padding: 40px 24px 32px;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .25);
  animation: age-gate-in .3s ease-out;
}
@keyframes age-gate-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  .age-gate__box { animation: none; }
}
.age-gate__logo { width: 112px; height: 112px; margin: 0 auto 32px; }
.age-gate__title {
  margin: 0 0 40px;
  font-size: 20px; font-weight: 400; line-height: 25px;
  white-space: pre-line;
  text-wrap: balance;
}

.age-gate__actions { display: flex; gap: 16px; }
.age-gate__btn {
  flex: 1 1 0; height: 56px;
  border: 1.5px solid var(--gate-line); border-radius: 28px;
  background: var(--paper); color: var(--gate-ink);
  font-family: inherit; font-size: 18px; font-weight: 500; line-height: 21.6px;
  transition: background-color .2s, border-color .2s, color .2s;
}
.age-gate__btn:hover { border-color: var(--gate-dark); }
.age-gate__btn[aria-pressed="true"] {
  background: var(--gate-dark); border-color: var(--gate-dark); color: #fff;
}
.age-gate__btn:focus-visible { outline: 2px solid var(--gate-dark); outline-offset: 3px; box-shadow: none; }

.age-gate__denied {
  margin: 16px 0 0;
  font-size: 14px; line-height: 20px;
  text-wrap: balance;
  color: var(--gate-error);
}