/* ==========================================================================
   SITUS YUSUF INDRA SAPUTRA — Gaya utama
   Palet: hangat & membumi (krem, tanah liat, oker)
   ========================================================================== */

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Variabel warna ---------- */
:root {
  --dasar:        #f7f4ee;
  --dasar-2:      #f1ece1;
  --permukaan:    #fffdf9;
  --permukaan-2:  #f6f1e7;
  --garis:        #e7ded0;
  --garis-kuat:   #d8ccb9;

  --teks:         #3c362e;
  --teks-lembut:  #6b6155;
  --teks-samar:   #8b8175;

  --brand:        #a8846a;
  --brand-ink:    #7d5f48;
  --brand-lembut: #ede2d6;

  --aksen:        #c99a4e;
  --aksen-ink:    #8a6620;
  --aksen-lembut: #f5e9d2;

  --sage:         #7d9d7a;
  --sage-ink:     #4f6b4d;
  --sage-lembut:  #e6ece2;

  --bahaya:       #c47a6d;
  --bahaya-ink:   #96493d;

  --gelap:        #241f1a;
  --gelap-2:      #2f2822;

  --bayang-1: 0 1px 2px rgba(74, 64, 56, .05), 0 2px 8px rgba(74, 64, 56, .05);
  --bayang-2: 0 2px 6px rgba(74, 64, 56, .06), 0 12px 28px rgba(74, 64, 56, .09);
  --bayang-3: 0 6px 18px rgba(74, 64, 56, .08), 0 26px 56px rgba(74, 64, 56, .13);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --lebar: 1160px;
  --font-judul: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-teks: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --nav-h: 72px;
}

[data-tema="gelap"] {
  --dasar:        #1c1815;
  --dasar-2:      #241f1a;
  --permukaan:    #262119;
  --permukaan-2:  #2f2822;
  --garis:        #403830;
  --garis-kuat:   #574c41;

  --teks:         #f2ece2;
  --teks-lembut:  #bfb2a3;
  --teks-samar:   #9a8d7e;

  --brand:        #c9a184;
  --brand-ink:    #dcb99b;
  --brand-lembut: #3a2f26;

  --aksen:        #ddb26a;
  --aksen-ink:    #e8c98a;
  --aksen-lembut: #3c3122;

  --sage:         #9dbb98;
  --sage-ink:     #b3cdae;
  --sage-lembut:  #2a3529;

  --bahaya:       #d99a8e;
  --bahaya-ink:   #e5b0a5;

  --gelap:        #14110e;
  --gelap-2:      #1c1815;

  --bayang-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
  --bayang-2: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 28px rgba(0, 0, 0, .35);
  --bayang-3: 0 6px 18px rgba(0, 0, 0, .4), 0 26px 56px rgba(0, 0, 0, .45);
}

/* ---------- 2. Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-teks);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--teks);
  background: var(--dasar);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Latar bertiga gradasi radial supaya tidak terasa rata */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 8% -4%,  rgba(168, 132, 106, .13), transparent 62%),
    radial-gradient(760px 480px at 96% 8%,  rgba(201, 154, 78, .11), transparent 60%),
    radial-gradient(820px 560px at 50% 104%, rgba(125, 157, 122, .09), transparent 62%);
}
[data-tema="gelap"] body::before {
  background:
    radial-gradient(900px 520px at 8% -4%,  rgba(168, 132, 106, .16), transparent 62%),
    radial-gradient(760px 480px at 96% 8%,  rgba(201, 154, 78, .12), transparent 60%),
    radial-gradient(820px 560px at 50% 104%, rgba(125, 157, 122, .08), transparent 62%);
}

img { max-width: 100%; height: auto; display: block; }

/* Atribut hidden harus selalu menang atas aturan display milik kelas sendiri.
   Tanpa baris ini, elemen yang "disembunyikan" lewat hidden tetap terlihat. */
[hidden] { display: none !important; }

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--aksen-ink); }

h1, h2, h3, h4 {
  font-family: var(--font-judul);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.015em;
  color: var(--teks);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.1vw, 3.85rem); }
h2 { font-size: clamp(1.72rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.14rem, 1.9vw, 1.4rem); line-height: 1.3; }
h4 { font-size: 1.06rem; line-height: 1.35; }
p  { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--aksen-lembut); color: var(--teks); }

:focus-visible {
  outline: 3px solid var(--aksen);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Utilitas tata letak ---------- */
.wrap { width: min(var(--lebar), 100% - 40px); margin-inline: auto; }
.wrap--sempit { width: min(780px, 100% - 40px); margin-inline: auto; }

.sec { padding: clamp(60px, 8.5vw, 116px) 0; position: relative; }
.sec--rapat { padding: clamp(44px, 5.5vw, 72px) 0; }
.sec--permukaan { background: var(--permukaan); border-block: 1px solid var(--garis); }
.sec--lembut { background: var(--permukaan-2); border-block: 1px solid var(--garis); }

.kepala { max-width: 720px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.kepala--tengah { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--font-teks);
  font-size: .735rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aksen-ink);
  margin: 0 0 1em;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--aksen));
  border-radius: 2px;
}
.kepala--tengah .eyebrow::before { display: none; }

