/*
 * Lapisan tipografi — dimuat paling akhir, setelah styles.css, redesign.css,
 * company-profile.css, portfolio-showcase.css, dan case-study.css.
 *
 * Sebelumnya teks pendukung (deskripsi kartu, layanan, proses, footer) memakai
 * .7–.88rem (11–14px) dan label monospace .55–.64rem (8,8–10px), terlalu kecil
 * untuk dibaca. Berkas ini menetapkan skala minimum lewat token. Selectornya
 * sengaja sama dengan aturan aslinya supaya specificity setara dan urutan
 * muat yang menentukan, tanpa !important.
 */
/* =========================================================================
 * FONT GLOBAL — satu-satunya sumber keluarga font dan gaya judul situs.
 *
 * Acuan: /layanan/jasa-website. Judul Plus Jakarta Sans regular (400) dengan
 * tracking rapat; body IBM Plex Sans tanpa varian glyph; label IBM Plex Mono.
 * Berkas font dimuat oleh editorial-fonts.css. Variabel lama dari styles.css
 * (--display, --sans, --mono) dan token Tailwind di global.css diarahkan ke
 * sini, jadi mengganti font cukup di blok ini.
 * ========================================================================= */
:root {
  --ff-heading: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --ff-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, monospace;

  --display: var(--ff-heading);
  --sans: var(--ff-body);
  --mono: var(--ff-mono);

  /* Plus Jakarta paling tipis dideklarasikan 500 (editorial-fonts.css); itulah
     ketebalan judul yang tampil di halaman acuan. */
  --heading-weight: 500;
  --tracking-h1: -0.078em;
  --tracking-h2: -0.07em;
  --tracking-h3: -0.04em;
}

body {
  font-family: var(--ff-body);
  font-feature-settings: normal;
}

/* :root + :is(main, .final-cta) cukup spesifik untuk menimpa aturan judul per
   komponen (mis. .cp-hero-copy h1), tanpa !important. */
:root :is(main, .final-cta) :is(h1, h2, h3, h4) {
  font-family: var(--ff-heading);
  font-weight: var(--heading-weight);
}
:root :is(main, .final-cta) h1 { letter-spacing: var(--tracking-h1); }
:root :is(main, .final-cta) h2 { letter-spacing: var(--tracking-h2); }
:root :is(main, .final-cta) :is(h3, h4) { letter-spacing: var(--tracking-h3); }

:root {
  --type-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);        /* 16 → 18px */
  --type-article: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);   /* 17 → 19px */
  --type-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem);   /* 18 → 21px, paragraf pembuka hero */
  --type-support: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);     /* 15 → 16px */
  --type-meta: 0.9375rem;                                      /* 15px */
  --type-meta-sm: 0.875rem;                                    /* 14px */
  --type-label: 0.75rem;                                       /* 12px, label kapital monospace */
  --leading-body: 1.65;
  --leading-support: 1.6;
}

/* Paragraf umum: elemen tanpa ukuran eksplisit mewarisi dari body. */
body { font-size: var(--type-body); }

/* Isi artikel Wawasan. */
.article-body p,
.article-body li { font-size: var(--type-article); line-height: 1.75; }
.article-inline-media figcaption { font-size: 0.8125rem; line-height: 1.5; }

/* Teks pendukung: deskripsi di bawah judul kartu dan baris. */
.article-grid p,
.case-card p,
.values p,
.service-row small,
.services-v2 .service-row small,
.industry-v2 .industry-chip small,
.process-rail p,
.craft-principles span,
.deliverable-grid p,
.service-process-list p,
.why-grid p,
.ai-craft-grid p,
.proof-copy p,
.contact-details > * {
  font-size: var(--type-support);
  line-height: var(--leading-support);
}

/* Label "Baca artikel" di kartu Wawasan mengikuti teks kartu. */
.article-grid .card-cta { font-size: var(--type-support); }

