/* Program affiliate: /affiliate/ dan /affiliate/dasbor.html (22 Okt 2026).
   Dimuat SETELAH /css/gaya.css dan tidak mengubahnya. Memakai token gaya.css (--ink, --teks, --abu, --abu-2, --garis,
   --oranye-*) dan kelas umum (nav, footer, seksi, h-1, h-2, tombol, kartu-poster, faq). Semua kelas baru berawalan af-.
   Gaya: putih + #F5F5F7, judul 700 rapat, tombol hitam pil, oranye hanya aksen kecil, tanpa hijau. */

.hal-affiliate .h-1, .hal-affiliate .h-2 { font-weight: 700; }
.hal-affiliate [hidden] { display: none !important; }
.af-grafit { background: radial-gradient(120% 90% at 85% 10%, rgba(255, 107, 53, .55), transparent 55%), linear-gradient(155deg, #26282e 0%, #121316 100%); }
.af-oranye { background: radial-gradient(110% 80% at 90% 0%, rgba(255, 154, 107, .8) 0%, transparent 50%), linear-gradient(160deg, #d94f1d 0%, #b23a14 55%, #7d270d 100%); }
.af-malam { background: radial-gradient(120% 90% at 85% 10%, rgba(255, 255, 255, .16), transparent 55%), linear-gradient(155deg, #2b2e38 0%, #0e1014 100%); }

/* ---------- hero ---------- */
.af-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); }
.af-hero-tata { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(40px, 6vw, 88px); align-items: center; }
.af-hero .h-1 { max-width: 12em; letter-spacing: -.038em; }
.af-hero .aksi { justify-content: flex-start; }
.af-poin { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 10px; }
.af-poin li { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--ink); }
.af-poin .ik { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--ink); color: #fff; stroke-width: 3; }

.af-kartu { border-radius: 26px; overflow: hidden; background: #0b0b0d; color: #f5f5f7; box-shadow: 0 50px 90px -56px rgba(0, 0, 0, .7); }
.af-kartu .poster { aspect-ratio: 16 / 8; padding: 26px 28px; }
.af-kartu .poster-hias { width: 40%; right: 84px; top: 16px; stroke: rgba(255, 255, 255, .22); }
.af-kartu .poster-judul { display: block; font-size: clamp(28px, 2.8vw, 38px); }
.af-kartu-data { padding: 22px 28px 26px; border-top: 1px solid rgba(255, 255, 255, .08); }
.af-kecil-terang { margin: 0; font-size: 13px; color: #a1a1a6; }
.af-angka-besar { margin: 6px 0 0; font-size: clamp(42px, 4.4vw, 58px); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; color: #fff; font-variant-numeric: tabular-nums; }
.af-angka-besar b { font-weight: inherit; }
.af-angka-besar span { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: #a1a1a6; }
.af-rumus { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.af-rumus li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 15px; }
.af-rumus .op { color: #86868b; font-weight: 600; }
.af-rumus .suku { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.af-rumus .suku b { font-weight: 600; color: #f5f5f7; }
.af-rumus .suku small { font-size: 13px; color: #86868b; }
.af-rumus .nilai { white-space: nowrap; font-variant-numeric: tabular-nums; color: #d2d2d7; }
.af-rumus li.ujung { border-bottom: 0; padding-bottom: 0; }
.af-rumus li.ujung b { color: #fff; font-weight: 700; }
.af-rumus li.ujung .nilai { color: var(--oranye-malam); font-weight: 700; }

/* ---------- kelas yang ikut ---------- */
.af-kelas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 56px; }
.af-kelas .kartu-poster { width: auto; }
.af-kelas .kartu-isi .untuk { -webkit-line-clamp: unset; display: block; }
.af-komisi-baris { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--abu-2); }
.af-komisi-baris span { font-size: 14px; color: var(--teks); }
.af-komisi-baris b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.af-catatan-kotak { max-width: 760px; margin: 36px auto 0; padding: 20px 24px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--abu-2); display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--teks); }
.seksi:not(.abu) .af-catatan-kotak { background: var(--abu); box-shadow: none; }
.af-catatan-kotak .ik { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--ink); }
.af-catatan-kotak b { color: var(--ink); font-weight: 600; }

/* ---------- cara kerja ---------- */
.af-langkah { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.af-langkah li { position: relative; overflow: hidden; border-radius: 26px; min-height: 300px; padding: 96px 22px 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; color: #fff; }
.af-langkah li.terang { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--abu-2); }
.seksi:not(.abu) .af-langkah li.terang { background: var(--abu); box-shadow: none; }
.af-langkah h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: inherit; }
.af-langkah p { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.af-langkah li.terang p { color: var(--teks); }
.af-no { position: absolute; left: 22px; top: 22px; min-width: 40px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--oranye-teks); font-size: 13px; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; }
.af-langkah li.terang .af-no { background: var(--ink); color: #fff; }
.af-nowrap { white-space: nowrap; }
.af-url { overflow-wrap: anywhere; }
.af-langkah code, .af-kode-teks { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; }

/* ---------- kalkulator ---------- */
.af-kal { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; margin-top: 56px; align-items: stretch; }
.af-kal-isi { padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: var(--abu); }
.seksi.abu .af-kal-isi { background: #fff; }
.seksi.abu .af-kal-isi .af-pil span { background: var(--abu); box-shadow: none; }
.seksi.abu .af-kal-isi .af-pil input:checked + span { background: var(--ink); }
.af-label { display: block; margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--ink); }
.af-pil-grup { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.af-pil { position: relative; }
.af-pil input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.af-pil span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--abu-2); font-size: 15px; font-weight: 500; color: var(--ink); transition: background .2s, color .2s, box-shadow .2s; }
.af-pil span small { margin-left: 6px; font-size: 13px; color: var(--teks); }
.af-pil input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.af-pil input:checked + span small { color: #c7c7cc; }
.af-pil input:focus-visible + span { outline: 3px solid var(--oranye-teks); outline-offset: 2px; }
fieldset.af-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.af-banding { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--abu-2); }
.af-banding li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--abu-2); font-size: 15px; }
.af-banding li span small { margin-left: 6px; color: var(--teks); }
.af-banding li b { font-variant-numeric: tabular-nums; font-weight: 600; }
.af-banding li.pilih b { color: var(--oranye-teks); }
.af-kal-hasil { padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: #0b0b0d; color: #f5f5f7; display: flex; flex-direction: column; }
.af-kal-hasil .af-angka-besar { font-size: clamp(48px, 5vw, 68px); }
.af-rincian { width: 100%; margin-top: auto; padding-top: 26px; border-collapse: collapse; font-size: 15px; }
.af-rincian th, .af-rincian td { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); text-align: left; font-weight: 400; color: #d2d2d7; }
.af-rincian td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.af-rincian tr.kurang th, .af-rincian tr.kurang td { color: #a1a1a6; }
.af-rincian tr.sub th, .af-rincian tr.sub td { color: #fff; font-weight: 600; }
.af-rincian tr.total th, .af-rincian tr.total td { border-bottom: 0; padding-top: 14px; color: #fff; font-weight: 700; font-size: 17px; }
.af-rincian tr.total td { color: var(--oranye-malam); }
.af-catatan { list-style: none; margin: 22px auto 0; padding: 0; max-width: 820px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--teks); }
.af-catatan li::before { content: "·"; margin-right: 8px; color: var(--pudar); }

/* ---------- aturan ---------- */
.af-aturan { max-width: 860px; margin: 48px auto 0; padding: 0; list-style: none; counter-reset: aturan; }
.af-aturan > li { counter-increment: aturan; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; padding: 24px 0; border-bottom: 1px solid var(--garis); }
.af-aturan > li::before { content: counter(aturan, decimal-leading-zero); grid-row: span 2; font-size: 15px; font-weight: 650; color: var(--oranye-teks); font-variant-numeric: tabular-nums; padding-top: 3px; }
.af-aturan h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.016em; }
.af-aturan p, .af-aturan ul { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--teks); }
.af-aturan ul { padding-left: 18px; display: grid; gap: 6px; }
.af-aturan b { color: var(--ink); font-weight: 600; }
.af-tanggal { margin: 14px 0 0; font-size: 15px; color: var(--teks); }

/* ---------- CTA penutup ---------- */
.af-cta { border-radius: 32px; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); color: #fff; text-align: center; }
.af-cta .h-2 { color: #fff; }
.af-cta p { margin: 16px auto 0; max-width: 34em; font-size: 19px; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.af-cta .aksi { margin-top: 30px; }
.af-cta .tombol.terang { background: #fff !important; color: var(--ink) !important; }
.af-cta .tautan-terang { color: #fff; font-size: 17px; font-weight: 500; }
.af-cta .tautan-terang:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ================= dasbor ================= */
.hal-kelas main.af-dasbor { padding: calc(var(--nav) + clamp(32px, 5vw, 64px)) 0 clamp(72px, 9vw, 120px); min-height: 70vh; }
.af-dasbor .h-1 { font-size: clamp(34px, 4.2vw, 54px); letter-spacing: -.035em; }
.af-memuat { padding: 80px 0; text-align: center; color: var(--teks); }
.af-pesan { margin: 16px 0 0; padding: 14px 18px; border-radius: 14px; font-size: 15px; line-height: 1.45; background: var(--abu); color: var(--ink); }
.af-pesan.galat { background: #fff1ec; color: #9a3412; }
.af-pesan.ok { background: var(--ink); color: #fff; }
.af-pesan[hidden] { display: none; }

/* formulir daftar */
.af-daftar-tata { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: 8px; }
.af-ringkas-aturan { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.af-ringkas-aturan li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--ink); }
.af-ringkas-aturan .ik { flex: none; width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--ink); color: #fff; stroke-width: 3; }
.af-form { padding: clamp(24px, 3vw, 34px); border-radius: 28px; background: var(--abu); display: grid; gap: 16px; }
.af-form h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.af-isian-label { display: grid; gap: 7px; font-size: 15px; font-weight: 600; color: var(--ink); }
.af-isian-label small { font-weight: 400; color: var(--teks); }
.af-isian { width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--abu-2); font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); }
.af-isian:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.af-centang { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--ink); }
.af-centang input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #1d1d1f; }
.af-form .tombol { width: 100%; justify-content: center; }
.af-form .tombol[disabled] { opacity: .5; pointer-events: none; }

/* kepala dasbor */
.af-kepala { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.af-kode-kartu { margin-top: 32px; border-radius: 28px; padding: clamp(24px, 3vw, 34px); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.af-kode-kartu .label { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.af-kode-kartu .kode { display: block; margin-top: 6px; font-size: clamp(40px, 5vw, 64px); font-weight: 700; letter-spacing: .02em; line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.af-kode-kartu .sub { margin: 10px 0 0; font-size: 15px; color: rgba(255, 255, 255, .75); }
.af-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--abu); color: var(--ink); white-space: nowrap; }
.af-chip.aktif { background: #fff; color: var(--ink); }
.af-chip.aktif::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--oranye); }
.af-chip.dihentikan, .af-chip.batal { background: #fff1ec; color: #9a3412; }
.af-chip.tertunda { background: var(--abu); color: var(--teks); }
.af-chip.siap { background: var(--ink); color: #fff; }
.af-chip.dibayar { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--garis); }
.af-tombol-terang { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; border: 0; cursor: pointer; }
.af-tombol-terang:hover { background: var(--abu); }
.af-tombol-terang .ik { width: 18px; height: 18px; }

.af-blok { margin-top: 56px; }
.af-blok > h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.025em; }
.af-blok > p.sub { margin: 8px 0 0; font-size: 16px; color: var(--teks); max-width: 44em; }
.af-ubin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.af-ubin > div { padding: 20px 22px; border-radius: 22px; background: var(--abu); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.af-ubin .nilai { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.af-ubin .nama { font-size: 15px; font-weight: 600; color: var(--ink); }
.af-ubin .ket { font-size: 13px; line-height: 1.4; color: var(--teks); }
.af-ubin > div.gelap { background: #0b0b0d; color: #fff; }
.af-ubin > div.gelap .nama { color: #fff; }
.af-ubin > div.gelap .ket { color: #a1a1a6; }
.af-ubin > div.gelap .nilai { color: var(--oranye-malam); }
.af-progres { height: 6px; margin-top: 6px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.af-progres i { display: block; height: 100%; border-radius: 99px; background: var(--oranye); }

.af-link { list-style: none; margin: 22px 0 0; padding: 0; border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--abu-2); }
.af-link li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 14px 18px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--abu-2); }
.af-link li:first-child { border-top: 0; }
.af-link .kelas b { display: block; font-size: 16px; font-weight: 650; }
.af-link .kelas span { font-size: 13px; color: var(--teks); }
.af-link input { width: 100%; min-width: 0; height: 42px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--abu); font: inherit; font-size: 14px; color: var(--ink); text-overflow: ellipsis; }
.af-salin { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; min-width: 92px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.af-salin:hover { background: #000; }
.af-salin.ok { background: var(--oranye-tombol); }
.af-link-bebas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 14px; }

.af-riwayat { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--abu-2); }
.af-riwayat li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; gap: 6px 18px; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--abu-2); font-size: 15px; }
.af-riwayat .tgl { color: var(--teks); font-variant-numeric: tabular-nums; }
.af-riwayat .apa b { font-weight: 600; }
.af-riwayat .apa small { display: block; font-size: 13px; color: var(--teks); }
.af-riwayat .uang { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.af-kosong { margin: 22px 0 0; padding: 26px; border-radius: 18px; background: var(--abu); text-align: center; font-size: 15px; color: var(--teks); }

.af-rek { margin-top: 22px; padding: 22px 24px; border-radius: 22px; background: var(--abu); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.af-rek dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.af-rek dt { font-size: 13px; color: var(--teks); }
.af-rek dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.af-tombol-garis { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.af-tombol-garis:hover { background: #fff; }
.af-form.dalam { margin-top: 14px; background: #fff; box-shadow: 0 0 0 1px var(--abu-2); }
.af-form.dalam .af-isian { background: var(--abu); box-shadow: none; }
.af-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ---------- responsif ---------- */
@media (max-width: 1100px) {
  .af-langkah { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af-langkah li:last-child { grid-column: span 2; min-height: 0; }
}
@media (max-width: 960px) {
  .af-hero-tata, .af-daftar-tata, .af-kal { grid-template-columns: minmax(0, 1fr); }
  .af-kelas { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; }
  .af-ubin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af-link li { grid-template-columns: minmax(0, 1fr) auto; }
  .af-link li .kelas { grid-column: span 2; }
}
@media (max-width: 640px) {
  .af-langkah { grid-template-columns: minmax(0, 1fr); }
  .af-langkah li, .af-langkah li:last-child { grid-column: auto; min-height: 0; padding-top: 84px; }
  .af-kartu .poster { aspect-ratio: 16 / 10; padding: 22px; }
  .af-kartu .poster-hias { right: 70px; width: 46%; }
  .af-kartu-data { padding: 20px 22px 22px; }
  .af-kode-kartu { grid-template-columns: minmax(0, 1fr); }
  .af-kepala { grid-template-columns: minmax(0, 1fr); }
  .af-riwayat li { grid-template-columns: minmax(0, 1fr) auto; }
  .af-riwayat .tgl { grid-column: span 2; font-size: 13px; }
  .af-riwayat .af-chip { justify-self: start; }
  .af-rek { grid-template-columns: minmax(0, 1fr); }
  .af-rek dl { grid-template-columns: minmax(0, 1fr); }
  .af-dua { grid-template-columns: minmax(0, 1fr); }
  .af-aturan > li { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 10px; }
  .af-ubin { gap: 10px; }
  .af-ubin > div { padding: 16px; }
  .af-ubin .nilai { font-size: 21px; letter-spacing: -.02em; overflow-wrap: normal; white-space: nowrap; }
  .af-riwayat .uang { justify-self: end; }
}

/* Audit mobile 22 Okt 2026: isian 16 px (iOS tidak memperbesar halaman saat diketuk), target sentuh >= 44 px */
.af-link input, .af-isian { font-size: 16px; }
.af-link input, .af-salin, .af-tombol-garis { min-height: 44px; height: auto; }
.af-link input { height: 44px; }
.af-ubin .ket { font-size: 14px; }