.lead { font-size: clamp(1.03rem, 1.5vw, 1.16rem); color: var(--teks-lembut); line-height: 1.75; }
.tengah { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 1.25rem; }
.mt-3 { margin-top: 2rem; }

.pita {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--aksen) 45%, var(--sage) 100%);
}

/* ---------- 4. Tombol ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .82em 1.5em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-teks);
  font-size: .96rem;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease, background-color .2s ease,
              color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--utama {
  background: linear-gradient(135deg, #7d5f48 0%, #a8846a 52%, #c99a4e 100%);
  color: #fffdf9;
  box-shadow: var(--bayang-2);
}
.btn--utama:hover { color: #fffdf9; box-shadow: var(--bayang-3); }

.btn--wa {
  background: linear-gradient(135deg, #4f6b4d 0%, #6d8f68 100%);
  color: #fffdf9;
  box-shadow: var(--bayang-2);
}
.btn--wa:hover { color: #fffdf9; box-shadow: var(--bayang-3); }

.btn--garis {
  background: var(--permukaan);
  border-color: var(--garis-kuat);
  color: var(--teks);
}
.btn--garis:hover { border-color: var(--brand); color: var(--brand-ink); }

.btn--terang {
  background: rgba(255, 253, 249, .1);
  border-color: rgba(255, 253, 249, .42);
  color: #f7f4ee;
  backdrop-filter: blur(6px);
}
.btn--terang:hover { background: rgba(255, 253, 249, .2); color: #fffdf9; }

.btn--penuh { width: 100%; }
.btn--besar { padding: 1em 1.9em; font-size: 1.02rem; }
.btn--kecil { padding: .6em 1.1em; font-size: .875rem; }

.btn[hidden] { display: none !important; }

.tombol-baris { display: flex; flex-wrap: wrap; gap: .75rem; }
.tombol-baris--tengah { justify-content: center; }

/* ---------- 5. Bilah atas ---------- */
.progres {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand), var(--aksen), var(--sage));
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--dasar) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.nav.melengket {
  border-bottom-color: var(--garis);
  box-shadow: 0 6px 24px rgba(74, 64, 56, .07);
}
[data-tema="gelap"] .nav.melengket { box-shadow: 0 6px 24px rgba(0, 0, 0, .4); }

.nav__dalam {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-height: var(--nav-h);
}

.nav__merek {
  display: flex;
  align-items: center;
  gap: .68rem;
  text-decoration: none;
  color: var(--teks);
  margin-right: auto;
  flex-shrink: 0;
}
.nav__merek:hover { color: var(--teks); }
.nav__logo {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex-shrink: 0;
  box-shadow: var(--bayang-1);
}
.nav__teks { display: flex; flex-direction: column; line-height: 1.14; }
.nav__nama {
  font-family: var(--font-judul);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}
.nav__sub {
  font-size: .665rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teks-samar);
  font-weight: 600;
}

.nav__menu { display: flex; align-items: center; gap: .15rem; }
.nav__tautan {
  position: relative;
  padding: .5em .78em;
  border-radius: 8px;
  font-size: .925rem;
  font-weight: 550;
  color: var(--teks-lembut);
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}
.nav__tautan:hover { color: var(--teks); background: var(--permukaan-2); }
.nav__tautan[aria-current="page"] { color: var(--brand-ink); font-weight: 700; }
.nav__tautan[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: .78em;
  right: .78em;
  bottom: .22em;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--aksen));
}

.nav__aksi { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.ikon-tombol {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--garis-kuat);
  background: var(--permukaan);
  color: var(--teks-lembut);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
  padding: 0;
}
.ikon-tombol:hover { color: var(--brand-ink); border-color: var(--brand); }
.ikon-tombol svg { width: 19px; height: 19px; }

