/* ============================================================
   Side by Side Indonesia - Landing styles
   Identitas: editorial kafe, mood roastery specialty. UI netral
   (hitam/putih/abu hangat), warna kuat datang dari fotografi.
   Serif display + monospace untuk harga/label. Lihat DESIGN.md.
   ============================================================ */

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Palet "Highland Mist": teal sejuk + slate di atas kertas netral.
     Menggantikan cokelat-krem agar lebih khas (bukan klise kopi). */
  --ink: #1f2a2e;          /* teks utama, slate gelap */
  --paper: #f4f2ec;        /* latar utama, kertas netral */
  --cream: #e4ebe7;        /* latar section alt, krem kehijauan */
  --charcoal: #4a5a58;     /* teks sekunder, slate abu */
  --line: #cfd8d3;         /* garis pemisah */
  --accent: #2f6f63;       /* aksen teal */
  --accent-text: #1f4d45;  /* aksen gelap untuk teks, kontras AA */
  --card: #ffffff;         /* permukaan kartu */
  --black: #18211f;        /* blok gelap, footer/CTA */

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
  /* Tiap section jadi titik snap vertikal. 'proximity' (bukan
     'mandatory') dipakai supaya section yang isinya lebih tinggi
     dari layar tetap bisa di-scroll penuh, tidak terjebak di satu
     layar. scroll-padding-top menyelaraskan anchor + snap ke bawah
     header sticky. */
  scroll-snap-type: y proximity;
  scroll-padding-top: 60px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* Texture kertas halus di seluruh halaman: garis 4px menyilang
   dengan opacity sangat rendah (<=0.03) sehingga tidak mengurangi
   kontras teks (tetap AA). Fixed di belakang konten, pointer-events
   none agar tidak mengganggu interaksi. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.022) 0 1px, transparent 1px 4px);
  background-size: 4px 4px;
}
/* Pastikan konten di atas lapisan texture. */
.site-nav, main, .site-footer, #mobileMenu { position: relative; z-index: 1; }

/* ── Full-viewport snap sections ───────────────────────────
   Tiap section memenuhi tinggi layar (100svh) dan jadi titik
   snap vertikal. Isi disejajarkan ke tengah agar tidak menggantung
   di atas. 'proximity' (bukan 'mandatory') dipakai agar section
   yang isinya lebih tinggi dari layar, seperti daftar 6 coffee
   shop, tetap bisa di-scroll penuh tanpa terjebak di satu layar.
   Antarmuka ini dimatikan saat pengguna memilih reduced-motion. */
.hero,
.section,
.mood-strip,
.collab {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  scroll-snap-align: start;
}
/* Saat section jadi flex (snap), container harus mengisi lebar
   dan boleh mengecil agar isinya ikut mengecil, bukan meluap. */
.section > .container,
.hero > .container {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1120px;
}

/* Strip pendek: tinggi tetap, BUKAN layar penuh dan bukan
   titik snap. Dipakai untuk "sore di kota batu". */
.mood-strip--short {
  min-height: 300px;
  height: 300px;
  scroll-snap-align: none;
  align-items: center;
}
.mood-strip--short { padding: 0; overflow: hidden; position: relative; }
.mood-strip--short .split__media-inner { padding: 24px 28px; max-width: 620px; }
.mood-strip--short .split__quote { font-size: 26px; }

@media (max-width: 768px) {
  .mood-strip--short .split__quote { font-size: 22px; }
}

a { color: var(--accent-text); }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; color: #fff; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.container--narrow { max-width: 760px; }

.prototype-banner {
  background: var(--accent);
  color: #2b1d05;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
}

