/* ==========================================================================
   JPG ke PDF — responsive.css
   Penyesuaian breakpoint dan navigasi mobile.
   ========================================================================== */

/* ---------- Desktop besar ---------- */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1.4fr repeat(2, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
  .nav__link { padding: 0.66rem 0.8rem; font-size: 0.86rem; }
}

/* ---------- Tata letak pos: sidebar turun ---------- */
@media (max-width: 1000px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  /* Daftar isi naik ke atas artikel; kartu CTA sudah tersedia di akhir pos */
  .post-sidebar { position: static; order: -1; }
  .post-sidebar__inner { max-height: none; overflow: visible; }
  .post-sidebar .post-aside-cta { display: none; }
  .post-body, .author-box { max-width: none; }
}

/* ---------- Kartu: tiga kolom jadi dua ---------- */
@media (max-width: 980px) {
  .features-grid,
  .personas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Alat konverter: satu kolom ----------
   Di layar sempit unggah naik ke atas; nomor langkah disembunyikan
   karena urutannya tidak lagi sama dengan tampilan dua kolom. */
@media (max-width: 940px) {
  .converter__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .converter__pane--upload { order: -1; }
  .converter__pane-step { display: none; }
  .converter__pane--options .converter__options { padding: var(--space-4); }
  .converter__summary { margin-top: var(--space-2); }
  .field-tip { margin-top: var(--space-2); }
  .queue-list { max-height: 300px; }
}

/* ---------- Tablet lanskap ---------- */
@media (max-width: 900px) {
  .about-story { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .post-featured { margin-top: calc(-1 * var(--space-6)); }
}

/* ---------- Navigasi mobile ---------- */
@media (max-width: 960px) {
  .nav { justify-content: space-between; }
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__menu-cta { display: block; }

  .nav__menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 86vw);
    height: 100dvh;
    max-height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    margin: 0;
    padding: var(--space-4) var(--space-5) var(--space-6);
    border: 0;
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    background: var(--bg-surface);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 95;
  }
  .nav__menu.is-open { transform: translateX(0); }

  /* Kepala laci: judul + tombol tutup */
  .nav__menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
  }

  .nav__link {
    justify-content: flex-start;
    padding: 0.8rem 1rem;
    font-size: 0.98rem;
    border-radius: var(--radius-sm);
  }
  .nav__menu-cta { margin: auto 0 0; padding-top: var(--space-4); }
  .nav__menu-cta .btn { width: 100%; }
}

/* ---------- Tablet potret ---------- */
@media (max-width: 720px) {
  :root { --header-h: 64px; }
  .section { padding-block: var(--space-8); }
  .section--tight { padding-block: var(--space-6); }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .footer__brand { grid-column: 1 / -1; }
  .post-body table { font-size: 0.84rem; }
  .quickstats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .post-share { justify-content: center; }
}

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
  .features-grid,
  .personas,
  .value-grid { grid-template-columns: minmax(0, 1fr); }

  .reviews-track .review-card { flex-basis: min(84vw, 320px); width: min(84vw, 320px); }
  .reviews-viewport {
    mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
  }
}

@media (max-width: 520px) {
  .container { padding-inline: var(--space-4); }
  .converter__body { padding: var(--space-4); }
  .converter__footer { padding: var(--space-4); }
  .converter__actions .btn { min-width: 100%; max-width: none; flex-basis: 100%; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
  .queue-item { grid-template-columns: auto 1fr; }
  .queue-item__actions { grid-column: 1 / -1; justify-content: flex-end; justify-self: end; }
  .error-page__actions { flex-direction: column; width: 100%; }
  .error-page__actions .btn { width: 100%; }
  .dropzone { padding: var(--space-5) var(--space-4); }
  .blog-cats { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem; }
  .blog-cats__btn { flex-shrink: 0; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .post-featured img { max-height: 240px; }
}