/* Label kapital monospace (eyebrow, nomor langkah, tag). */
.eyebrow,
.hero-topline,
.statement-foot span,
.services-v2 .service-row > em,
.craft-principles b,
.craft-principles .craft-num,
.process-rail span,
.industry-chip span,
.deliverable-grid article > span,
.service-process-list span,
.why-grid span,
.ai-craft-grid b,
.proof-copy > span,
.proof-copy small,
.team-gallery-grid figcaption,
.article > header > span,
.case-card > small,
.craft-photo > span,
.form-wrap > span,
.service-section-title > span,
.proof-label,
.service-ai-craft > div > span,
.scroll-cue,
.statement-index {
  font-size: var(--type-label);
}

/* Tautan teks "Jelajahi …" di bawah section. */
.text-link { font-size: var(--type-meta-sm); }

/* Footer: kolom tautan, judul kolom, status, dan baris bawah. */
.footer-col,
footer .footer-col { font-size: var(--type-meta); line-height: 1.6; }
.footer-col b,
.footer-col .footer-heading,
footer .footer-col b,
footer .footer-col .footer-heading { font-size: var(--type-label); }
.status,
footer .status { font-size: 0.8125rem; }
.footer-bottom,
footer .footer-bottom { font-size: var(--type-meta-sm); }

/* Formulir kontak: label field dan pesan status. */
.contact-form label { font-size: var(--type-meta-sm); }
.form-status { font-size: var(--type-meta-sm); line-height: 1.5; }

/*
 * Halaman penjualan company profile dan vertikal lain yang memakai class cp-*
 * (company-profile.css). Blok "type corrections" di sana menurunkan paragraf
 * ke .9rem; aturan di bawah memakai selector yang sama sehingga menang karena
 * dimuat belakangan.
 */
.cp-hero-copy > p,
.cp-ai-copy > p { font-size: var(--type-body); line-height: var(--leading-body); }

.cp-dual article p,
.cp-standard-list p,
.cp-ai-copy article p,
.cp-process-list p,
.cp-industry-list p,
.cp-price-grid article > p,
.cp-price-grid li {
  font-size: var(--type-support);
  line-height: var(--leading-support);
}

/* Daftar fitur bergaya monospace di kartu misi. */
.cp-dual li { font-size: var(--type-meta-sm); line-height: 1.6; }

.cp-hero-kicker,
.cp-proof-line span,
.cp-section-index,
.cp-dual article > span,
.cp-standard-list span,
.cp-ai-heading > span,
.cp-ai-copy article b,
.cp-metrics span,
.cp-process-list article > span,
.cp-industry-list span,
.cp-preview > div:first-child > span,
.cp-price-grid mark,
.cp-price-grid article > span,
.cp-price-grid article > small {
  font-size: var(--type-label);
}

.cp-text-link { font-size: 0.8125rem; }

/* Teks di dalam mockup ilustrasi hero: dekoratif, cukup 11px supaya muat di bingkainya. */
.cp-browser-card span,
.cp-browser-card small,
.cp-hero-stamp { font-size: 0.6875rem; }

/* Halaman vertikal industri, studi kasus, karier, dan elemen editorial lain. */
.feature-list p,
.case-focus-list p { font-size: var(--type-support); line-height: var(--leading-support); }

.estimate p,
.industry-card b,
.jobs > a > small,
.article-author small,
.article-body aside a,
.case-study-meta dd { font-size: var(--type-meta-sm); }

.principle-grid span,
.service-num,
.feature-list article > span,
.values article > span,
.case-meta span,
.page-index span,
.industry-card > span,
.featured-article span,
.article-grid > a > span,
.article-body aside,
.jobs > a > span,
.article-author span,
.career-jobs > .section-head > span,
.hero-image-tag small,
.process-title > span,
.service-breadcrumb,
.service-signals span,
.service-outcome > span,
.founder-profile figcaption,
.industry-hero-art figcaption span,
.project-source small,
.project-source b,
.project-source .project-source-title,
.case-focus-list article > span,
.case-study-trail,
.case-study-index,
.case-section-label,
.case-study-cover figcaption,
.case-study-detail-visual figcaption,
.case-study-meta dt,
.case-study-next > span,
.page-hero-cover .btn {
  font-size: var(--type-label);
}

