/* =============================================================================
   CLS — GABUNGAN: ARTIKEL KB + ARSIP KATEGORI PRODUK (satu berkas, satu snippet)
   adev.co.id · 24 Oktober 2026 · PM Orchestrator Agent

   Menggabungkan dua berkas sebelumnya:
     WPCODE-css-CLS-KB-20261024.css        (Bagian A + B)
     WPCODE-css-CLS-KATEGORI-20261024.css  (Bagian C)
   Cukup SATU snippet. Bila snippet "CLS — ARTIKEL KB (EKBP)" sudah aktif,
   GANTI ISI-nya dengan berkas ini (jangan tambah snippet baru agar tidak dobel).

   HASIL TERUKUR
     KB /panduan/label-kosmetik/ : CLS 0,231 -> 0,000 (perf 73 -> 88)  [A+B]
     Kategori facial-wash       : CLS 0,211 -> target < 0,1            [C]

   MEKANISME: font SISTEM pada area teks yang bergeser + kunci rasio 3 gambar
   hotlink KB. Header/menu/footer & halaman lain TETAP Lato. TANPA @font-face
   (blok @font-face tambahan terbukti justru memperbesar CLS).

   PASANG: ganti isi snippet -> Save -> Purge All + purge Cloudflare -> ukur 2x.
   ============================================================================= */

/* ============ BAGIAN A — KB: FONT SISTEM ============ */
body.single-epkb_post_type_1 h1,
body.single-epkb_post_type_1 .eckb-article-title,
body.single-epkb_post_type_1 #breadcrumbs,
body.single-epkb_post_type_1 #breadcrumbs a,
body.single-epkb_post_type_1 #breadcrumbs span,
body.single-epkb_post_type_1 #eckb-article-content-body,
body.single-epkb_post_type_1 #eckb-article-content-body p,
body.single-epkb_post_type_1 #eckb-article-content-body li,
body.single-epkb_post_type_1 #eckb-article-content-body h2,
body.single-epkb_post_type_1 #eckb-article-content-body h3,
body.single-epkb_post_type_1 #eckb-article-content-body h4,
body.single-epkb_post_type_1 #eckb-article-content-body td,
body.single-epkb_post_type_1 #eckb-article-content-body strong,
body.single-epkb_post_type_1 .eckb-article-content,
body.single-epkb_post_type_1 .eckb-article-content p {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ============ BAGIAN B — KB: KUNCI RASIO 3 GAMBAR HOTLINK ============ */
#eckb-article-content-body img[data-src*="FDk1mV3d4A1XiVzOWUpUVgcS0qg6BvPC0Oa7q36Vf7Z2f7c7mlK4Rim7P2"],
#eckb-article-content-body img[src*="FDk1mV3d4A1XiVzOWUpUVgcS0qg6BvPC0Oa7q36Vf7Z2f7c7mlK4Rim7P2"] {
  width: 100%;
  max-width: 527px;
  height: auto;
  aspect-ratio: 527 / 91;
}

#eckb-article-content-body img[data-src*="LXrzZlvgtppeMPhwTf943Z5ibKdeQqGEV32m7vKPcFvcOkxkbPO_O-e9a"],
#eckb-article-content-body img[src*="LXrzZlvgtppeMPhwTf943Z5ibKdeQqGEV32m7vKPcFvcOkxkbPO_O-e9a"] {
  width: 100%;
  max-width: 207px;
  height: auto;
  aspect-ratio: 207 / 32;
}

#eckb-article-content-body img[data-src*="JNfmfILXo3p3PmuFesY9W30ziN8jlnNhRzuws5WrpmP7Z-w4MUSU8y8IIF"],
#eckb-article-content-body img[src*="JNfmfILXo3p3PmuFesY9W30ziN8jlnNhRzuws5WrpmP7Z-w4MUSU8y8IIF"] {
  width: 100%;
  max-width: 425px;
  height: auto;
  aspect-ratio: 425 / 48;
}