#tombolMenu { display: none; }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #1a1613;
  color: #f7f4ee;
}
.hero__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 22%;
}
.hero__selubung {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(26, 22, 19, .965) 0%,
      rgba(28, 23, 19, .93) 26%,
      rgba(30, 25, 20, .74) 48%,
      rgba(30, 25, 20, .32) 68%,
      rgba(30, 25, 20, .12) 100%),
    linear-gradient(180deg, rgba(26, 22, 19, .55) 0%, transparent 26%, rgba(26, 22, 19, .5) 100%);
}
.hero__dalam {
  position: relative;
  padding: clamp(72px, 11vw, 128px) 0 clamp(60px, 8vw, 96px);
  min-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__isi { max-width: 640px; }

.hero .eyebrow { color: #ddb26a; }
.hero h1 {
  color: #fffdf9;
  font-size: clamp(2.3rem, 5.6vw, 4.2rem);
  margin-bottom: .38em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero h1 .sorot {
  background: linear-gradient(96deg, #ddb26a 0%, #f0d59b 48%, #c9a184 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__tagline {
  font-size: clamp(1.04rem, 1.65vw, 1.24rem);
  line-height: 1.68;
  color: rgba(247, 244, 238, .9);
  max-width: 32em;
  margin-bottom: 1.9em;
}
.hero .tombol-baris { margin-bottom: 2.4em; }

.hero__bukti {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem 1.6rem;
  padding-top: 1.7rem;
  border-top: 1px solid rgba(247, 244, 238, .19);
  max-width: 640px;
}
.hero__angka {
  font-family: var(--font-judul);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 700;
  color: #ddb26a;
  line-height: 1.1;
  display: block;
}
.hero__label {
  font-size: .8rem;
  line-height: 1.5;
  color: rgba(247, 244, 238, .74);
  display: block;
  margin-top: .28em;
}

/* ---------- 7. Kartu & kisi ---------- */
.kisi { display: grid; gap: clamp(16px, 2vw, 24px); }
.kisi--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.kisi--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.kisi--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.kartu {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 30px);
  box-shadow: var(--bayang-1);
  transition: transform .2s ease, box-shadow .24s ease, border-color .24s ease;
}
.kartu--angkat:hover {
  transform: translateY(-4px);
  box-shadow: var(--bayang-3);
  border-color: var(--garis-kuat);
}
.kartu h3 { margin-bottom: .45em; }
.kartu p { color: var(--teks-lembut); font-size: .975rem; }

.kartu__ikon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  margin-bottom: 1rem;
  background: linear-gradient(140deg, var(--brand-lembut), var(--aksen-lembut));
  color: var(--brand-ink);
  border: 1px solid var(--garis);
}
.kartu__ikon svg { width: 23px; height: 23px; }

.kartu__nomor {
  font-family: var(--font-judul);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--aksen);
  display: block;
  margin-bottom: .5rem;
}

/* Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .34em .78em;
  border-radius: 999px;
  font-size: .775rem;
  font-weight: 650;
  letter-spacing: .01em;
  background: var(--brand-lembut);
  color: var(--brand-ink);
  border: 1px solid var(--garis);
}
.chip--aksen { background: var(--aksen-lembut); color: var(--aksen-ink); }
.chip--sage  { background: var(--sage-lembut);  color: var(--sage-ink); }
.chip-baris { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Daftar centang */
.daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.daftar li {
  position: relative;
  padding-left: 1.85em;
  color: var(--teks-lembut);
  font-size: .975rem;
  line-height: 1.62;
}
.daftar li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: 1.02em;
  height: 1.02em;
  border-radius: 50%;
  background: var(--sage-lembut);
  border: 1px solid var(--sage);
}
.daftar li::after {
  content: '';
  position: absolute;
  left: .31em;
  top: .74em;
  width: .3em;
  height: .55em;
  border: solid var(--sage-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.daftar--silang li::before { background: #f6e4e0; border-color: var(--bahaya); }
[data-tema="gelap"] .daftar--silang li::before { background: #3a2723; }
/* Tanda silang digambar dari dua garis tipis yang bertumbukan */
.daftar--silang li::after {
  left: .3em;
  top: .73em;
  width: .43em;
  height: .43em;
  border: 0;
  transform: none;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--bahaya-ink) calc(50% - 1px),
                    var(--bahaya-ink) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), var(--bahaya-ink) calc(50% - 1px),
                    var(--bahaya-ink) calc(50% + 1px), transparent calc(50% + 1px));
}
.daftar--kuat li { color: var(--teks); }

/* ---------- 8. Sorotan produk ---------- */
.sorot-produk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}
.sorot-produk__gambar { position: relative; }
.sorot-produk__gambar img {
  border-radius: var(--r-lg);
  box-shadow: var(--bayang-2);
  border: 1px solid var(--garis);
  width: 100%;
}
.sorot-produk__lencana {
  position: absolute;
  right: -10px;
  bottom: -14px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
  padding: .7rem 1.05rem;
  box-shadow: var(--bayang-2);
  text-align: center;
}
.sorot-produk__lencana strong {
  display: block;
  font-family: var(--font-judul);
  font-size: 1.32rem;
  color: var(--brand-ink);
  line-height: 1.1;
}
.sorot-produk__lencana span { font-size: .72rem; color: var(--teks-samar); }

/* ---------- 9. Kotak harga ---------- */
.kotak-harga {
  background: var(--permukaan);
  border: 1px solid var(--garis-kuat);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: var(--bayang-3);
  position: relative;
  overflow: hidden;
}
.kotak-harga::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--aksen), var(--sage));
}
.kotak-harga__harga {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  flex-wrap: wrap;
  margin: .35rem 0 .3rem;
}
.kotak-harga__angka {
  font-family: var(--font-judul);
  font-size: clamp(2.3rem, 5vw, 3.1rem);
  font-weight: 700;
  color: var(--teks);
  line-height: 1;
}
.kotak-harga__satuan { font-size: .95rem; color: var(--teks-samar); }
.kotak-harga__catatan {
  font-size: .85rem;
  color: var(--teks-lembut);
  background: var(--aksen-lembut);
  border-left: 3px solid var(--aksen);
  padding: .62rem .85rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: 1.35rem;
}
.kotak-harga__catatan:empty { display: none; }

