/* PKBMQu -- gaya khusus laman depan publik (index.html). Dipisah dari
   app.css supaya halaman kerja (dashboard, sidebar, formulir dsb) tidak
   ikut berubah -- app.css tetap jadi satu-satunya sumber gaya untuk itu. */

/* .pq-grid-2 dari app.css memakai minmax(300px, 1fr) -- di layar sempit
   (kira-kira di bawah 332px, termasuk sebagian layar kecil nyata) itu
   memaksa lebar minimum yang melebihi kontainer dan memicu geser
   horizontal. Dalam konteks laman depan saja, kolom dipaksa satu dulu
   lalu baru dua di atas 620px, supaya tidak tergantung lebar layar persis. */
.pql-section .pq-grid-2 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .pql-section .pq-grid-2 { grid-template-columns: 1fr 1fr; } }

.pql-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--pq-primary-light) 0%, var(--pq-bg) 65%);
  border-bottom: 1px solid var(--pq-border);
}
.pql-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}
.pql-hero-blob-1 { width: 320px; height: 320px; top: -120px; right: -80px; background: rgba(31, 95, 78, 0.14); }
.pql-hero-blob-2 { width: 260px; height: 260px; bottom: -100px; left: -60px; background: rgba(138, 90, 0, 0.12); }

.pql-hero-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 16px 60px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 860px) {
  .pql-hero-inner { grid-template-columns: 1fr; padding: 32px 16px 40px; text-align: center; }
  .pql-hero-cta { justify-content: center; }
}

.pql-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--pq-primary-light); color: var(--pq-primary-dark);
  font-size: 0.8rem; font-weight: 700; margin-bottom: 16px;
}

.pql-h1 { font-size: 2.3rem; line-height: 1.2; margin: 0 0 14px; letter-spacing: -0.01em; }
@media (min-width: 640px) { .pql-h1 { font-size: 2.7rem; } }

.pql-lead { font-size: 1.05rem; color: var(--pq-text-muted); max-width: 540px; margin: 0 0 24px; }
@media (max-width: 860px) { .pql-lead { margin-left: auto; margin-right: auto; } }

.pql-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pql-hero-note { font-size: 0.82rem; color: var(--pq-text-muted); margin: 14px 0 0; }

/* ---------- Ilustrasi hero ---------- */
.pql-illus-wrap { position: relative; max-width: 420px; margin: 0 auto; }
.pql-illus-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  background: linear-gradient(155deg, var(--pq-primary-light) 0%, #fbf3e4 100%);
  border: 1px solid var(--pq-border);
  overflow: hidden;
}
.pql-float-card {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  background: var(--pq-surface);
  border: 1px solid var(--pq-border);
  border-radius: var(--pq-radius-md);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.1);
  padding: 10px 13px;
  max-width: 200px;
}
.pql-float-card-1 { top: 10%; left: -8%; }
.pql-float-card-2 { bottom: 8%; right: -8%; }
@media (max-width: 480px) {
  .pql-float-card-1 { left: 0; }
  .pql-float-card-2 { right: 0; }
}
.pql-float-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--pq-success-light); color: var(--pq-success);
}
.pql-float-title { font-size: 0.78rem; font-weight: 700; color: var(--pq-text); margin: 0; }
.pql-float-desc { font-size: 0.7rem; color: var(--pq-text-muted); margin: 1px 0 0; }

.pql-doodle { position: absolute; color: var(--pq-accent); opacity: 0.55; pointer-events: none; }
.pql-doodle-star-1 { top: -14px; left: 30%; width: 22px; height: 22px; }
.pql-doodle-star-2 { top: 18%; right: 4%; width: 14px; height: 14px; }
.pql-doodle-arrow { bottom: -22px; left: -18px; width: 70px; height: 50px; transform: scaleX(-1); }
@media (max-width: 480px) { .pql-doodle-arrow { display: none; } }

/* ---------- Bagian fitur & kartu ikon ---------- */
.pql-section { max-width: 1240px; margin: 0 auto; padding: 56px 16px; }
.pql-section-kepala { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.pql-section-kepala h2 { font-size: 1.7rem; margin: 6px 0 8px; }
.pql-section-kepala p { color: var(--pq-text-muted); margin: 0; }

.pql-icon-blob {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--pq-primary-light); color: var(--pq-primary-dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; flex-shrink: 0;
}
.pql-feature-card { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.pql-feature-card:hover { box-shadow: 0 10px 24px rgba(16, 24, 40, 0.09); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .pql-feature-card:hover { transform: none; } }
.pql-feature-card h3 { font-size: 0.98rem; margin: 0 0 6px; }
.pql-feature-card p { font-size: 0.85rem; color: var(--pq-text-muted); margin: 0; line-height: 1.5; }

.pql-cta-band {
  background: var(--pq-primary);
  color: #fff;
  border-radius: var(--pq-radius-lg);
  padding: 40px 24px;
  text-align: center;
}
.pql-cta-band h2 { margin: 0 0 8px; font-size: 1.5rem; }
.pql-cta-band p { margin: 0 0 20px; opacity: 0.9; }
.pql-cta-band .pq-btn-utama { background: #fff; color: var(--pq-primary-dark); }
.pql-cta-band .pq-btn-utama:hover { background: #f1f1f1; }
.pql-cta-band .pq-btn-sekunder { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.pql-cta-band .pq-btn-sekunder:hover { background: rgba(255,255,255,0.12); }
.pql-cta-eyebrow { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.75; margin-bottom: 10px; }

/* ---------- Baris kepercayaan di hero ---------- */
.pql-trust-row { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; }
@media (max-width: 860px) { .pql-trust-row { justify-content: center; } }
.pql-trust-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--pq-primary-dark);
}
.pql-trust-item svg { flex-shrink: 0; }

/* ---------- Bagian alternatif (kartu perbandingan) ---------- */
.pql-section-alt { background: transparent; }

/* ---------- Langkah bernomor ---------- */
.pql-langkah { text-align: center; padding: 8px 12px; }
.pql-langkah-nomor {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--pq-primary); color: #fff;
  font-weight: 800; font-size: 1rem; margin-bottom: 12px;
}
.pql-langkah h3 { font-size: 1rem; margin: 0 0 6px; }
.pql-langkah p { margin: 0; }