#eckb-article-content-body img {
  height: auto;
  max-width: 100%;
}

/* ============ BAGIAN C — ARSIP KATEGORI: FONT SISTEM ============ */
body.tax-product_cat h1,
body.tax-product_cat #breadcrumbs,
body.tax-product_cat #breadcrumbs a,
body.tax-product_cat #breadcrumbs span,
body.tax-product_cat .term-description,
body.tax-product_cat .term-description p,
body.tax-product_cat .term-description li,
body.tax-product_cat .term-description h2,
body.tax-product_cat .term-description h3,
body.tax-product_cat h2,
body.tax-product_cat h3,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .price,
body.tax-product_cat ul.products li.product .woocommerce-Price-amount,
body.tax-product_cat .woocommerce-result-count,
body.tax-product_cat .woocommerce-ordering select {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Jangan menambahkan @font-face di sini. */

/* =============================================================================
   v1.8.7 — PERLUAS FONT SISTEM KE SELURUH HALAMAN ARSIP
   Dasar: audit PSI 24 Okt menemukan CLS 0,139 pada halaman TAG BLOG
   (/tag/pendidikan/) sementara kategori produk (yang sudah memakai font sistem)
   bernilai 0. Pola yang sama dengan temuan sebelumnya: metrik teks berubah saat
   font web selesai dimuat sehingga tinggi blok berubah.
   Cakupan: arsip tag, arsip author, arsip CPT, arsip tanggal, dan taksonomi
   EPKB. Halaman produk & kategori produk sudah ditangani di file terpisah.
   ============================================================================= */
body.tag h1,
body.tag h2,
body.tag h3,
body.tag h4,
body.tag h5,
body.tag h6,
body.tag p,
body.tag li,
body.tag a,
body.tag span,
body.tag td,
body.tag th,
body.tag strong,
body.tag time,
body.tag .elementor-heading-title,
body.tag .product-title,
body.tag .woocommerce-loop-product__title,
body.tag .price,
body.tag .woocommerce-Price-amount,
body.tag #breadcrumbs,
body.tag #breadcrumbs a,
body.tag #breadcrumbs span,
body.tag .page-title,
body.tag .archive-title,
body.tag .term-description,
body.tag .term-description p,
body.tag,
body.author h1,
body.author h2,
body.author h3,
body.author h4,
body.author h5,
body.author h6,
body.author p,
body.author li,
body.author a,
body.author span,
body.author td,
body.author th,
body.author strong,
body.author time,
body.author .elementor-heading-title,
body.author .product-title,
body.author .woocommerce-loop-product__title,
body.author .price,
body.author .woocommerce-Price-amount,
body.author #breadcrumbs,
body.author #breadcrumbs a,
body.author #breadcrumbs span,
body.author .page-title,
body.author .archive-title,
body.author .term-description,
body.author .term-description p,
body.author,
body.post-type-archive h1,
body.post-type-archive h2,
body.post-type-archive h3,
body.post-type-archive h4,
body.post-type-archive h5,
body.post-type-archive h6,
body.post-type-archive p,
body.post-type-archive li,
body.post-type-archive a,
body.post-type-archive span,
body.post-type-archive td,
body.post-type-archive th,
body.post-type-archive strong,
body.post-type-archive time,
body.post-type-archive .elementor-heading-title,
body.post-type-archive .product-title,
body.post-type-archive .woocommerce-loop-product__title,
body.post-type-archive .price,
body.post-type-archive .woocommerce-Price-amount,
body.post-type-archive #breadcrumbs,
body.post-type-archive #breadcrumbs a,
body.post-type-archive #breadcrumbs span,
body.post-type-archive .page-title,
body.post-type-archive .archive-title,
body.post-type-archive .term-description,
body.post-type-archive .term-description p,
body.post-type-archive,
body.date h1,
body.date h2,
body.date h3,
body.date h4,
body.date h5,
body.date h6,
body.date p,
body.date li,
body.date a,
body.date span,
body.date td,
body.date th,
body.date strong,
body.date time,
body.date .elementor-heading-title,
body.date .product-title,
body.date .woocommerce-loop-product__title,
body.date .price,
body.date .woocommerce-Price-amount,
body.date #breadcrumbs,
body.date #breadcrumbs a,
body.date #breadcrumbs span,
body.date .page-title,
body.date .archive-title,
body.date .term-description,
body.date .term-description p,
body.date,
body.tax-post_tag h1,
body.tax-post_tag h2,
body.tax-post_tag h3,
body.tax-post_tag h4,
body.tax-post_tag h5,
body.tax-post_tag h6,
body.tax-post_tag p,
body.tax-post_tag li,
body.tax-post_tag a,
body.tax-post_tag span,
body.tax-post_tag td,
body.tax-post_tag th,
body.tax-post_tag strong,
body.tax-post_tag time,
body.tax-post_tag .elementor-heading-title,
body.tax-post_tag .product-title,
body.tax-post_tag .woocommerce-loop-product__title,
body.tax-post_tag .price,
body.tax-post_tag .woocommerce-Price-amount,
body.tax-post_tag #breadcrumbs,
body.tax-post_tag #breadcrumbs a,
body.tax-post_tag #breadcrumbs span,
body.tax-post_tag .page-title,
body.tax-post_tag .archive-title,
body.tax-post_tag .term-description,
body.tax-post_tag .term-description p,
body.tax-post_tag,
body.tax-post_format h1,
body.tax-post_format h2,
body.tax-post_format h3,
body.tax-post_format h4,
body.tax-post_format h5,
body.tax-post_format h6,
body.tax-post_format p,
body.tax-post_format li,
body.tax-post_format a,
body.tax-post_format span,
body.tax-post_format td,
body.tax-post_format th,
body.tax-post_format strong,
body.tax-post_format time,
body.tax-post_format .elementor-heading-title,
body.tax-post_format .product-title,
body.tax-post_format .woocommerce-loop-product__title,
body.tax-post_format .price,
body.tax-post_format .woocommerce-Price-amount,
body.tax-post_format #breadcrumbs,
body.tax-post_format #breadcrumbs a,
body.tax-post_format #breadcrumbs span,
body.tax-post_format .page-title,
body.tax-post_format .archive-title,
body.tax-post_format .term-description,
body.tax-post_format .term-description p,
body.tax-post_format,
body.tax-epkb_post_tag h1,
body.tax-epkb_post_tag h2,
body.tax-epkb_post_tag h3,
body.tax-epkb_post_tag h4,
body.tax-epkb_post_tag h5,
body.tax-epkb_post_tag h6,
body.tax-epkb_post_tag p,
body.tax-epkb_post_tag li,
body.tax-epkb_post_tag a,
body.tax-epkb_post_tag span,
body.tax-epkb_post_tag td,
body.tax-epkb_post_tag th,
body.tax-epkb_post_tag strong,
body.tax-epkb_post_tag time,
body.tax-epkb_post_tag .elementor-heading-title,
body.tax-epkb_post_tag .product-title,
body.tax-epkb_post_tag .woocommerce-loop-product__title,
body.tax-epkb_post_tag .price,
body.tax-epkb_post_tag .woocommerce-Price-amount,
body.tax-epkb_post_tag #breadcrumbs,
body.tax-epkb_post_tag #breadcrumbs a,
body.tax-epkb_post_tag #breadcrumbs span,
body.tax-epkb_post_tag .page-title,
body.tax-epkb_post_tag .archive-title,
body.tax-epkb_post_tag .term-description,
body.tax-epkb_post_tag .term-description p,
body.tax-epkb_post_tag,
body.tax-epkb_post_category h1,
body.tax-epkb_post_category h2,
body.tax-epkb_post_category h3,
body.tax-epkb_post_category h4,
body.tax-epkb_post_category h5,
body.tax-epkb_post_category h6,
body.tax-epkb_post_category p,
body.tax-epkb_post_category li,
body.tax-epkb_post_category a,
body.tax-epkb_post_category span,
body.tax-epkb_post_category td,
body.tax-epkb_post_category th,
body.tax-epkb_post_category strong,
body.tax-epkb_post_category time,
body.tax-epkb_post_category .elementor-heading-title,
body.tax-epkb_post_category .product-title,
body.tax-epkb_post_category .woocommerce-loop-product__title,
body.tax-epkb_post_category .price,
body.tax-epkb_post_category .woocommerce-Price-amount,
body.tax-epkb_post_category #breadcrumbs,
body.tax-epkb_post_category #breadcrumbs a,
body.tax-epkb_post_category #breadcrumbs span,
body.tax-epkb_post_category .page-title,
body.tax-epkb_post_category .archive-title,
body.tax-epkb_post_category .term-description,
body.tax-epkb_post_category .term-description p,
body.tax-epkb_post_category,
body.archive:not(.tax-product_cat) h1,
body.archive:not(.tax-product_cat) h2,
body.archive:not(.tax-product_cat) h3,
body.archive:not(.tax-product_cat) h4,
body.archive:not(.tax-product_cat) h5,
body.archive:not(.tax-product_cat) h6,
body.archive:not(.tax-product_cat) p,
body.archive:not(.tax-product_cat) li,
body.archive:not(.tax-product_cat) a,
body.archive:not(.tax-product_cat) span,
body.archive:not(.tax-product_cat) td,
body.archive:not(.tax-product_cat) th,
body.archive:not(.tax-product_cat) strong,
body.archive:not(.tax-product_cat) time,
body.archive:not(.tax-product_cat) .elementor-heading-title,
body.archive:not(.tax-product_cat) .product-title,
body.archive:not(.tax-product_cat) .woocommerce-loop-product__title,
body.archive:not(.tax-product_cat) .price,
body.archive:not(.tax-product_cat) .woocommerce-Price-amount,
body.archive:not(.tax-product_cat) #breadcrumbs,
body.archive:not(.tax-product_cat) #breadcrumbs a,
body.archive:not(.tax-product_cat) #breadcrumbs span,
body.archive:not(.tax-product_cat) .page-title,
body.archive:not(.tax-product_cat) .archive-title,
body.archive:not(.tax-product_cat) .term-description,
body.archive:not(.tax-product_cat) .term-description p,
body.archive:not(.tax-product_cat) {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* =============================================================================
   v1.8.8 — kartu Elementor di arsip: kunci rasio thumbnail (penyebab CLS 0,128)
   Cause dari Lighthouse: "Media element lacking an explicit size" pada
   a.elementor-post__thumbnail__link. Dengan rasio tetap, tinggi kartu tidak
   berubah saat gambar selesai dimuat.
   ============================================================================= */
body.tag .elementor-post__thumbnail,
body.author .elementor-post__thumbnail,
body.post-type-archive .elementor-post__thumbnail,
body.date .elementor-post__thumbnail,
body.tax-post_tag .elementor-post__thumbnail,
body.tax-epkb_post_tag .elementor-post__thumbnail,
body.tax-epkb_post_category .elementor-post__thumbnail,
body.archive:not(.tax-product_cat) .elementor-post__thumbnail {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	display: block;
}
body.tag .elementor-post__thumbnail img,
body.author .elementor-post__thumbnail img,
body.post-type-archive .elementor-post__thumbnail img,
body.date .elementor-post__thumbnail img,
body.tax-post_tag .elementor-post__thumbnail img,
body.tax-epkb_post_tag .elementor-post__thumbnail img,
body.tax-epkb_post_category .elementor-post__thumbnail img,
body.archive:not(.tax-product_cat) .elementor-post__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
