/* =========================================================================
   99Hosts — Prose Layer
   Tata letak & tipografi otomatis untuk isi artikel (.pm-prose).
   Dipakai di halaman publik DAN di dalam editor admin, sehingga tampilan
   saat menulis sama persis dengan hasil akhirnya.
   Variabel punya nilai cadangan agar file ini berdiri sendiri.
   ========================================================================= */
.pm-prose {
  --pr-primary: var(--pm-primary, #0948b3);
  --pr-primary-2: var(--pm-primary-2, #014cda);
  --pr-accent: var(--pm-accent, #f67a3c);
  --pr-ink: var(--pm-ink, #0f1b3d);
  --pr-text: #334155;
  --pr-muted: #64748b;
  --pr-line: rgba(9, 72, 179, .12);
  --pr-soft: rgba(9, 72, 179, .05);
  --pr-radius: var(--pm-radius, 14px);
  --pr-shadow: 0 10px 30px -14px rgba(9, 72, 179, .35);

  font-size: clamp(1.02rem, 1.15vw, 1.12rem);
  line-height: 1.82;
  color: var(--pr-text);
  overflow-wrap: break-word;
}

/* ---------- Ritme vertikal ---------- */
.pm-prose > * + *        { margin-top: 1.15rem; }
.pm-prose > *:first-child { margin-top: 0; }
.pm-prose > *:last-child  { margin-bottom: 0; }

/* ---------- Judul ---------- */
.pm-prose h2, .pm-prose h3, .pm-prose h4 {
  color: var(--pr-ink);
  font-weight: 700;
  line-height: 1.28;
  scroll-margin-top: 7rem;   /* agar tidak tertutup header sticky */
}
.pm-prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); margin-top: 2.6rem; letter-spacing: -.015em; }
.pm-prose h3 { font-size: clamp(1.18rem, 2vw, 1.42rem);   margin-top: 2rem; }
.pm-prose h4 { font-size: clamp(1.05rem, 1.6vw, 1.18rem); margin-top: 1.6rem; }

/* Garis aksen kecil di bawah H2 */
.pm-prose h2::after {
  content: ""; display: block; width: 2.6rem; height: 3px; margin-top: .55rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pr-primary), var(--pr-accent));
}

/* ---------- Paragraf pembuka lebih menonjol ---------- */
.pm-prose > p:first-of-type {
  font-size: 1.1em;
  line-height: 1.75;
  color: #1f2b45;
}

/* ---------- Tautan ---------- */
.pm-prose a {
  color: var(--pr-primary);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
  text-decoration-color: rgba(9, 72, 179, .35);
  transition: color .15s, text-decoration-color .15s;
}
.pm-prose a:hover { color: var(--pr-primary-2); text-decoration-color: currentColor; }

/* ---------- Daftar ---------- */
.pm-prose ul, .pm-prose ol { padding-left: 1.35rem; display: grid; gap: .45rem; }
.pm-prose li::marker { color: var(--pr-primary); font-weight: 600; }
.pm-prose li > ul, .pm-prose li > ol { margin-top: .45rem; }
.pm-prose ul.pm-check { list-style: none; padding-left: 0; }
.pm-prose ul.pm-check li { position: relative; padding-left: 1.9rem; }
.pm-prose ul.pm-check li::before {
  content: "\2713"; position: absolute; left: 0; top: .05em;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
  color: #fff; background: var(--pr-primary);
}

/* ---------- Kutipan ---------- */
.pm-prose blockquote {
  margin: 1.6rem 0; padding: 1.1rem 1.35rem;
  border-left: 4px solid var(--pr-primary);
  background: var(--pr-soft);
  border-radius: 0 var(--pr-radius) var(--pr-radius) 0;
  color: #1f2b45; font-size: 1.03em;
}
.pm-prose blockquote p:last-child { margin-bottom: 0; }
.pm-prose blockquote cite { display: block; margin-top: .6rem; font-size: .88em; color: var(--pr-muted); font-style: normal; }

/* ---------- Gambar & figure ---------- */
.pm-prose img { max-width: 100%; height: auto; border-radius: var(--pr-radius); display: block; }
.pm-prose figure { margin: 1.8rem 0; }
.pm-prose figure img { width: 100%; box-shadow: var(--pr-shadow); }
.pm-prose figcaption {
  margin-top: .65rem; font-size: .875rem; color: var(--pr-muted);
  text-align: center; line-height: 1.6;
}
.pm-prose figure.pm-wide { margin-inline: calc(-1 * clamp(0px, 4vw, 3.5rem)); }