.isian {
  display: grid;
  gap: .62rem;
  margin: 1.35rem 0;
  padding: 1.15rem 0;
  border-block: 1px dashed var(--garis-kuat);
}
.isian__baris {
  display: flex;
  align-items: flex-start;
  gap: .68rem;
  font-size: .945rem;
  color: var(--teks-lembut);
}
.isian__baris svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: .27em;
  color: var(--sage-ink);
}
.isian__baris strong { color: var(--teks); font-weight: 650; }

/* ---------- 10. Akordeon ---------- */
.akordeon { border-top: 1px solid var(--garis); }
.akordeon__item { border-bottom: 1px solid var(--garis); }
.akordeon__tombol {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem .2rem;
  background: none;
  border: 0;
  font-family: var(--font-teks);
  font-size: 1.015rem;
  font-weight: 650;
  color: var(--teks);
  text-align: left;
  cursor: pointer;
  line-height: 1.5;
}
.akordeon__tombol:hover { color: var(--brand-ink); }
.akordeon__ikon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--garis-kuat);
  display: grid;
  place-items: center;
  position: relative;
  transition: background-color .2s ease, border-color .2s ease, transform .25s ease;
  margin-top: .12em;
}
.akordeon__ikon::before,
.akordeon__ikon::after {
  content: '';
  position: absolute;
  background: var(--brand-ink);
  border-radius: 2px;
  transition: opacity .2s ease, transform .25s ease;
}
.akordeon__ikon::before { width: 11px; height: 1.8px; }
.akordeon__ikon::after  { width: 1.8px; height: 11px; }
.akordeon__item.terbuka .akordeon__ikon {
  background: var(--brand); border-color: var(--brand); transform: rotate(90deg);
}
.akordeon__item.terbuka .akordeon__ikon::before,
.akordeon__item.terbuka .akordeon__ikon::after { background: #fffdf9; }
.akordeon__item.terbuka .akordeon__ikon::after { opacity: 0; }

.akordeon__isi {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.akordeon__item.terbuka .akordeon__isi { grid-template-rows: 1fr; }
.akordeon__isi > div { overflow: hidden; }
.akordeon__isi p {
  color: var(--teks-lembut);
  font-size: .97rem;
  padding: 0 .2rem 1.3rem;
  margin: 0;
  max-width: 62ch;
}

/* ---------- 11. Tab kurikulum ---------- */
.tab-baris {
  display: flex;
  gap: .42rem;
  overflow-x: auto;
  padding-bottom: .7rem;
  margin-bottom: 1.6rem;
  scrollbar-width: thin;
}
.tab-baris::-webkit-scrollbar { height: 6px; }
.tab-baris::-webkit-scrollbar-thumb { background: var(--garis-kuat); border-radius: 3px; }

.tab {
  flex-shrink: 0;
  padding: .52em 1.02em;
  border-radius: 999px;
  border: 1px solid var(--garis-kuat);
  background: var(--permukaan);
  color: var(--teks-lembut);
  font-family: var(--font-teks);
  font-size: .875rem;
  font-weight: 620;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s ease;
}
.tab:hover { border-color: var(--brand); color: var(--brand-ink); }
.tab[aria-selected="true"] {
  background: linear-gradient(135deg, #7d5f48, #a8846a);
  border-color: transparent;
  color: #fffdf9;
}

.panel { display: none; }
.panel.aktif { display: block; animation: masuk .3s ease; }

@keyframes masuk {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fase-detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.6vw, 32px);
  align-items: start;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.6vw, 32px);
  box-shadow: var(--bayang-1);
}
.fase-detail__angka {
  font-family: var(--font-judul);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 700;
  line-height: .9;
  background: linear-gradient(140deg, var(--brand), var(--aksen));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fase-detail__nama {
  font-family: var(--font-judul);
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  font-weight: 700;
  margin: 0 0 .3em;
}
.fase-detail__sub {
  font-size: .83rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aksen-ink);
  font-weight: 650;
  margin: 0 0 .85em;
}
.fase-detail p { color: var(--teks-lembut); font-size: .97rem; }

.catatan-kecil {
  font-size: .8rem;
  color: var(--teks-samar);
  line-height: 1.62;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--garis);
}
.catatan-kecil strong { color: var(--teks-lembut); }

/* Catatan yang isinya justru penting — misalnya penjelasan kenapa persentase
   pertumbuhan TikTok tidak dipakai sebagai klaim. Ukuran catatan kecil biasa
   (0.8rem) terlalu kecil untuk kalimat sepenting itu, jadi dinaikkan sedikit. */
.catatan-kecil--baca { font-size: .885rem; color: var(--teks-lembut); }