/* ── Nav ─────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 248, 0.97);
  border-bottom: 1px solid var(--line);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 24px;
}
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.site-nav__logo {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
}
.site-nav__name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.site-nav__links { display: flex; align-items: center; gap: 22px; }
.site-nav__links a {
  color: var(--charcoal);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav__links a:hover { color: var(--accent); }

.site-nav__cta {
  background: var(--ink);
  color: #fff !important;
  padding: 11px 20px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-nav__cta:hover { background: var(--accent); }

.site-nav__mobile { display: none; }

.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
}

#mobileMenu {
  position: fixed;
  top: 59px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 99;
  flex-direction: column;
  padding: 24px;
  gap: 6px;
  overflow-y: auto;
  display: none;
}
#mobileMenu.open { display: flex; }
#mobileMenu a {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
#mobileMenu a:hover { color: var(--accent); }
#mobileMenu .mobile-cta {
  background: var(--ink);
  color: #fff;
  padding: 11px 20px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin-top: 12px;
  border-bottom: none;
}
#mobileMenu .mobile-cta:hover { background: var(--accent); }

@media (max-width: 768px) {
  .site-nav__links { display: none; }
  .site-nav__mobile { display: flex; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 64px 0 72px;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
}
.hero__photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28,26,23,0.55) 0%, rgba(28,26,23,0.35) 50%, rgba(28,26,23,0.78) 100%),
    linear-gradient(90deg, rgba(28,26,23,0.55) 0%, rgba(28,26,23,0.20) 50%, rgba(28,26,23,0.55) 100%);
}
.hero__grid { position: relative; z-index: 1; }
.hero__grid {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.hero__copy { flex: 1 1 360px; min-width: 0; }
.hero__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.05;
  font-weight: 600;
  margin-top: 14px;
  text-wrap: balance;
  color: var(--paper);
}
.hero__lead {
  font-size: 17px;
  color: #d6cdc1;
  margin-top: 18px;
  max-width: 520px;
}
.hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.hero__note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #c9bfae;
  margin-top: 20px;
  letter-spacing: 0.04em;
}
.hero__kicker { color: #f0c9a4; }

.hero__visual {
  flex: 1 1 300px;
  min-width: 0;
  position: relative;
  height: 320px;
}
.hero__card {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero__card--main {
  width: 240px;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.hero__card--float {
  width: 200px;
  bottom: 8px;
  right: 4px;
  transform: rotate(2deg);
}
.hero__card-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}
.hero__card-price {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hero__card-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.hero__card-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.hero__card--float .hero__card-tag { color: var(--accent-text); }
.hero__card--float .hero__card-title { color: var(--ink); }
.hero__card--float .hero__card-sub { color: var(--charcoal); opacity: 1; }

/* ── Sections ────────────────────────────────────────────── */
.section { padding: 72px 0; }
.section--alt { background: var(--cream); }

/* Paket memakai foto latar subscription dengan lapisan krem agar
   teks heading dan kartu tetap terbaca (kontras AA). Gambar
   di-cover; kartu di atasnya memakai permukaan putih sendiri. */
#paket {
  position: relative;
  background-color: var(--cream);
  overflow: hidden;
}
#paket::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('assets/subs-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.5;
}
#paket::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(241,233,220,0.82) 0%, rgba(241,233,220,0.70) 100%);
}
#paket > .container { position: relative; z-index: 1; }

.section__head { max-width: 640px; margin-bottom: 36px; }
.section__head h2 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}
.section__head p { color: var(--charcoal); margin-top: 12px; font-size: 16px; }
.section__footnote {
  font-family: var(--font-mono);
  color: var(--charcoal);
  font-size: 12px;
  margin-top: 20px;
  letter-spacing: 0.04em;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  min-height: 48px;
  padding: 0 24px;
  justify-content: center;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost-light { background: transparent; color: var(--paper); border: 1px solid #c9bfae; }
.btn--ghost-light:hover { border-color: var(--paper); color: var(--paper); }
.btn--white { background: #fff; color: var(--ink); }

/* ── Bundles (3 tier paket) ──────────────────────────────── */
/* Layout melintang: satu baris selebar container (1120px) agar
   lebarnya sama dengan section lain. Ketiga kartu bagi ruang sama
   rata. Di layar sempit, baris bisa digeser horizontal (scroll
   terselubung) tanpa membelah teks jadi terlalu sempit. */
.bundles {
  display: flex;
  gap: 24px;
  align-items: stretch;
}
.bundle-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bundle-card--featured {
  border: 2px solid var(--accent);
  box-shadow: 0 10px 30px rgba(28, 26, 23, 0.08);
}
.bundle-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.bundle-card__price {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.bundle-card__shop { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.bundle-card__meta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 18px;
}
.bundle-card__meta li {
  font-size: 14px;
  color: var(--charcoal);
  padding-left: 22px;
  position: relative;
}
.bundle-card__meta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--accent);
}
.bundle-card .btn--primary { margin-top: auto; align-self: flex-start; }

@media (max-width: 720px) {
  /* Baris tetap melintang di layar kecil: digeser, bukan mengecil. */
  .bundles {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .bundle-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}


/* ── Dua cara ────────────────────────────────────────────── */
.dua-cara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.cara {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
}
.cara--accent { border-color: var(--accent); }
.cara h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.cara p { color: var(--charcoal); font-size: 15px; }
.cara ul { list-style: none; margin-top: 16px; }
.cara li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--ink);
}
.cara li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--accent);
}
/* Daftar bernomor (tata cara): penomoran mono di sebelah kiri. */
.cara__steps {
  list-style: none;
  counter-reset: step;
  margin-top: 16px;
}
.cara__steps li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--ink);
  counter-increment: step;
}
.cara__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--cream);
  border-radius: 3px;
}
.cara__note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--charcoal);
  font-style: italic;
}

