/* =========================================================
   Landing page /pesan/ (bio Instagram & Google Ads)
   Memakai warna & font yang sama dengan style.css
   ========================================================= */

/* Tombol landing page */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 28px; border-radius: 50px; font: 700 17px var(--font-body);
  text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; border: 2px solid transparent;
}
.lp-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.lp-btn-wa { background: #25d366; color: #fff; }
.lp-btn-wa::before {
  content: ""; width: 22px; height: 22px; flex: 0 0 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3a13 13 0 0 0-11.2 19.6L3 29l6.6-1.7A13 13 0 1 0 16 3zm5.9 15.7c-.3-.2-1.9-1-2.2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.7 0a8.8 8.8 0 0 1-4.4-3.8c-.3-.6.3-.5 1-1.7.1-.2 0-.4 0-.5l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4s-1.1 1.1-1.1 2.7 1.2 3.1 1.3 3.3 2.3 3.5 5.6 4.9c2.1.9 2.9 1 4 .8.6-.1 1.9-.8 2.2-1.5s.3-1.4.2-1.5-.3-.2-.6-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3a13 13 0 0 0-11.2 19.6L3 29l6.6-1.7A13 13 0 1 0 16 3zm5.9 15.7c-.3-.2-1.9-1-2.2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.7 0a8.8 8.8 0 0 1-4.4-3.8c-.3-.6.3-.5 1-1.7.1-.2 0-.4 0-.5l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4s-1.1 1.1-1.1 2.7 1.2 3.1 1.3 3.3 2.3 3.5 5.6 4.9c2.1.9 2.9 1 4 .8.6-.1 1.9-.8 2.2-1.5s.3-1.4.2-1.5-.3-.2-.6-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lp-btn-wa:hover { background: #1ebe5a; }
.lp-btn-green { background: var(--green); color: #fff; }
.lp-btn-ghost { background: #fff; color: var(--green); border-color: var(--green); }
.lp-small { font-size: 14px; color: var(--muted); margin: 12px 0 0; }

/* 1. Hero */
.lp-hero { background: var(--yellow); padding: 50px 0 60px; overflow: hidden; }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.lp-eyebrow { display: inline-block; background: var(--green); color: #fff; font: 700 13px var(--font-nav); letter-spacing: .5px; padding: 6px 14px; border-radius: 30px; margin-bottom: 16px; }
.lp-hero h1 { color: var(--green); font-size: clamp(2rem, 4.4vw, 3.3rem); margin-bottom: 16px; }
.lp-lead { color: var(--green-dark); font-size: clamp(1.05rem, 1.7vw, 1.2rem); max-width: 560px; }
.lp-trust { list-style: none; padding: 0; margin: 20px 0 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-trust li { background: rgba(255,255,255,.75); color: var(--green); padding: 8px 14px; border-radius: 12px; font-size: 14px; }
.lp-trust strong { font-family: var(--font-head); }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-hero .lp-small { color: var(--green-dark); }
.lp-hero-img { margin: 0; max-width: none; }

/* 2. Tautan cepat (gaya link-in-bio) */
.lp-links { background: #fff; padding: 26px 0; box-shadow: 0 6px 16px rgba(0,0,0,.04); }
.lp-links-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.lp-links a {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 14px 8px; border-radius: 14px; background: var(--bg); color: var(--green);
  font: 700 14px var(--font-body); text-decoration: none; border: 2px solid transparent; transition: .2s;
}
.lp-links a span { font-size: 26px; line-height: 1; }
.lp-links a:hover { border-color: var(--yellow); background: #fffbea; }
.lp-links a:first-child { background: #25d366; color: #fff; }

/* 3. Segmen */
.lp-ico { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--yellow); font-size: 26px; margin-bottom: 12px; }

/* 4. Ukuran */
.lp-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; max-width: 900px; margin: 0 auto; }
.lp-size { background: var(--bg); border-radius: 14px; padding: 16px 10px; text-align: center; border-bottom: 4px solid var(--yellow); }
.lp-size strong { display: block; font: 700 1.5rem var(--font-head); color: var(--green); }
.lp-size span { font-size: 13px; color: var(--muted); }

/* 5. Kenapa kami */
.lp-why { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 6. Langkah */
.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 30px; }
.lp-steps div { background: #fff; border-radius: var(--radius); padding: 26px 22px; text-align: center; box-shadow: var(--shadow); }
.lp-steps span { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: #fff; font: 700 1.3rem var(--font-head); margin-bottom: 10px; }
.lp-steps h3 { margin-bottom: 6px; }
.lp-steps p { color: var(--muted); margin: 0; font-size: 15px; }

/* 7. Area */
.lp-areas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lp-areas a { padding: 8px 18px; border-radius: 30px; border: 2px solid var(--green); color: var(--green); text-decoration: none; font-weight: 700; font-size: 15px; }
.lp-areas a:hover { background: var(--green); color: #fff; }

/* Tombol menempel di bawah (HP) — menggantikan tombol WA melayang biasa */
.lp-sticky { display: none; }
@media (max-width: 768px) {
  .wa-float { display: none; }
  .lp-sticky {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 250; padding: 10px 16px;
    background: #fff; box-shadow: 0 -6px 18px rgba(0,0,0,.12);
  }
  .lp-sticky span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .lp-sticky strong { color: var(--green); font-family: var(--font-head); }
  .lp-sticky small { color: var(--muted); font-size: 12px; }
  .lp-sticky .lp-btn { padding: 12px 22px; font-size: 16px; }
  .site-footer { padding-bottom: 76px; }
}

/* Responsif */
@media (max-width: 900px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .lp-hero-img { order: -1; max-width: 520px; margin: 0 auto; }
  .lp-links-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .lp-hero { padding: 30px 0 40px; }
  .lp-cta-row .lp-btn { flex: 1 1 100%; }
  .lp-links-grid { gap: 8px; }
  .lp-links a { font-size: 12.5px; padding: 12px 4px; }
  .lp-steps { grid-template-columns: 1fr; }
}