/* ---------- 13. Bukti / galeri ---------- */
.galeri-bukti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.bukti-kartu {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--bayang-1);
  transition: transform .2s ease, box-shadow .24s ease;
  /* <figure> punya margin bawaan peramban 40px kiri-kanan. Kalau tidak dinolkan,
     kartu di dalam kisi jauh lebih sempit daripada kolomnya — di layar ponsel
     hanya tersisa ~93px dan keterangan fotonya terpotong jadi satu-dua kata. */
  margin: 0;
}
.bukti-kartu:hover { transform: translateY(-3px); box-shadow: var(--bayang-2); }
.bukti-kartu img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: top center;
  background: var(--permukaan-2);
}
.bukti-kartu--tinggi img { height: 260px; }
.bukti-kartu figcaption {
  padding: .8rem .95rem;
  font-size: .855rem;
  color: var(--teks-lembut);
  line-height: 1.55;
  border-top: 1px solid var(--garis);
}
.bukti-kartu figcaption strong { display: block; color: var(--teks); font-size: .9rem; margin-bottom: .12em; }

/* Tangkapan layar analitik toko — gambar bukti yang HARUS terlihat utuh.
   .bukti-kartu biasa memakai tinggi tetap 190px + object-fit: cover, yang
   justru memotong angka di dalam tangkapan layar. Untuk bukti, memotong
   gambar sama saja dengan menyembunyikan sebagian bukti — jadi tingginya
   dibiarkan otomatis dan gambarnya ditampilkan penuh (contain). Kisi dibuat
   satu kolom supaya tulisan kecil di dalam gambar masih bisa dibaca. */
.galeri-analitik {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.8vw, 22px);
  max-width: 880px;
}
.bukti-kartu--layar img {
  height: auto;
  object-fit: contain;
  display: block;
}
.bukti-kartu__tautan { display: block; line-height: 0; }
.bukti-kartu__tautan:focus-visible { outline: 3px solid var(--aksen); outline-offset: -3px; }
.bukti-kartu__petunjuk {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  margin-top: .5rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--brand-ink);
}
.bukti-kartu__petunjuk svg { width: .85rem; height: .85rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Data rating toko — teks, bukan tangkapan layar. Angka rating & jumlah terjual
   ditulis apa adanya supaya bisa diperiksa sendiri oleh pembaca. */
.kisi-toko {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  max-width: 820px;   /* dua kartu saja tidak perlu selebar halaman */
}
.toko-kartu {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
  padding: 1.15rem 1.25rem 1.3rem;
  box-shadow: var(--bayang-1);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.toko-kartu__kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .55rem;
}
.toko-kartu__platform {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--teks-samar);
}
.toko-kartu__status {
  font-size: .7rem;
  font-weight: 600;
  padding: .18rem .52rem;
  border-radius: 999px;
  background: var(--brand-lembut);
  color: var(--brand-ink);
  border: 1px solid var(--garis);
  white-space: nowrap;
}
.toko-kartu__nama {
  font-family: var(--font-judul);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--teks);
  line-height: 1.3;
  margin: 0;
}
/* Rating dan jumlah terjual dirapatkan dalam satu baris supaya kartunya tidak
   menyisakan ruang kosong lebar di sebelah kanan. */
.toko-kartu__baris {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem .9rem;
  flex-wrap: wrap;
  margin-top: .2rem;
}
.toko-kartu__rating {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-judul);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--aksen);
  line-height: 1.1;
  margin: 0;
}
.toko-kartu__rating svg { width: 1.1rem; height: 1.1rem; fill: currentColor; flex: none; }
/* Angka omzet. Perlakuan visualnya sama dengan rating supaya sama-sama terbaca
   sebagai angka kunci, tapi kelasnya sengaja dipisah supaya uji otomatis bisa
   membedakan "rating toko" dari "nilai penjualan" — dua hal yang berbeda. */
.toko-kartu__nilai {
  font-family: var(--font-judul);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--aksen);
  line-height: 1.15;
  margin: .15rem 0 0;
}
.toko-kartu__periode {
  font-size: .78rem;
  color: var(--teks-samar);
  line-height: 1.5;
  margin: 0;
}
.toko-kartu__jual {
  font-size: .855rem;
  color: var(--teks-lembut);
  line-height: 1.5;
  margin: 0;
}
/* Dipakai kalau blok ini diletakkan di dalam .sec--permukaan — kalau tidak,
   warna kartu sama dengan warna latarnya dan kartunya jadi tidak terlihat. */
.toko-kartu--kontras { background: var(--permukaan-2); }

/* ---------- 14. Ulasan ---------- */
.ulasan-kartu {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--bayang-1);
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.ulasan-bintang { color: var(--aksen); letter-spacing: .12em; font-size: 1rem; }
.ulasan-kartu blockquote {
  margin: 0;
  font-size: .99rem;
  color: var(--teks-lembut);
  line-height: 1.68;
}
.ulasan-kartu footer {
  font-size: .855rem;
  color: var(--teks-samar);
  font-weight: 620;
  margin-top: auto;
}