#coffee-shop .container { position: relative; z-index: 1; }

/* ── Shop list ───────────────────────────────────────────── */
.shop-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.shop {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.shop__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--cream);
  overflow: hidden;
}
.shop__photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 320ms ease, transform 320ms ease;
}

/* Overlay logo yang muncul saat hover/fokus kartu.
   Foto di-blur dan di-gelapkan, lalu logo (atau placeholder nama)
   fade-in di tengah. Tanpa JS; murni CSS :hover / :focus-within. */
.shop__body { padding: 22px; }
.shop h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.shop p { color: var(--charcoal); font-size: 14px; margin-top: 4px; }
.shop__pending {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--charcoal);
  letter-spacing: 0.04em;
  margin-top: 6px;
}
.shop__hours {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-text);
  letter-spacing: 0.04em;
  margin-top: 10px;
}

/* ── Duo: FAQ (kiri) + Kontributor (kanan) ─────────────────── */
/* Dua konten pendek digabung jadi satu layar penuh, split dua.
   Masuk grup snap full-viewport di atas; di layar sempit bertumpuk
   (FAQ atas, Kontributor bawah). Kedua kolom di tengah vertikal. */
.duo {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.duo__col {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.duo__col--collab {
  background: var(--cream);
  align-items: center;
}
/* Kontainer di dalam kolom: batasi lebar dan ratakan kiri agar
   teks tidak tegas ke pinggir layar lebar. */
.duo__col .container { width: 100%; max-width: 520px; }

@media (max-width: 768px) {
  .duo { flex-direction: column; }
  .duo__col { padding: 40px 24px; }
  .duo__col .container { max-width: 640px; }
}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}
.faq__item summary {
  cursor: pointer;
  padding: 18px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--accent-text);
  font-weight: 500;
  flex-shrink: 0;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item p { padding: 0 20px 18px; color: var(--charcoal); font-size: 15px; }

/* ── CTA banner ──────────────────────────────────────────── */
.cta-banner {
  background: var(--ink);
  border-radius: 6px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cta-banner__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--paper);
}
.cta-banner__desc { color: #c9bfae; margin-top: 8px; font-size: 15px; max-width: 460px; }
.cta-banner__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 24px 32px;
  background: var(--paper);
}
.site-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.site-footer__brand { display: flex; align-items: center; gap: 10px; }
.site-footer__logo {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.site-footer__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }

.site-footer__cols {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}
.site-footer__col-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.site-footer__links { list-style: none; }
.site-footer__links li { margin-bottom: 8px; }
.site-footer__links a {
  font-size: 14px;
  color: var(--charcoal);
  text-decoration: none;
}
.site-footer__links a:hover { color: var(--accent); }
.site-footer__links li:not(:has(a)) {
  font-size: 14px;
  color: var(--charcoal);
}

.site-footer__copy {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--charcoal);
  letter-spacing: 0.04em;
  max-width: 1120px;
  margin: 32px auto 0;
}

/* ── Focus visibility ────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Scroll reveal ───────────────────────────────────────── */
/* Elemen berlabel [data-reveal] muncul saat masuk viewport:
   fade + naik 24px, durasi 550ms, stagger ringan antar anak.
   Dipasang lewat JS (IntersectionObserver). Jika JS mati,
   elemen tetap tampil karena kelas .is-hidden tidak ditambahkan. */
/* Elemen [data-reveal] disembunyikan oleh JS (kelas .is-hidden).
   Saat .is-visible ditambahkan, transisi opacity + transform + delay
   berjalan: elemen naik 24px dan memudar masuk. Stagger lewat
   variabel --reveal-delay yang diset per elemen. */
[data-reveal].is-hidden {
  opacity: 0;
  transform: translateY(24px);
}
[data-reveal].is-hidden.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 550ms ease,
    transform 550ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal].is-hidden {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-reveal].is-hidden.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Collaborator logos ───────────────────────────────────── */
/* .collab masuk dalam grup snap full-viewport di atas, tapi punya
   dua anak (judul + track logo) sehingga disusun vertikal.
   align-items: stretch (bukan 'center' dari aturan snap umum) agar
   track marquee tidak melebar mengikuti isinya dan memicu overflow
   horizontal di layar sempit. */
