/* Sudut ROAS di beranda (bangun.py, beranda_roas): kartu ROAS di hero, bagian
   "kenapa iklan boncos", kalkulator ROAS impas yang jalan di web, dan tiga
   alat iklan. Berkas sendiri, bukan situs-beranda.css, supaya bagian ini bisa
   dicabut utuh. Warna skala sama dengan bilah di panel Kalkulator ROAS
   ekstensi (Rugi merah, Kompetitif kuning, Konservatif hijau, Prospektif hijau
   toska), supaya orang yang memasang ekstensi melihat bilah yang sama. */

:root {
  --roas-rugi: #e5484d;
  --roas-kompetitif: #f5b014;
  --roas-konservatif: #35a312;
  --roas-prospektif: #13b97a;
  --roas-teks: #4b505a;
}
[data-theme="dark"] { --roas-teks: #b8b8be; }

/* ------------------------------------------------------------ skala */
.skala-roas { display: flex; height: 34px; overflow: hidden; border-radius: 10px; font-size: 12px; font-weight: 850; color: #fff; }
.skala-roas i { display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; font-style: normal; }
.skala-roas .rugi { flex: 4.1; justify-content: flex-start; background: var(--roas-rugi); }
.skala-roas .kompetitif { flex: 2.8; background: var(--roas-kompetitif); color: #3d2a00; }
.skala-roas .konservatif { flex: 1.3; background: var(--roas-konservatif); }
.skala-roas .prospektif { flex: 4.6; background: var(--roas-prospektif); }
.skala-roas.kecil { height: 10px; border-radius: 99px; font-size: 0; }
.skala-roas.kecil i { padding: 0; }

/* ------------------------------------------------------------ hero */
.hero-roas {
  position: absolute; z-index: 4; top: -34px; right: -18px; width: 248px; padding: 14px 16px 13px;
  border: 1px solid #f3d9cd; border-radius: 18px; background: #fff;
  box-shadow: 0 24px 50px -16px rgba(25, 29, 36, .32), 0 4px 12px rgba(37, 39, 42, .06);
  animation: apung 6.5s ease-in-out infinite;
}
.hero-roas-kepala { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; color: #17191f; font-size: 12.5px; font-weight: 850; white-space: nowrap; }
.hero-roas-kepala small { margin-left: auto; color: #8a8580; font-size: 10.5px; font-weight: 700; }
.hero-roas-titik { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px #ffe4da; }
.hero-roas-angka { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.hero-roas-angka span { padding: 8px 10px; border-radius: 11px; background: #fbf5f2; color: #6b6f78; font-size: 10.5px; font-weight: 700; }
.hero-roas-angka span:last-child { background: #ecf9f2; }
.hero-roas-angka strong { display: block; margin-top: 2px; color: #17191f; font-size: 21px; font-weight: 850; letter-spacing: -.02em; }
.hero-roas-angka span:first-child strong { color: #c9341b; }
.hero-roas-angka span:last-child strong { color: #07834f; }
.hero-roas p { margin: 10px 0 0; color: #6b6f78; font-size: 11px; line-height: 1.4; }
@media (max-width: 900px) { .hero-roas { right: -4px; } }
@media (max-width: 560px) {
  .hero-roas { position: relative; top: 0; right: 0; width: auto; margin: 14px 0 0; animation: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-roas { animation: none; } }

/* ------------------------------------------------------------ kenapa boncos */
.roas-bagian { padding-bottom: 72px; }
.roas-bagian .section-heading.centered { max-width: 760px; }
.roas-bagian .section-heading p, .hitung-bagian .section-heading p, .alur-iklan .section-heading p { color: var(--roas-teks); font-size: 15px; }
.roas-bukti { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }

.struk {
  position: relative; padding: 26px 28px 30px; border: 1px solid var(--line); border-radius: 20px 20px 6px 6px;
  background: var(--card); box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}
.struk::after {
  position: absolute; right: 0; bottom: -10px; left: 0; height: 10px; content: "";
  background: radial-gradient(circle at 10px 0, var(--card) 7px, transparent 7.5px) 0 0 / 20px 10px repeat-x;
}
.struk-kepala { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 16px; border-bottom: 2px dashed var(--line); }
.struk-kepala span { color: var(--muted); font-size: 13px; font-weight: 750; }
.struk-kepala strong { color: var(--ink); font-size: 26px; letter-spacing: -.02em; }
.struk ul { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
.struk li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--roas-teks); font-size: 14px; }
.struk li b { color: #c9341b; font-weight: 800; white-space: nowrap; }
.struk-sisa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 13px; background: #ecf9f2; }
.struk-sisa span { color: #0b5d39; font-size: 13.5px; font-weight: 800; }
.struk-sisa strong { color: #07834f; font-size: 22px; letter-spacing: -.01em; }
.struk-rumus { margin-top: 14px; color: var(--muted); font-size: 13.5px; text-align: center; }
.struk-rumus b { color: var(--ink); font-size: 17px; }

.roas-cerita { display: grid; gap: 18px; }
.roas-banding { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.banding { padding: 20px 20px 18px; border: 1px solid; border-radius: 18px; }
.banding.rugi { border-color: #f6c9c3; background: #fff4f2; }
.banding.untung { border-color: #bfe8d3; background: #f0fbf5; }
.banding-label { color: var(--roas-teks); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.banding strong { display: block; margin: 6px 0 6px; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.banding.rugi strong { color: #c9341b; }
.banding.untung strong { color: #07834f; }
.banding p { margin: 0; color: var(--roas-teks); font-size: 13px; line-height: 1.55; }

.roas-skala-kartu { padding: 20px 20px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.roas-skala-judul { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 14px; }
.roas-skala-judul strong { color: var(--ink); font-size: 15px; }
.roas-skala-judul span { color: var(--muted); font-size: 12px; }
.skala-ket { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.skala-ket div { margin: 0; }
.skala-ket dt { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; font-weight: 750; }
.skala-ket dt i { width: 8px; height: 8px; border-radius: 50%; }
.skala-ket dt i.rugi { background: var(--roas-rugi); }
.skala-ket dt i.kompetitif { background: var(--roas-kompetitif); }
.skala-ket dt i.konservatif { background: var(--roas-konservatif); }
.skala-ket dt i.prospektif { background: var(--roas-prospektif); }
.skala-ket dd { margin: 3px 0 0; color: var(--ink); font-size: 18px; font-weight: 850; }
.skala-ket dd small { display: block; color: var(--muted); font-size: 11px; font-weight: 650; }
.roas-catatan { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

/* ------------------------------------------------------------ kalkulator */
.hitung-bagian { padding-top: 72px; }
.hitung-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; }
.hitung-grid .kisah-poin { margin: 22px 0 22px; }
.hitung-kartu {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shadow-lg);
}
.hitung-isian { display: grid; gap: 14px; padding: 26px; }
.hitung-isian label { display: grid; gap: 6px; }
.hitung-isian label > span { color: var(--ink-2); font-size: 12.5px; font-weight: 800; }
.hitung-isian label > span em { color: var(--muted); font-style: normal; font-weight: 650; }
.hitung-isian small { color: var(--muted); font-size: 11px; }
.isian { display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--soft); transition: border-color .15s, box-shadow .15s; }
.isian:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(238, 77, 45, .12); background: var(--card); }
.isian b { color: var(--muted); font-size: 13px; font-weight: 750; }
.isian input { width: 100%; min-width: 0; padding: 11px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.isian-sorot .isian { border-style: dashed; border-color: #f2b7a5; background: var(--orange-soft); }

.hitung-hasil { display: flex; flex-direction: column; gap: 16px; padding: 26px; background: #17191f; color: #fff; }
.hasil-utama span { color: #ffb6a1; font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hasil-utama strong { display: block; margin: 6px 0 4px; font-size: clamp(54px, 6vw, 76px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hasil-utama p { margin: 0; color: #c9c9cf; font-size: 13px; line-height: 1.5; }
.hasil-rinci { display: grid; gap: 0; border-top: 1px solid #2c2f37; }
.hasil-rinci div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #2c2f37; }
.hasil-rinci span { color: #b3b4bb; font-size: 12.5px; }
.hasil-rinci b { font-size: 16px; font-variant-numeric: tabular-nums; }
.hasil-rinci div:nth-child(2) b { color: var(--roas-kompetitif); }
.hasil-rinci div:nth-child(3) b { color: #6fd34f; }
.hasil-rinci div:nth-child(4) b { color: #3fe0a3; }
.hasil-vonis { padding: 13px 15px; border-radius: 13px; font-size: 13px; line-height: 1.5; }
.hasil-vonis b { display: block; margin-bottom: 2px; font-size: 15px; }
.hasil-vonis.rugi { background: rgba(229, 72, 77, .18); color: #ffc9c6; }
.hasil-vonis.rugi b { color: #ff8e88; }
.hasil-vonis.tipis { background: rgba(245, 176, 20, .16); color: #ffe3a6; }
.hasil-vonis.tipis b { color: #ffcf5c; }
.hasil-vonis.sehat { background: rgba(19, 185, 122, .16); color: #b8f5d9; }
.hasil-vonis.sehat b { color: #3fe0a3; }
.hitung-catatan { grid-column: 1 / -1; margin: 0; padding: 14px 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.55; }

/* ------------------------------------------------------------ tiga alat iklan */
.alur-iklan .section-heading.centered { max-width: 820px; }
.alur-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.alur-kartu { display: flex; flex-direction: column; min-width: 0; padding: 28px 28px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: 0 4px 16px rgba(24, 28, 34, .03); }
.alur-nomor { color: var(--orange-text); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.alur-kartu h3 { margin: 12px 0 10px; color: var(--ink); font-size: clamp(21px, 2vw, 26px); line-height: 1.18; letter-spacing: -.02em; }
.alur-kartu p { margin: 0; color: var(--roas-teks); font-size: 14.5px; line-height: 1.65; }
.alur-gambar { margin-top: 24px; overflow: hidden; border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -10px 30px -18px rgba(25, 29, 36, .25); }
.alur-gambar img { display: block; width: 100%; height: auto; }
.alur-gambar.tinggi { aspect-ratio: 4 / 3; margin-top: auto; }
.alur-kartu > p + .alur-gambar.tinggi { margin-top: 24px; }
.alur-gambar.tinggi img { height: 100%; object-fit: cover; object-position: top; }
.alur-kartu.lebar { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; align-items: center; padding: 30px; }
.alur-kartu.lebar .alur-gambar { margin: 0; border-bottom: 1px solid var(--line); border-radius: 16px; }
.alur-kartu.lebar .kisah-poin { margin: 18px 0 18px; }
.alur-ajak { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 36px; text-align: center; }
.alur-ajak span { max-width: 460px; color: var(--muted); font-size: 13px; line-height: 1.55; text-align: left; }

@media (max-width: 1000px) {
  .roas-bukti, .hitung-grid { grid-template-columns: 1fr; gap: 32px; }
  .hitung-kartu { grid-template-columns: 1fr; }
  .alur-kartu.lebar { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 680px) {
  .roas-banding, .alur-grid { grid-template-columns: 1fr; }
  .skala-ket { grid-template-columns: 1fr 1fr; gap: 12px; }
  .struk { padding: 22px 20px 26px; }
  .hitung-isian, .hitung-hasil { padding: 20px; }
  .hitung-isian { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .hitung-isian label:nth-child(4), .isian-sorot { grid-column: 1 / -1; }
  .isian { padding: 0 10px; }
  .hitung-catatan { padding: 14px 20px; }
  .alur-kartu { padding: 22px 20px 0; }
  .alur-kartu.lebar { padding: 22px 20px; }
  .alur-ajak span { text-align: center; }
}

/* ------------------------------------------------------------ tema gelap */
[data-theme="dark"] .hero-roas { border-color: #3a2a24; background: #18181b; }
[data-theme="dark"] .hero-roas-kepala, [data-theme="dark"] .hero-roas-angka strong { color: #f2f2f4; }
[data-theme="dark"] .hero-roas-titik { box-shadow: 0 0 0 4px #3a2119; }
[data-theme="dark"] .hero-roas-angka span { background: #2a1d19; color: #b8b8be; }
[data-theme="dark"] .hero-roas-angka span:last-child { background: #15291f; }
[data-theme="dark"] .hero-roas-angka span:first-child strong { color: #ff8e74; }
[data-theme="dark"] .hero-roas-angka span:last-child strong { color: #4fdc9c; }
[data-theme="dark"] .hero-roas p { color: #a8a8ae; }
[data-theme="dark"] .struk li b, [data-theme="dark"] .banding.rugi strong { color: #ff8e74; }
[data-theme="dark"] .struk-sisa { background: #15291f; }
[data-theme="dark"] .struk-sisa span { color: #9fe6c3; }
[data-theme="dark"] .struk-sisa strong, [data-theme="dark"] .banding.untung strong { color: #4fdc9c; }
[data-theme="dark"] .banding.rugi { border-color: #4a2723; background: #221514; }
[data-theme="dark"] .banding.untung { border-color: #234433; background: #13221a; }
[data-theme="dark"] .isian-sorot .isian { border-color: #6b3a2c; }
[data-theme="dark"] .hitung-hasil { background: #0c0c0e; }
[data-theme="dark"] .alur-gambar { border-color: #2c2c31; }