/* ---------- 15. Ajakan akhir ---------- */
.ajakan {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, #241f1a 0%, #3a2f26 52%, #4a3a2c 100%);
  color: #f7f4ee;
  border-radius: var(--r-xl);
  padding: clamp(32px, 5.5vw, 68px);
  box-shadow: var(--bayang-3);
}
.ajakan::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(520px 300px at 88% 8%, rgba(201, 154, 78, .26), transparent 68%),
    radial-gradient(460px 300px at 4% 96%, rgba(168, 132, 106, .22), transparent 68%);
}
.ajakan h2 { color: #fffdf9; }
.ajakan p { color: rgba(247, 244, 238, .86); }
.ajakan__dalam {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}
.ajakan__kisi {
  display: grid;
  gap: .72rem;
  margin-top: 1.3rem;
}
.ajakan__kisi div {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  font-size: .95rem;
  color: rgba(247, 244, 238, .9);
}
.ajakan__kisi svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: .28em; color: #ddb26a; }

/* ---------- 16. Kaki halaman ---------- */
.kaki {
  background: var(--permukaan-2);
  border-top: 1px solid var(--garis);
  padding: clamp(44px, 5.5vw, 68px) 0 2rem;
  margin-top: clamp(50px, 7vw, 90px);
}
.kaki__kisi {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(24px, 3.4vw, 44px);
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--garis);
}
.kaki h4 {
  font-family: var(--font-teks);
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teks-samar);
  margin-bottom: 1em;
  font-weight: 700;
}
.kaki__tautan { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.kaki__tautan a {
  color: var(--teks-lembut);
  text-decoration: none;
  font-size: .93rem;
}
.kaki__tautan a:hover { color: var(--brand-ink); text-decoration: underline; }
.kaki__bawah {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  font-size: .845rem;
  color: var(--teks-samar);
}
.kaki__catatan {
  margin-top: 1.4rem;
  padding: .95rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--permukaan);
  border: 1px solid var(--garis);
  font-size: .82rem;
  color: var(--teks-samar);
  line-height: 1.65;
}
.kaki__catatan strong { color: var(--teks-lembut); }

/* ---------- 17. Bilah ajakan ponsel ---------- */
.bilah-ponsel {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  display: none;
  gap: .55rem;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--dasar) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--garis);
  box-shadow: 0 -6px 24px rgba(74, 64, 56, .1);
}
.bilah-ponsel .btn { flex: 1; padding: .72em 1em; font-size: .9rem; }

/* ---------- 18. Animasi masuk ---------- */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.tampil {
  opacity: 1;
  transform: none;
  transition: opacity .6s cubic-bezier(.22, .7, .3, 1), transform .6s cubic-bezier(.22, .7, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.tampil { opacity: 1; transform: none; transition: none; }
  .btn:hover, .kartu--angkat:hover, .bukti-kartu:hover { transform: none; }
  .panel.aktif { animation: none; }
}

/* ---------- 19. Lain-lain ---------- */
.lompat {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .8rem 1.2rem;
  background: var(--permukaan);
  border: 1px solid var(--brand);
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 650;
  color: var(--teks);
  text-decoration: none;
}
.lompat:focus { left: 0; }

.pesan {
  padding: .95rem 1.15rem;
  border-radius: var(--r-md);
  border: 1px solid var(--garis);
  background: var(--permukaan-2);
  font-size: .9rem;
  color: var(--teks-lembut);
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.pesan svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .25em; color: var(--aksen-ink); }
.pesan--jujur { border-left: 3px solid var(--aksen); }

/* Halaman dalam */
.kepala-halaman {
  padding: clamp(46px, 6.5vw, 84px) 0 clamp(30px, 4vw, 48px);
  border-bottom: 1px solid var(--garis);
  background: linear-gradient(180deg, var(--permukaan-2), var(--dasar));
}
.kepala-halaman h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: .35em; }
.kepala-halaman .lead { max-width: 62ch; }
.remah {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  font-size: .82rem;
  color: var(--teks-samar);
  margin-bottom: 1.1rem;
  list-style: none;
  padding: 0;
}
.remah a { color: var(--teks-samar); text-decoration: none; }
.remah a:hover { color: var(--brand-ink); text-decoration: underline; }
.remah li + li::before { content: '/'; margin-right: .45rem; color: var(--garis-kuat); }

.tabel-bungkus { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--garis); }
table.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  background: var(--permukaan);
  min-width: 480px;
}
table.tabel th, table.tabel td {
  padding: .78rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--garis);
  vertical-align: top;
}
table.tabel th {
  background: var(--permukaan-2);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teks-samar);
  font-weight: 700;
  white-space: nowrap;
}
table.tabel tr:last-child td { border-bottom: 0; }
table.tabel td:first-child { font-weight: 620; color: var(--teks); }
table.tabel td { color: var(--teks-lembut); }

.profil-kisi {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}
.profil-kisi img {
  border-radius: var(--r-lg);
  box-shadow: var(--bayang-2);
  border: 1px solid var(--garis);
  width: 100%;
}

/* Foto pribadi (potret 3:4) di halaman Tentang. Bingkai & bayangannya ikut
   .profil-kisi img; yang perlu diatur di sini hanya keterangannya. */
.foto-pribadi { margin: 0; }
.foto-pribadi figcaption {
  margin-top: .85rem;
  font-size: .8rem;
  color: var(--teks-samar);
  line-height: 1.55;
}