.collab {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding-bottom: 64px;
}
.collab__viewport { max-width: 100%; }
.collab__head { max-width: 640px; margin-bottom: 32px; }
.collab__head h2 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}
.collab__head p { color: var(--charcoal); margin-top: 12px; font-size: 16px; }

.collab__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.collab__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 8px 24px;
}
.collab__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.collab__item img {
  height: 72px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  opacity: 0.78;
  filter: saturate(0.96);
  transition: opacity 220ms ease;
}
.collab__item img:hover { opacity: 1; }

/* Saat logo melebihi satu baris, JS menambah .is-running dan
   menggandakan isi untuk loop mulus. Track berjalan 50% (satu set). */
.collab__logos.is-running {
  justify-content: flex-start;
  width: max-content;
  animation: collab-scroll 32s linear infinite;
}
.collab__logos.is-running:hover,
.collab__logos.is-running:focus-within { animation-play-state: paused; }

@keyframes collab-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .collab__logos.is-running { animation: none; justify-content: center; flex-wrap: wrap; }
}

/* Peta + Tanya Jawab: satu section full-viewport, split dua.
   Peta (kiri) memenuhi box; FAQ (kanan) di tengah secara vertikal.
   Masuk grup snap full-viewport (.section). */
.split-duo {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.split-duo__media {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  background: var(--cream);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-duo__media .coffee-map { border-radius: 0; position: absolute; inset: 0; }
.split-duo__faq {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--paper);
  padding: 48px 40px;
}
.split-duo__faq .section__head { margin-bottom: 28px; }

@media (max-width: 768px) {
  .split-duo { flex-direction: column; }
  .split-duo__media { flex: 0 0 42vh; min-height: 0; }
  .split-duo__faq { flex: 1 1 auto; padding: 40px 24px; }
}

/* ── Peta coffee shop ─────────────────────────────────────── */
/* Sub-elemen suasana (foto, overlay, kicker, quote) dipakai ulang
   oleh .mood-strip--short di atas. */
.split__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}
.split__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28,26,23,0.20) 0%, rgba(28,26,23,0.62) 100%);
}
.split__media-inner {
  position: relative;
  z-index: 1;
  padding: 48px;
  max-width: 560px;
}
.split__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: #f0c9a4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.split__quote {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}

/* Section peta: peta memenuhi seluruh box panel (crop diperbolehkan).
   Rasio 2048/878 tidak dijaga; SVG pin pakai preserveAspectRatio
   slice agar tetap selaras dengan foto yang di-cover. Animasi pin
   (appear + pulse) hanya berjalan saat motion diizinkan. */
.map-section { background: var(--cream); }
.coffee-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.coffee-map > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coffee-map__pins {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.coffee-map__pins { /* scoping agar animasi tidak bocor ke SVG lain */ }
.pin {
  transform-origin: 0 0;
  animation: map-appear 5s ease-in-out infinite;
  animation-delay: var(--delay);
  filter: drop-shadow(0 5px 4px rgba(0,0,0,0.27));
}
.pulse {
  fill: none;
  stroke: #ef4436;
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
  animation: map-pulse 5s ease-out infinite;
  animation-delay: calc(var(--delay) + 0.7s);
  opacity: 0;
}
@keyframes map-appear {
  0%, 8%, 28%, 100% { transform: translateY(0) scale(1); }
  14% { transform: translateY(-13px) scale(1.08); }
  20% { transform: translateY(0) scale(0.95); }
  24% { transform: translateY(-4px) scale(1.02); }
}
@keyframes map-pulse {
  0%, 10% { opacity: 0; transform: scale(0.8); }
  15% { opacity: 0.7; transform: scale(1); }
  45%, 100% { opacity: 0; transform: scale(2.8); }
}
@media (prefers-reduced-motion: reduce) {
  .pin { animation: none; }
  .pulse { display: none; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding: 40px 0 48px; }
  .hero h1 { font-size: 38px; }
  .hero__lead { font-size: 16px; }
  /* Kartu hero hanya untuk desktop; di mobile disembunyikan agar
     teks hero memenuhi layar tanpa kartu melayang menutupi. */
  .hero__visual { display: none; }
  .hero__copy { flex-basis: 100%; }
  .section { padding: 48px 0; }
  .section__head h2 { font-size: 30px; }
  .cta-banner { padding: 32px 24px; }
  .shop__photo { aspect-ratio: 16 / 10; }
}