/* =====================================================================
   MASUK PTN — Redesign v3 · Privacy Policy (privacy-policy.css)
   ---------------------------------------------------------------------
   Page-specific polish only — flat v3 language on top of base.css.
   Turns the Word-exported legal text into a calm, readable policy card:
   violet top ribbon, blue numbered headings, amber notice callout,
   green check bullets. Zero gradients — flat solid color only.
   ===================================================================== */

/* ---- Page header: glass title panel over the photo (v3 glass spot) -- */
.page-header h1.display-3 {
  display: inline-block;
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r-lg);
  padding: .6rem 1.9rem;
  letter-spacing: -.02em;
}

/* ---- The policy container card -------------------------------------- */
.policy-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.6rem, 4vw, 3.2rem) clamp(1.4rem, 4vw, 3.4rem);
}

/* Solid violet ribbon along the top edge of the card (flat, no sheen) */
.policy-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: var(--violet);
}

/* ---- Override the Word-exported inline styles for legibility -------- */
/* The source carries inline Calibri + rgb(0,0,0) + 14.67px text with
   ~15.7px line-height. We keep the markup, but normalize ink, family,
   size and leading to the v3 proportional scale (!important beats the
   inline styles) — no text changes. */
.policy-card .konten-artikel,
.policy-card .konten-artikel p,
.policy-card .konten-artikel li,
.policy-card .konten-artikel span {
  color: var(--ink-soft);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

.policy-card .konten-artikel {
  font-size: var(--fs-base);
  line-height: 1.85;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Normalize the cramped inline line-height / tiny inline font sizes */
.policy-card .konten-artikel p {
  font-size: var(--fs-base) !important;
  line-height: 1.85 !important;
}
.policy-card .konten-artikel li { line-height: 1.8 !important; }
.policy-card .konten-artikel p span,
.policy-card .konten-artikel li span { font-size: 1rem !important; }

/* Strip the Word .Mso paragraph margins into a steady reading rhythm */
.policy-card .konten-artikel p.MsoNormal { margin: 0 0 1rem !important; }
.policy-card .konten-artikel p.MsoNormal:empty { display: none; }
.policy-card .konten-artikel p.MsoListParagraphCxSpLast { margin: 0 !important; }

/* Bold emphasis (defined terms like "Data Pribadi", "Aplikasi") in ink */
.policy-card .konten-artikel b {
  color: var(--ink);
  font-weight: 700;
}

/* ---- The big centered title at the top of the article --------------- */
.policy-card .konten-artikel > p:first-child {
  text-align: center;
  margin-bottom: .35rem !important;
}
.policy-card .konten-artikel > p:first-child b span {
  display: inline-block;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: var(--fs-2xl) !important;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1.25;
}

/* Solid amber underline accent under the main title */
.policy-card .konten-artikel > p:first-child::after {
  content: "";
  display: block;
  width: 64px; height: 4px;
  margin: .85rem auto 0;
  border-radius: var(--r-pill);
  background: var(--amber);
}

/* ---- Numbered section headings (the "1. ... 7." bold leads) --------- */
/* Each heading paragraph is a span whose ONLY element child is the bold
   lead (trailing   is a text node, so :only-child still matches).
   Body paragraphs carry several inline <b> defined terms ("Kami",
   "Data Pribadi") in one span, so :only-child excludes them —
   :first-child would not, because it ignores text nodes. */
.policy-card .konten-artikel p > span > b:only-child {
  display: inline-block;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  color: var(--blue-700);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.4;
  padding-top: .4rem;
}

/* The opening warning is a full bold sentence (not a numbered heading):
   flat amber notice callout instead of a large sub-heading. */
.policy-card .konten-artikel > p:nth-of-type(4) {
  background: var(--amber-50);
  border-left: 3px solid var(--amber-600);
  border-radius: var(--r-sm);
  padding: 1rem 1.25rem !important;
  margin: .6rem 0 1.5rem !important;
}
.policy-card .konten-artikel > p:nth-of-type(4) > span > b:first-child {
  display: inline;
  font-family: "Inter", system-ui, sans-serif !important;
  color: var(--navy);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.75;
  padding-top: 0;
}

/* ---- Lists: green check markers (positive/consent items) ------------ */
.policy-card .konten-artikel ul {
  list-style: none;
  padding-left: .25rem;
  margin: .4rem 0 1.4rem;
}
.policy-card .konten-artikel ul li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .6rem;
  text-align: left !important;
}
.policy-card .konten-artikel ul li::before {
  content: "\f00c"; /* fa check */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0; top: .16em;
  font-size: .68rem;
  line-height: 1;
  color: var(--green-600);
  width: 1.3rem; height: 1.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--r-pill);
}

/* Email + inline italics polish — violet, echoing the card ribbon */
.policy-card .konten-artikel i {
  color: var(--violet-600);
  font-style: italic;
  font-weight: 600;
}

/* ---- Small screens: relax justify so text doesn't river ------------- */
@media (max-width: 575.98px) {
  .policy-card { padding: 1.4rem 1.1rem; }
  .policy-card .konten-artikel { text-align: left; }
  .policy-card .konten-artikel p,
  .policy-card .konten-artikel li { text-align: left !important; }
  .page-header h1.display-3 { padding: .5rem 1.2rem; }
}

/* Smooth scroll-reveal for the card body */
.container-xxl.wow .content-card { will-change: transform; }