/* Beranda tiga layanan — bikinindong.com (LP-Beranda-Tiga-Layanan.html).
   Dipakai BERSAMA assets/beranda.css: token warna, .wrap, .btn, .kons*, .kaki
   datang dari sana. File ini menambah navigasi atas yang baru (dengan daftar
   layanan yang bisa dibuka) dan semua bagian khas beranda tiga layanan.

   Setiap kali file ini berubah, naikkan ?v= di tag <link> halaman. */

/* ============================================================
   1. NAVIGASI ATAS
   Menimpa .nav dari beranda.css yang disembunyikan di bawah 900px.
   ============================================================ */

.top-in {
  gap: 16px;
}

/* ---- Navigasi layar lebar ---- */
.navx {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.navx > a,
.navx-induk > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-radius: 10px;
}
.navx > a:hover,
.navx-induk > a:hover {
  color: var(--ink);
  background: var(--mist);
}
.navx > a[aria-current="page"],
.navx-induk > a[aria-current="page"] {
  color: var(--ink);
  background: var(--wash);
}

/* ---- Induk "Layanan": tautan + tombol pembuka terpisah ---- */
.navx-grup {
  position: relative;
  display: flex;
  align-items: center;
}
.navx-induk {
  display: flex;
  align-items: center;
  gap: 0;
}
.navx-buka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 10px;
}
.navx-buka:hover {
  color: var(--ink);
  background: var(--mist);
}
.navx-buka svg {
  width: 18px;
  height: 18px;
  transition: transform 0.22s var(--ease-out);
}
.navx-buka[aria-expanded="true"] {
  color: var(--ink);
  background: var(--mist);
}
.navx-buka[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ---- Panel daftar layanan ---- */
.navx-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 50;
  width: 340px;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.navx-panel[hidden] {
  display: none;
}
.js .navx-panel {
  transform-origin: top left;
}
.js .navx-panel.is-buka {
  animation: navx-masuk 0.2s var(--ease-out);
}
@keyframes navx-masuk {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.navx-panel a {
  display: block;
  padding: 11px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
}
.navx-panel a:hover {
  background: var(--mist);
}
.navx-panel b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}
.navx-panel span {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* ---- Tombol menu di HP ---- */
.navx-hp-tombol {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.navx-hp-tombol svg {
  width: 22px;
  height: 22px;
}
.navx-hp-tombol .i-tutup,
.navx-hp-tombol[aria-expanded="true"] .i-menu {
  display: none;
}
.navx-hp-tombol[aria-expanded="true"] .i-tutup {
  display: block;
}

/* ---- Panel menu HP ---- */
.navx-hp {
  display: none;
}
.navx-hp[hidden] {
  display: none !important;
}
.navx-hp-isi {
  padding: 8px 0 28px;
}
.navx-hp a.navx-hp-baris,
.navx-hp-sub a {
  display: block;
  padding: 14px 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--wash);
}
.navx-hp-grup {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--wash);
}
.navx-hp-grup a {
  flex: 1;
  padding: 14px 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.navx-hp-lipat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.navx-hp-lipat svg {
  width: 20px;
  height: 20px;
  transition: transform 0.22s var(--ease-out);
}
.navx-hp-lipat[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.navx-hp-sub[hidden] {
  display: none;
}
.navx-hp-sub {
  padding: 4px 0 4px 14px;
  border-left: 2px solid var(--gold);
  margin: 6px 0 10px;
}
.navx-hp-sub a {
  padding: 12px 4px;
  font-size: 15.5px;
  border-bottom: 0;
}
.navx-hp-sub a span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}
.navx-hp .btn {
  width: 100%;
  margin-top: 16px;
}

/* 900px dipilih supaya sama dengan ambang .cta-hp di beranda.css. Kalau tidak
   sama, ada rentang lebar layar yang tidak punya tombol konsultasi sama sekali. */
@media (max-width: 900px) {
  .navx {
    display: none;
  }
  .navx-hp-tombol {
    display: inline-flex;
  }
  /* Menu menutupi sisa layar di bawah header (tinggi .top-in = 68px) supaya
     isi halaman tidak mengintip di bawahnya. */
  .navx-hp {
    display: block;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    background: var(--paper);
    border-top: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .top .btn-sm {
    display: none;
  }
}

/* ============================================================
   2. GERAK: muncul saat tergulir
   ============================================================ */

.js .rv {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .rv.is-tampak {
  opacity: 1;
  transform: none;
}

/* Perangkat yang meminta "kurangi gerakan": tidak ada perpindahan posisi,
   isinya tetap muncul dengan memudar. ?gerak melewati aturan ini. */
@media (prefers-reduced-motion: reduce) {
  html:not(.gerak-penuh) .rv {
    transform: none;
    transition:
      opacity 0.4s linear,
      transform 0s;
  }
  html:not(.gerak-penuh) .js .navx-panel.is-buka {
    animation: none;
  }
}

/* ============================================================
   3. HERO — sengaja tanpa animasi (LCP + trafik iklan)
   ============================================================ */

.hero3 {
  position: relative;
  overflow: hidden;
  padding: 44px 0 56px;
  background:
    radial-gradient(circle at 88% 10%, rgba(245, 201, 121, 0.3), transparent 44%),
    linear-gradient(180deg, var(--paper), var(--mist));
}
.hero3-in {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 52px;
  align-items: center;
}
.kicker {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.kicker i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}
.hero3 h1 {
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.05;
  margin-bottom: 20px;
}
.hero3-lead {
  font-size: 18.5px;
  color: var(--ink-2);
  max-width: 34em;
}
.hero3-lead p {
  margin-bottom: 12px;
}
.aksi3 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 22px;
}
.janji {
  list-style: none;
  /* Padding kiri-kanan datang dari .wrap, jangan ditimpa di sini. */
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.janji li {
  position: relative;
  padding-left: 27px;
  font-size: 15px;
  color: var(--muted);
}
.janji svg {
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  color: var(--gold-ink);
}

/* ---- Gambaran tiga keluhan di sisi kanan hero ---- */
.bisik {
  display: grid;
  gap: 14px;
}
.bisik-kartu {
  position: relative;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 16px 34px -22px rgba(5, 45, 62, 0.38);
}
.bisik-kartu:nth-child(2) {
  margin-left: 22px;
}
.bisik-kartu:nth-child(3) {
  margin-left: 44px;
}
.bisik-kartu q {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  quotes: "“" "”";
}
.bisik-tanda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 12.5px;
  font-weight: 700;
}
.bisik-tanda svg {
  width: 13px;
  height: 13px;
}

@media (max-width: 980px) {
  .hero3-in {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .bisik-kartu:nth-child(2),
  .bisik-kartu:nth-child(3) {
    margin-left: 0;
  }
  .janji {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 28px;
  }
}
@media (max-width: 560px) {
  .hero3 {
    padding: 30px 0 42px;
  }
  .hero3-lead {
    font-size: 17px;
  }
  .aksi3 .btn {
    width: 100%;
  }
}

/* ============================================================
   4. BAGIAN UMUM
   ============================================================ */

/* Header menempel setinggi 68px. Tanpa jarak ini, judul bagian tertutup
   header setiap kali tautan #tahap, #karya, #paket, atau #faq diklik. */
section[id] {
  scroll-margin-top: 84px;
}
.sec3 {
  padding: 68px 0;
}
.sec3-abu {
  background: var(--mist);
}
.sec3-tinta {
  background: var(--ink);
  color: #e8f1f3;
}
.sec3-tinta h2,
.sec3-tinta h3 {
  color: #fff;
}
.sec3 h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 24em;
}
.sec3-lead {
  margin-top: 14px;
  font-size: 17.5px;
  color: var(--muted);
  max-width: 44em;
}
.sec3-tinta .sec3-lead {
  color: #b7cdd3;
}
.kepala {
  margin-bottom: 34px;
}

/* ============================================================
   5. DIAGNOSIS — inti halaman, harus terbaca cepat di HP
   ============================================================ */

.diag {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.diag-kartu {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 44px -30px rgba(5, 45, 62, 0.4);
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    border-color 0.25s;
}
.diag-kartu:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 26px 52px -28px rgba(5, 45, 62, 0.45);
}
.diag-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.diag-kartu h3 {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.diag-cerita {
  font-size: 15.5px;
  color: var(--muted);
}
.diag-kerja {
  margin: 4px 0 14px;
  padding: 14px 15px;
  background: var(--mist);
  border-radius: 12px;
  font-size: 15px;
}
.diag-kerja b {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}
.diag-harga {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.diag-nota {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.diag-kartu .btn {
  margin-top: auto;
  width: 100%;
}

@media (max-width: 980px) {
  .diag {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .diag-kartu h3 {
    font-size: 20px;
  }
}

/* ============================================================
   6. KENAPA SERING SALAH SASARAN
   ============================================================ */

.salah {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: salah;
}
.salah-item {
  padding: 22px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 14px;
}
.salah-item h3 {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 9px;
}
.salah-item p {
  margin: 0;
  font-size: 15.5px;
  color: var(--muted);
}
@media (max-width: 900px) {
  .salah {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ============================================================
   7. URUTAN PENGERJAAN
   ============================================================ */

.urut-tiga {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 0 30px;
}
.urut-sel {
  padding: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.urut-sel b {
  display: block;
  font-size: 17px;
  color: #fff;
  margin-bottom: 5px;
}
.urut-sel span {
  font-size: 15px;
  color: #b7cdd3;
}
.urut-teks p {
  font-size: 17px;
  max-width: 46em;
}
.urut-teks strong {
  color: #fff;
}
.langkah {
  list-style: none;
  counter-reset: langkah;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 44em;
}
.langkah li {
  counter-increment: langkah;
  position: relative;
  padding: 15px 18px 15px 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 16px;
}
.langkah li::before {
  content: counter(langkah);
  position: absolute;
  left: 16px;
  top: 14px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--gold);
  color: var(--ink-deep);
  font-size: 14px;
  font-weight: 800;
}
.langkah b {
  color: #fff;
}
.urut-nota {
  margin-top: 20px;
  font-size: 15.5px;
  color: #b7cdd3;
}
@media (max-width: 900px) {
  .urut-tiga {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   8. BUKTI
   ============================================================ */

.karya3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 14px;
}
/* Dua kartu saja (halaman jasa aplikasi): jangan biarkan kolom ketiga kosong. */
.karya3.is-dua {
  grid-template-columns: repeat(2, 1fr);
}
.karya3-kartu {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.karya3-alamat {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold-ink);
  margin-bottom: 8px;
  word-break: break-word;
}
.karya3-kartu h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 7px;
}
.karya3-kartu p {
  font-size: 15px;
  color: var(--muted);
}
.karya3-jenis {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--wash);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
}
/* Tangkapan layar di dalam kartu karya (halaman jasa aplikasi). */
.karya3-sorot {
  margin: 0 0 14px;
  padding: 14px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.karya3-sorot img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
}
/* Tangkapan layar dari HP ditahan selebar ponsel supaya tidak melar. */
.karya3-sorot.is-hp img {
  max-width: 248px;
}
.karya3-kartu a.tautan {
  margin-top: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  align-self: flex-start;
  padding-bottom: 1px;
}
.karya3-kartu a.tautan:hover {
  border-bottom-color: var(--ink);
}
.karya3-nota {
  font-size: 13.5px;
  color: var(--muted);
}

/* ---- Angka sistem ---- */
.sistem {
  margin-top: 46px;
  padding: 28px 26px;
  background: var(--ink);
  color: #e8f1f3;
  border-radius: var(--radius);
}
.sistem h3 {
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}
.sistem > p {
  font-size: 16px;
  color: #b7cdd3;
  max-width: 48em;
}
.angka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 18px;
}
.angka-sel {
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
}
.angka-sel b {
  display: block;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.angka-sel span {
  display: block;
  margin-top: 5px;
  font-size: 14.5px;
  color: #b7cdd3;
}
.sistem ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
  font-size: 15.5px;
}
.sistem-nota {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: #93b0b8;
}
@media (max-width: 900px) {
  .karya3,
  .karya3.is-dua {
    grid-template-columns: 1fr;
  }
  .angka {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   9. HARGA  (id="paket" dipakai assets/pixel.js untuk ViewContent)
   ============================================================ */

.paket3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.paket3-kartu {
  display: flex;
  flex-direction: column;
  padding: 26px 22px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.paket3-kartu.is-utama {
  border-color: var(--gold);
  box-shadow: 0 24px 50px -30px rgba(138, 90, 18, 0.5);
}
.paket3-kartu h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 14px;
}
.harga3 {
  margin: 0 0 4px;
  font-size: 15.5px;
}
.harga3 b {
  display: block;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.harga3 span {
  color: var(--muted);
  font-size: 14px;
}
.paket3-kartu .pisah {
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}
.paket3-kartu p {
  font-size: 15px;
  color: var(--muted);
}
.paket3-kartu p strong {
  color: var(--ink);
}
.paket3-lama {
  font-size: 14.5px;
  color: var(--ink-2);
  font-weight: 600;
}
.paket3-kartu .btn {
  margin-top: auto;
  width: 100%;
}
@media (max-width: 980px) {
  .paket3 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   10. YANG TIDAK KAMI JANJIKAN
   ============================================================ */

.batas {
  display: grid;
  gap: 12px;
  max-width: 50em;
}
.batas-item {
  display: flex;
  gap: 13px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}
/* Dulu bagian ini berisi daftar "yang tidak kami janjikan", jadi ikonnya merah.
   Sejak 28 Okt isinya jaminan yang didapat klien, jadi warnanya ikut berubah. */
.batas-item svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--gold-ink);
}
.batas-item b {
  display: block;
  margin-bottom: 4px;
  font-size: 16.5px;
}
.batas-item p {
  margin: 0;
  font-size: 15.5px;
  color: var(--muted);
}
.terus-terang {
  margin-top: 30px;
  padding: 26px 24px;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  max-width: 50em;
}
.terus-terang h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--gold-ink);
}
.terus-terang p {
  font-size: 16.5px;
  color: var(--ink-2);
}
.terus-terang p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   11. TANYA JAWAB
   ============================================================ */

.tanya3 {
  display: grid;
  gap: 10px;
  max-width: 52em;
}
.tanya3 details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.tanya3 details[open] {
  border-color: var(--gold);
}
.tanya3 summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 18px;
  font-size: 16.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.tanya3 summary::-webkit-details-marker {
  display: none;
}
.tanya3 summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-left: auto;
  border-right: 2.4px solid var(--muted);
  border-bottom: 2.4px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.22s var(--ease-out);
}
.tanya3 details[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}
.tanya3 summary:hover {
  background: var(--mist);
}
.tanya3 .jawab {
  padding: 0 18px 18px;
  font-size: 15.5px;
  color: var(--muted);
}
.tanya3 .jawab p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   12. AJAKAN TERAKHIR
   ============================================================ */

.ajak {
  padding: 72px 0 80px;
  background:
    radial-gradient(circle at 12% 18%, rgba(245, 201, 121, 0.22), transparent 46%),
    var(--ink);
  color: #e8f1f3;
  text-align: center;
}
.ajak h2 {
  margin: 0 auto 18px;
  color: #fff;
  max-width: 20em;
}
.ajak p {
  margin: 0 auto 14px;
  max-width: 40em;
  font-size: 17.5px;
  color: #cfe0e4;
}
.ajak .btn {
  margin-top: 16px;
}
.ajak-nota {
  margin-top: 16px;
  font-size: 14.5px;
  color: #93b0b8;
}

/* ============================================================
   13. PENYESUAIAN KECIL
   ============================================================ */

/* Bagian Konsep Desain dibuat otomatis oleh scripts/build-konsep.mjs dan
   memakai gaya dari beranda.css. Hanya jaraknya yang disesuaikan di sini. */
#konsep {
  padding-top: 68px;
  padding-bottom: 68px;
}

@media (max-width: 560px) {
  .sec3 {
    padding: 50px 0;
  }
  .ajak {
    padding: 54px 0 62px;
  }
  .sistem {
    padding: 22px 18px;
  }
  .terus-terang {
    padding: 22px 18px;
  }
}

/* Waktu pengerjaan di kartu paket halaman /jasa-pembuatan-website.
   Kartunya memakai gaya .paket-item dari beranda.css, bukan .paket3-kartu. */
.paket-item .lama {
  margin: -6px 0 16px;
  padding: 9px 12px;
  background: var(--gold-soft);
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--gold-ink);
}
/* Kartu Company Profile berlatar gelap, dan beranda.css punya aturan
   `.paket-luas > p strong { color: #fff !important }`. Kotak ini juga sebuah <p>
   yang jadi anak langsung kartu itu, jadi teks tebalnya ikut jadi putih di atas
   latar krem: rasio kontras 1,07:1, praktis tidak terbaca.
   !important di sini terpaksa, karena aturan yang ditimpa juga memakainya. */
.paket-item .lama strong {
  color: var(--gold-ink) !important;
}

/* Kartu bergaya .salah-item tapi isinya hal baik, bukan kesalahan.
   Dipakai di bagian "Yang berubah" di beranda dan "Paling terasa" di halaman aplikasi. */
.salah-item.is-baik {
  border-left-color: var(--gold-ink);
}

/* ============================================================
   14. HERO BERGAYA KARTU (sejak 2026-10-28)
   Susunannya mengikuti konsep Ritme (samplefitness1.html): satu kartu putih
   besar, judul di tengah, lalu panggung berisi mockup HP dan kartu melayang.
   Bedanya, isi kartu melayang di sini bukan contoh karangan, tapi karya dan
   harga yang benar-benar ada.
   ============================================================ */

.hero3.is-kartu {
  padding: 14px 0 0;
  background: var(--mist);
}
.hero-kartu {
  position: relative;
  padding: 58px 24px 0;
  text-align: center;
  background: var(--paper);
  border-radius: 36px;
  box-shadow: 0 30px 70px -40px rgba(5, 45, 62, 0.45);
  overflow: hidden;
}
/* Bagian bawah panggung dibuat memudar supaya kartu tidak terpotong mendadak. */
.hero-kartu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  background: linear-gradient(transparent, var(--paper));
  pointer-events: none;
  z-index: 3;
}
.chip {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hero-kartu h1 {
  max-width: 17em;
  margin: 20px auto 0;
  font-size: clamp(31px, 4.6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.06;
}
.hero-kartu h1 .pudar {
  color: #9db1b9;
}
.hero-kartu .sub {
  max-width: 34em;
  margin: 20px auto 0;
  font-size: 17.5px;
  color: var(--muted);
}
.hero-kartu .aksi3 {
  justify-content: center;
  margin: 26px 0 0;
}

/* ---- Panggung: mockup HP di tengah, kartu melayang mengelilinginya ---- */
.panggung {
  position: relative;
  height: 470px;
  max-width: 1080px;
  margin: 40px auto 0;
}
.apung {
  position: absolute;
  z-index: 2;
  padding: 12px 15px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 40px -24px rgba(5, 45, 62, 0.45);
  text-align: left;
  will-change: transform;
  transition: transform 0.5s var(--ease-out);
}
.apung b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}
.apung small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.apung img {
  border-radius: 10px;
  object-fit: cover;
}
.apung-baris {
  display: flex;
  gap: 11px;
  align-items: center;
}
.apung-ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--gold-soft);
  color: var(--gold-ink);
}
.apung-ikon svg {
  width: 17px;
  height: 17px;
}
.apung-angka {
  display: block;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}

/* Letak tiap kartu */
.a-karya { left: 0; top: 10px; width: 236px; }
.a-karya img { width: 100%; height: 86px; margin-bottom: 9px; }
.a-harga { left: 4%; top: 212px; width: 206px; }
.a-konsep { left: 1%; top: 322px; width: 214px; }
.a-konsep img { width: 100%; height: 76px; margin-bottom: 9px; }
.a-iklan { right: 0; top: 24px; width: 220px; }
.a-angka { right: 3%; top: 168px; width: 226px; }
.a-waktu { right: 0; top: 338px; width: 230px; }
.a-angka img { width: 100%; height: 76px; margin-bottom: 9px; }

/* ---- Mockup HP ---- */
/* Tinggi gambar sengaja sedikit lebih pendek dari perbandingan aslinya
   (236 x 470 = 0,502, gambar 0,481), supaya yang terpotong hanya bagian bawah.
   Kalau kotaknya lebih sempit dari gambar, yang terpotong jadi sisi kiri-kanan
   dan tulisan di website klien ikut terpancung (pernah terjadi 2026-10-28). */
.hp3 {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 252px;
  height: 516px;
  padding: 0;
  overflow: hidden;
  background: var(--ink-deep);
  border: 8px solid var(--ink-deep);
  border-radius: 42px;
  box-shadow: 0 40px 80px -34px rgba(5, 45, 62, 0.55);
}
/* Bar status dengan poni. Isinya website klien mulai di bawah bar ini, jadi
   poninya tidak pernah menimpa tulisan. */
.hp3-bar {
  position: relative;
  flex: none;
  height: 30px;
  background: var(--ink-deep);
}
.hp3-bar::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  translate: -50% 0;
  width: 78px;
  height: 19px;
  border-radius: 11px;
  background: #0b2d3c;
}
.hp3 img {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  border-radius: 0 0 34px 34px;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 1040px) {
  .a-karya { width: 200px; }
  .a-angka, .a-waktu, .a-iklan { width: 196px; }
  .a-harga, .a-konsep { width: 182px; }
}

/* Di layar sempit kartu melayang tidak muat mengelilingi HP.
   Yang tersisa dua kartu saja, ditumpuk di sudut, sisanya disembunyikan. */
@media (max-width: 760px) {
  .hero3.is-kartu { padding-top: 8px; }
  .hero-kartu {
    padding: 40px 16px 0;
    border-radius: 26px;
  }
  .hero-kartu h1 { font-size: clamp(27px, 7.6vw, 36px); }
  .hero-kartu .sub { font-size: 16.5px; }
  .hero-kartu .aksi3 .btn { width: 100%; }
  /* Di 375px, HP dan kartu tidak muat bertumpuk: 170 + 142 + 142 lebih lebar
     dari layarnya, jadi kartu menutupi lebih dari separuh layar HP dan isinya
     tidak terbaca (ditemukan 2026-10-28). Susunannya diubah: HP di kiri, kartu
     berderet di kanan, tanpa saling menimpa. */
  .panggung { height: 320px; margin-top: 26px; }
  .hp3 {
    left: 0;
    translate: none;
    width: 128px;
    height: 266px;
    border-width: 6px;
    border-radius: 24px;
  }
  .hp3-bar { height: 22px; }
  .hp3-bar::before { top: 4px; width: 44px; height: 13px; }
  .hp3 img { border-radius: 0 0 18px 18px; }
  .a-harga, .a-konsep, .a-iklan { display: none; }
  .a-karya img,
  .a-angka img { display: none; }
  .a-karya { left: auto; right: 0; top: 0; width: 165px; }
  .a-angka { right: 0; left: auto; top: 96px; width: 165px; }
  .a-waktu { right: 0; left: auto; top: 206px; width: 165px; }
  .apung { padding: 10px 12px; border-radius: 15px; }
  .apung b { font-size: 12.5px; }
  .apung small { font-size: 11px; }
  .apung-angka { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.gerak-penuh) .apung {
    transition: none;
  }
}

/* Nama domain lebih panjang dari lebar kartunya di layar sempit, jadi teksnya
   dibiarkan pindah baris. Tanpa ini tulisannya meluber ke atas mockup HP. */
.apung b {
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .a-karya b { font-size: 12px; }
}

/* Panel angka di tengah panggung, dipakai halaman aplikasi.
   Halaman itu tidak punya tangkapan layar yang boleh ditampilkan (isinya data
   customer klien), jadi yang jadi penopang tengah adalah dua angka nyata dari
   sistem yang berjalan, bukan mockup dasbor karangan. */
.pusat-angka {
  position: absolute;
  left: 50%;
  top: 14px;
  translate: -50% 0;
  z-index: 1;
  width: 290px;
  padding: 26px 24px;
  text-align: center;
  background: var(--ink);
  color: #e8f1f3;
  border-radius: 26px;
  box-shadow: 0 40px 80px -34px rgba(5, 45, 62, 0.55);
}
.pusat-angka > b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.pusat-sel {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.pusat-sel:first-of-type {
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}
.pusat-sel i {
  display: block;
  font-size: 34px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1.05;
}
.pusat-sel span {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #b7cdd3;
}
@media (max-width: 760px) {
  .pusat-angka {
    left: 0;
    translate: none;
    top: 0;
    width: 150px;
    padding: 16px 14px;
    border-radius: 20px;
  }
  .pusat-angka > b { font-size: 11px; }
  .pusat-sel { margin-top: 14px; padding-top: 12px; }
  .pusat-sel:first-of-type { margin-top: 12px; }
  .pusat-sel i { font-size: 24px; }
  .pusat-sel span { font-size: 11.5px; }
}