/* Tautan "Lihat karya terpilih" di hero beranda. */
.hero-image-v2 > a { font-size: 0.8125rem; }

/*
 * Keselarasan antarhalaman. Audit 53 halaman menemukan paragraf pembuka hero
 * dalam delapan ukuran berbeda (15–22px), judul yang jatuh ke Clash Grotesk
 * (font design system lama di global.css), dan aksen <em> yang sebagian masih
 * Georgia italic sementara sisanya Plus Jakarta berwarna.
 */

/* Paragraf pembuka di bawah judul hero, di semua template. */
.hero-copy > p,
.page-hero > div > p,
.hero-bottom > p,
.service-hero-copy > p,
.page-hero-cover .page-hero-cover-copy > p,
.article > header > p,
.article-body .lead,
.case-study-lead p,
.contact-intro > p,
.cp-hero-copy > p {
  font-size: var(--type-lead);
  line-height: 1.55;
}

/* Line-height dasar paragraf; aturan yang lebih spesifik tetap berlaku. */
main p { line-height: var(--leading-body); }

/* Sub-judul artikel harus jelas di atas paragraf 19px. */
.article-body h3 {
  font: 500 clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem)/1.25 var(--display);
  letter-spacing: -0.02em;
}

/* Aksen <em> dan kutipan: satu gaya, font display tegak berwarna. */
h2 em,
.team-gallery-intro h2 em,
.founder-profile h2 em {
  font-family: var(--display);
  font-style: normal;
  color: var(--blue);
}
.dark-manifesto h2 em { color: var(--lime); }
.problem-section blockquote,
.article-body blockquote {
  font-family: var(--display);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Paragraf pengantar section: satu gaya, 16–18px dengan line-height 1,65. */
.section-head > p,
.statement-foot > p,
.craft-copy > p,
.service-ai-craft > div > p,
.career-copy > div > p,
.story > div > p,
.founder-profile > div > p,
.team-gallery-intro > p,
.case-study-context > div > p,
.cp-preview > div > p {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

/* Dokumen legal: pembuka seperti hero, isi seperti bacaan panjang artikel. */
.legal-page > header > p { font-size: var(--type-lead); line-height: 1.55; }
.legal-content p,
.legal-content li { font-size: var(--type-article); line-height: 1.75; }

/* Teks bantuan di formulir karier (utility Tailwind). */
main p.text-xs { font-size: var(--type-meta-sm); }

/* Jarak judul ke paragraf pembuka di kontak, penawaran, dan lamaran karier
   (sebelumnya 0px; huruf menjuntai menyentuh paragraf). */
.contact-intro > :is(h1, h2) { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }

/*
 * Teks yang tampak "seperti pixel". Dua penyebab: kalimat yang di-set dalam
 * IBM Plex Mono (monospace, tampak seperti teks terminal), dan teks tebal di
 * label mono yang meminta 700 padahal IBM Plex Mono hanya punya berkas
 * 400/500, sehingga browser menebalkannya secara sintetis.
 */

/* Kalimat yang dibaca memakai font body; mono hanya untuk label kapital pendek,
   nomor, tombol, dan navigasi. */
.cp-dual li,
.cp-price-grid article > small,
.proof-copy small,
.case-live-link,
.project-source small {
  font-family: var(--ff-body);
  letter-spacing: normal;
}
.cp-dual li { font-size: var(--type-support); line-height: var(--leading-support); }
.cp-price-grid article > small,
.proof-copy small,
.case-live-link,
.project-source small { font-size: var(--type-meta-sm); }

/* Teks tebal di dalam label mono: 500 adalah berkas IBM Plex Mono paling tebal. */
.service-breadcrumb b,
.service-signals b,
.cp-proof-line b,
[class*="artifact"] b,
.eyebrow b,
.eyebrow strong { font-weight: 500; }

/* Aksen <em> di judul tegak, seragam dengan aksen judul lain (Plus Jakarta tidak punya berkas italic). */
:root :is(main, .final-cta) :is(h1, h2, h3, h4) em { font-style: normal; }