.sorot-kutip {
  border-left: 3px solid var(--brand);
  padding-left: 1.3rem;
  margin: 1.6rem 0;
  font-family: var(--font-judul);
  font-size: clamp(1.08rem, 1.9vw, 1.3rem);
  line-height: 1.55;
  color: var(--teks);
  font-style: italic;
}

/* ---------- 19b. Bagian angka ambang (Rp2 M / Rp4,8 M / Rp500 juta) ---------- */
.ambang-kisi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.ambang {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.8vw, 30px);
  box-shadow: var(--bayang-1);
  overflow: hidden;
}
.ambang::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--aksen));
}
.ambang__label {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--teks-samar);
}
.ambang__angka {
  font-family: var(--font-judul);
  font-size: clamp(1.85rem, 4.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}
.ambang__judul {
  margin: .15rem 0 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--teks);
}
.ambang p { margin: 0; font-size: .93rem; color: var(--teks-lembut); }
.ambang__dasar {
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px dashed var(--garis);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--teks-samar);
}

/* ---------- 19c. Kotak contoh hitungan ---------- */
.hitung {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--bayang-1);
}
.hitung h3 { margin-bottom: 1.1rem; font-size: clamp(1.05rem, 2.2vw, 1.22rem); }
.hitung__baris {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px dashed var(--garis);
  font-size: .95rem;
}
.hitung__baris > span:first-child { color: var(--teks-lembut); }
.hitung__baris > strong {
  color: var(--teks);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hitung__hasil {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem 1rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  padding: 1.05rem 1.2rem;
  background: var(--aksen-lembut);
  border-radius: var(--r-md);
}
.hitung__hasil > span { color: var(--aksen-ink); font-weight: 620; font-size: .95rem; }
.hitung__hasil > strong {
  font-family: var(--font-judul);
  font-size: clamp(1.45rem, 3.4vw, 1.95rem);
  font-weight: 800;
  color: var(--aksen-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 19d. Kartu sebab (kenapa mikro sulit naik kelas) ---------- */
.sebab { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.sebab__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.8vw, 30px);
  box-shadow: var(--bayang-1);
  transition: transform .28s ease, box-shadow .28s ease;
}
.sebab__item:hover { transform: translateY(-3px); box-shadow: var(--bayang-2); }
.sebab__nomor {
  font-family: var(--font-judul);
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  font-weight: 800;
  line-height: .9;
  color: var(--garis-kuat);
  min-width: 1.7em;
}
.sebab__item h3 { margin-bottom: .4em; font-size: clamp(1.04rem, 2vw, 1.18rem); }
.sebab__item p { margin: 0; font-size: .96rem; color: var(--teks-lembut); }

/* ---------- 19e. Artikel panjang ----------
   Penting: lebar baca dibatasi per ELEMEN TEKS, bukan pada wadahnya. Kalau
   batasnya ditaruh di .artikel, komponen lebar di dalamnya (kartu angka, kotak
   hitungan, tabel, kartu sebab) ikut terhimpit sampai tata letaknya rusak. */
.artikel { max-width: none; }
.artikel > p,
.artikel > h2,
.artikel > h3,
.artikel > ul,
.artikel > ol,
.artikel > .artikel__tarik,
.artikel > .sumber { max-width: 74ch; }

.artikel > .ambang-kisi,
.artikel > .hitung,
.artikel > .sebab,
.artikel > .tabel-bungkus {
  margin-top: 2rem;
  /* Lebih lebar dari teks supaya tiga kartu angka tetap sebaris, tetapi tidak
     selebar kontainer penuh — kotak selebar 1160px terasa terlalu kosong. */
  max-width: 900px;
}

.artikel > * + * { margin-top: 1.15em; }
.artikel > h2:first-child,
.artikel > h3:first-child,
.artikel > p:first-child { margin-top: 0; }
.artikel h2 {
  margin-top: 2.3em;
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.artikel h3 {
  margin-top: 1.85em;
  font-size: clamp(1.1rem, 2.2vw, 1.28rem);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.artikel p { color: var(--teks-lembut); line-height: 1.82; }
.artikel p > strong,
.artikel li > strong { color: var(--teks); font-weight: 650; }
.artikel ul, .artikel ol {
  display: grid;
  gap: .58rem;
  padding-left: 1.35rem;
  color: var(--teks-lembut);
  line-height: 1.78;
}
.artikel li::marker { color: var(--brand); font-weight: 650; }
.artikel a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.artikel a:hover { color: var(--aksen-ink); }

.artikel__tarik {
  margin: 2.1em 0;
  padding: 1.5rem 0 1.5rem 1.4rem;
  border-left: 3px solid var(--brand);
  font-family: var(--font-judul);
  font-size: clamp(1.14rem, 2.3vw, 1.42rem);
  line-height: 1.5;
  color: var(--teks);
}

/* ---------- 19f. Blok sumber & catatan kaki ---------- */
.sumber {
  margin-top: 2.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--garis);
  font-size: .845rem;
  line-height: 1.68;
  color: var(--teks-samar);
}
.sumber strong {
  display: block;
  margin-bottom: .5rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--teks-lembut);
}
.sumber ol { display: grid; gap: .38rem; margin: 0; padding-left: 1.15rem; }
.sumber a { color: var(--teks-lembut); text-decoration: underline; text-underline-offset: 2px; }
.sumber a:hover { color: var(--brand-ink); }

/* Daftar isi ringkas untuk artikel panjang */
.isi-ringkas {
  background: var(--permukaan-2);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.6vw, 28px);
}
.isi-ringkas h2 { margin: 0 0 .8rem; font-size: 1rem; letter-spacing: .02em; }
.isi-ringkas ol { display: grid; gap: .45rem; margin: 0; padding-left: 1.2rem; }
.isi-ringkas li { color: var(--teks-lembut); font-size: .95rem; }
.isi-ringkas a { color: var(--brand-ink); text-decoration: none; }
.isi-ringkas a:hover { text-decoration: underline; }

/* ---------- 20. Responsif ---------- */
@media (max-width: 1000px) {
  .sorot-produk { grid-template-columns: 1fr; }
  .sorot-produk__gambar { order: -1; }
  .sorot-produk__lencana { right: 10px; bottom: -12px; }
  .profil-kisi { grid-template-columns: 1fr; }
  .profil-kisi img { max-width: 420px; }
  .ajakan__dalam { grid-template-columns: 1fr; }
  .fase-detail { grid-template-columns: 1fr; }
  .fase-detail__angka { font-size: 2.2rem; }
}

@media (max-width: 900px) {
  #tombolMenu { display: inline-grid; }
  .nav__menu {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: 1rem 1.25rem 1.5rem;
    background: var(--permukaan);
    border-bottom: 1px solid var(--garis);
    box-shadow: var(--bayang-3);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav__menu.terbuka { opacity: 1; visibility: visible; transform: none; }
  .nav__tautan { padding: .78em .9em; font-size: 1rem; border-radius: var(--r-sm); }
  .nav__tautan[aria-current="page"] { background: var(--brand-lembut); }
  .nav__tautan[aria-current="page"]::after { display: none; }
  .nav__aksi .btn { display: none; }
}

@media (max-width: 700px) {
  :root { --nav-h: 64px; }
  body { font-size: 1.03rem; }
  .wrap, .wrap--sempit { width: min(100%, 100% - 32px); }

  /* Ponsel: foto dijadikan pita tersendiri di atas teks, bukan latar penuh.
     Kalau foto tetap dipasang sebagai latar, judul menutupi mata dan hidung —
     tidak cocok untuk halaman personal branding yang justru ingin menampilkan
     wajah. Pita ini juga membuat teks jauh lebih mudah dibaca. */
  .hero { display: flex; flex-direction: column; }
  .hero__foto {
    position: relative;
    inset: auto;
    z-index: 0;
    flex: 0 0 auto;
    height: min(46vh, 380px);
    min-height: 250px;
  }
  .hero__foto img { object-position: 68% 10%; }
  .hero__selubung {
    position: absolute;
    inset: 0 0 auto 0;
    height: min(46vh, 380px);
    min-height: 250px;
    z-index: 1;
    background: linear-gradient(180deg,
      rgba(26, 22, 19, .16) 0%,
      rgba(26, 22, 19, .08) 44%,
      rgba(26, 22, 19, .74) 84%,
      rgba(26, 22, 19, 1) 100%);
  }
  .hero__dalam {
    position: relative;
    z-index: 2;
    min-height: auto;
    padding: clamp(14px, 4vw, 26px) 0 clamp(46px, 9vw, 66px);
  }
  .hero__bukti { grid-template-columns: 1fr; gap: .9rem; }
  .hero__angka { font-size: 1.4rem; }
  .bukti-kartu img { height: 160px; }
  .bukti-kartu--tinggi img { height: 210px; }

  /* Bagian angka & artikel pada layar sempit */
  .sebab__item { grid-template-columns: 1fr; gap: .55rem; }
  .sebab__nomor { font-size: 1.85rem; min-width: 0; }
  .hitung__baris { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .hitung__baris > strong { white-space: normal; }
  .artikel__tarik { padding-left: 1.1rem; }

  .bilah-ponsel { display: flex; }
  .kaki { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  .kaki__kisi { grid-template-columns: 1fr 1fr; }
  .kaki__kisi > div:first-child { grid-column: 1 / -1; }
  .kotak-harga { border-radius: var(--r-lg); }
}

@media (max-width: 460px) {
  .btn { padding: .78em 1.2em; font-size: .93rem; }
  .btn--besar { padding: .9em 1.4em; font-size: .96rem; }
  .kaki__kisi { grid-template-columns: 1fr; }
  .galeri-bukti { grid-template-columns: 1fr 1fr; }
  .bukti-kartu img { height: 140px; }
}

/* ---------- 21. Cetak ---------- */
@media print {
  .nav, .progres, .bilah-ponsel, .hero__foto, .tombol-baris { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { background: #fff; color: #000; }
  .hero h1, .hero h1 .sorot { color: #000; -webkit-text-fill-color: #000; }
  .ajakan { background: #fff; color: #000; }
  .ajakan h2, .ajakan p { color: #000; }
}