/* ---------- Galeri ---------- */
.pm-prose .pm-gallery {
  display: grid; gap: .85rem; margin: 1.8rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.pm-prose .pm-gallery figure { margin: 0; }
.pm-prose .pm-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  box-shadow: var(--pr-shadow); transition: transform .25s ease;
}
.pm-prose .pm-gallery a:hover img, .pm-prose .pm-gallery figure:hover img { transform: translateY(-3px) scale(1.012); }
.pm-prose .pm-gallery-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* ---------- Video & sematan (iframe) ---------- */
.pm-prose .pm-embed {
  position: relative; margin: 1.8rem 0; aspect-ratio: 16 / 9;
  border-radius: var(--pr-radius); overflow: hidden;
  background: #0b1220; box-shadow: var(--pr-shadow);
}
.pm-prose .pm-embed > iframe,
.pm-prose .pm-embed > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pm-prose .pm-embed > video { object-fit: cover; background: #0b1220; }
.pm-prose video { max-width: 100%; border-radius: var(--pr-radius); }

/* ---------- Tabel ---------- */
.pm-prose .pm-tablewrap {
  margin: 1.8rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--pr-line); border-radius: var(--pr-radius); background: #fff;
}
.pm-prose .pm-tablewrap > table { margin: 0; border: 0; min-width: 34rem; }
.pm-prose table { width: 100%; border-collapse: collapse; font-size: .95em; }
.pm-prose thead th {
  background: linear-gradient(180deg, rgba(9,72,179,.08), rgba(9,72,179,.04));
  color: var(--pr-ink); font-weight: 700; text-align: left;
}
.pm-prose th, .pm-prose td { padding: .72rem .95rem; border-bottom: 1px solid var(--pr-line); }
.pm-prose tbody tr:last-child td { border-bottom: 0; }
.pm-prose tbody tr:nth-child(even) { background: rgba(9, 72, 179, .022); }

/* ---------- Kode ---------- */
.pm-prose code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .89em; padding: .16em .42em; border-radius: 6px;
  background: rgba(9, 72, 179, .08); color: #0b3ea8;
}
.pm-prose pre {
  margin: 1.6rem 0; padding: 1.1rem 1.25rem; overflow-x: auto;
  background: #0b1220; color: #e2e8f0; border-radius: var(--pr-radius);
  font-size: .9rem; line-height: 1.7; box-shadow: var(--pr-shadow);
}
.pm-prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* ---------- Kotak sorotan (callout) ---------- */
.pm-prose .pm-callout {
  --c: var(--pr-primary);
  --cbg: rgba(9, 72, 179, .06);
  display: flex; gap: .9rem; align-items: flex-start;
  margin: 1.8rem 0; padding: 1.05rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
  border-left: 4px solid var(--c);
  background: var(--cbg); border-radius: var(--pr-radius);
}
.pm-prose .pm-callout > i, .pm-prose .pm-callout > .pm-callout-ic {
  flex: 0 0 auto; color: var(--c); font-size: 1.15rem; margin-top: .18rem;
}
.pm-prose .pm-callout p:last-child { margin-bottom: 0; }
.pm-prose .pm-callout strong { color: var(--pr-ink); }
.pm-prose .pm-callout--tip     { --c: #0ea5e9; --cbg: rgba(14, 165, 233, .07); }
.pm-prose .pm-callout--success { --c: #16a34a; --cbg: rgba(22, 163, 74, .07); }
.pm-prose .pm-callout--warn    { --c: #f59e0b; --cbg: rgba(245, 158, 11, .09); }
.pm-prose .pm-callout--danger  { --c: #dc2626; --cbg: rgba(220, 38, 38, .07); }

/* Daftar isi artikel ditangani .ar-toc di article-99.css (kolom kiri, sticky). */

/* ---------- Pembatas ---------- */
.pm-prose hr {
  margin: 2.4rem 0; border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pr-line) 20%, var(--pr-line) 80%, transparent);
  opacity: 1;
}

/* ---------- Lain-lain ---------- */
.pm-prose mark { background: rgba(245, 158, 11, .28); padding: .05em .25em; border-radius: 4px; color: inherit; }
.pm-prose kbd {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82em;
  padding: .15em .45em; border-radius: 6px; border: 1px solid #cbd5e1;
  border-bottom-width: 2px; background: #f8fafc; color: #334155;
}
.pm-prose small { color: var(--pr-muted); }

/* ---------- Layar kecil ---------- */
@media (max-width: 575.98px) {
  .pm-prose { font-size: 1rem; line-height: 1.75; }
  .pm-prose figure.pm-wide { margin-inline: 0; }
  .pm-prose .pm-gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .6rem; }
  .pm-prose pre { padding: .9rem 1rem; font-size: .84rem; }
}

/* ---------- Cetak ---------- */
@media print {
  .pm-prose .pm-embed, .ar-toc { display: none; }
  .pm-prose { font-size: 11pt; color: #000; }
  .pm-prose a { text-decoration: none; color: #000; }
}