/*
Theme Name: Terbitan
Theme URI: https://velocitydeveloper.com/
Author: Velocity Developer
Author URI: https://velocitydeveloper.com/
Description: Tema portal berita Terbitan.com (block theme). Beranda, kategori, artikel, E-Koran, dan halaman Semua Kategori ala inewsindonesia.id. Membutuhkan plugin Velocity Blocks.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.10
License: GPLv2 or later
Text Domain: velocity-fse
*/

/*
 * Gaya yang belum bisa diungkapkan di theme.json. Warna SELALU lewat preset
 * (--wp--preset--color--*): palet per klien ditulis installer ke
 * wp_global_styles, jadi kode hex di berkas ini tidak akan ikut berubah.
 * Kelas berawalan vf- dipasang di templates/, parts/, dan isi halaman buatan
 * scripts/fse-apply.
 */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img { height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header, isi, dan footer saling menempel: blockGap global tidak boleh menyisakan pita putih. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- baris atas (blok velocity/topbar) ---------- */

.vf-topbar {
  background: var(--wp--preset--color--primary-gelap);
  color: var(--wp--preset--color--di-primary);
  font-size: .8rem;
}
.vf-topbar__isi {
  box-sizing: content-box;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--wp--style--global--wide-size, 1400px);
  margin-inline: auto;
  padding: .35rem var(--wp--style--root--padding-right, 1.25rem);
}
.vf-topbar__slogan { display: none; }

/* ---------- header ---------- */

.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 60; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
}
.vf-header { box-shadow: 0 2px 14px rgba(0, 0, 0, .12); }
/* Referensi tanpa garis/bayangan di bawah header. */
.vf-header-tanpa-garis .vf-header { box-shadow: none; border-bottom: 0; }

/* ---- Wadah tetap (vf-wadah-tetap) --------------------------------------------
   Referensi bukan situs "full width": isinya kotak selebar wadah (1320px di
   northseaaconsulting.com) dengan sudut kartu, bukan pita selebar layar. Header
   tetap selebar layar karena memang begitu di referensi. (Permintaan user 2026-09-18) */
.vf-ref.vf-wadah-tetap .wp-block-post-content > .alignfull:not(.vf-header),
.vf-ref.vf-wadah-tetap .wp-site-blocks > .alignfull:not(.vf-header):not(.wp-block-template-part),
.vf-ref.vf-wadah-tetap .vf-footer {
  max-width: min(var(--vf-wadah, 1320px), calc(100% - 2 * var(--wp--style--root--padding-right, 24px)));
  margin-inline: auto;
  border-radius: var(--vf-kartu-radius, 15px);
  overflow: hidden;
}
/* Hero berfoto ikut menjadi kotak bersudut, seperti banner referensi. */
.vf-ref.vf-wadah-tetap .vf-ref-hero { border-radius: var(--vf-kartu-radius, 15px); overflow: hidden; }
/* Blok gambar & sampul: sudut kartu yang sama. */
.vf-ref.vf-wadah-tetap :is(.wp-block-image img, .wp-block-image, .wp-block-cover, .vf-kartu img) {
  border-radius: var(--vf-kartu-radius, 15px);
}
/* Jarak antara header, kotak-kotak isi, dan footer: tanpa ini kartu-kartu menempel
   ke header dan footer menempel ke dasar layar (permintaan user 2026-09-18). */
.vf-ref.vf-wadah-tetap .vf-header { margin-bottom: var(--vf-wadah-jarak, 24px); }
/* Tombol WhatsApp mengambang (velocity-addons: fixed kanan-bawah, tinggi ±50px, 8px dari
   bawah) sempat menutupi "Design by" di baris bawah footer (solusicerdasconsulting.com
   2026-09-19). Ruang 58px disediakan hanya bila tombolnya ada:
   - footer selebar layar: ditambahkan di DALAM footer (padding bawah);
   - wadah tetap (footer berupa kartu): jarak di BAWAH kartu, jadi tombol melayang di
     ruang kosong di bawah kartu, tidak di atas teksnya. */
body:has(.whatsapp-floating) .vf-footer {
  padding-bottom: calc(var(--wp--preset--spacing--40) + 58px) !important;
}
body.vf-ref.vf-wadah-tetap:has(.whatsapp-floating) .vf-footer {
  padding-bottom: var(--wp--preset--spacing--40) !important;
  /* +24px (bukan 58px penuh, user: "terlalu lebar"): cukup supaya tombol berhenti di
     bawah baris teks terakhir — boleh sedikit menimpa ruang kosong kartu. */
  margin-bottom: calc(var(--vf-wadah-jarak, 24px) + 24px);
}
/* Blok pertama sesudah header kadang punya margin-top negatif/0 dari core; pastikan
   jaraknya tetap terlihat. */
.vf-ref.vf-wadah-tetap .wp-site-blocks > :nth-child(2) { margin-top: var(--vf-wadah-jarak, 24px) !important; }
.vf-ref.vf-wadah-tetap .vf-footer { margin-top: var(--vf-wadah-jarak, 24px); margin-bottom: var(--vf-wadah-jarak, 24px); }
/* Banner judul halaman dalam ikut jadi kartu selebar wadah, bukan pita selebar layar. */
.vf-ref.vf-wadah-tetap .vf-judul-halaman {
  max-width: min(var(--vf-wadah, 1320px), calc(100% - 2 * var(--wp--style--root--padding-right, 24px)));
  margin-inline: auto;
  border-radius: var(--vf-kartu-radius, 15px);
  overflow: hidden;
}
/* ---- Kartu kontak berikon (halaman Hubungi Kami) -----------------------------
   Satu kartu per jenis kontak dengan ikon sesuai jenisnya (permintaan user
   2026-09-18: "tampilan lebih modern"). Footer tetap memakai daftar biasa. */
.vf-kontak-kartu {
  /* Kartu berlebar sama (user 2026-09-19: grid lama berantakan karena kartu alamat
     selebar dua kolom). Isi tiap kartu bertumpuk: ikon, judul, lalu isi. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
  margin-block: 1.5rem;
}
@media (max-width: 1024px) { .vf-kontak-kartu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .vf-kontak-kartu { grid-template-columns: 1fr; } }
.vf-kontak-kartu__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  min-width: 0;
  padding: 1.4rem 1.35rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: var(--vf-kartu-radius, 15px);
  background: var(--wp--preset--color--putih);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vf-kontak-kartu__item:hover {
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
}
.vf-kontak-kartu__ikon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: .35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
  color: var(--wp--preset--color--primary);
}
.vf-kontak-kartu__ikon svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.vf-kontak-kartu__item--whatsapp .vf-kontak-kartu__ikon {
  background: color-mix(in srgb, var(--wp--preset--color--aksen) 16%, transparent);
  color: var(--wp--preset--color--aksen);
}
.vf-kontak-kartu__judul {
  color: var(--wp--preset--color--abu);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Email & alamat panjang dipatahkan di dalam kartu, bukan meluber keluar. */
.vf-kontak-kartu__isi { color: var(--wp--preset--color--teks); line-height: 1.55; overflow-wrap: anywhere; }
.vf-kontak-kartu__isi a { color: inherit; text-decoration: none; }
.vf-kontak-kartu__isi a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }

/* ---- Kartu Ikon (velocity/kartu-ikon) -------------------------------------------
   Varian "kartu" memakai gaya .vf-kontak-kartu__item di atas; susunan kolomnya diatur
   blok Group (layout Grid) pembungkusnya, jadi jumlah kolom bisa diubah klien sendiri
   di panel blok. Varian "baris" untuk footer: ikon kecil di kiri, ikut warna footer. */
.vf-kartu-ikon { box-sizing: border-box; }
.vf-kartu-ikon--baris {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0 0 .85rem !important;
  color: inherit;
  font-size: .92rem;
}
.vf-kartu-ikon--baris .vf-kontak-kartu__ikon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
}
.vf-kartu-ikon--baris .vf-kontak-kartu__ikon svg { width: 1rem; height: 1rem; fill: currentColor; }
.vf-kartu-ikon__teks { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.vf-kartu-ikon--baris .vf-kontak-kartu__judul {
  color: inherit;
  opacity: .7;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vf-kartu-ikon--baris .vf-kontak-kartu__isi { color: inherit; line-height: 1.5; overflow-wrap: anywhere; }
.vf-kartu-ikon--baris .vf-kontak-kartu__isi a { color: inherit; text-decoration: none; }
.vf-kartu-ikon--baris .vf-kontak-kartu__isi a:hover { text-decoration: underline; }
/* Grid kartu kontak (Group layout Grid): kartu sama tinggi. */
.vf-kontak-grid { align-items: stretch; margin-block: 1.5rem; }
.vf-kontak-grid > .vf-kartu-ikon { height: 100%; }

/* ---- Halaman artikel (single) ------------------------------------------------
   Permintaan user 2026-09-18: wadah 960px, tanpa sidebar, tanpa kartu judul.
   Urutan: tombol kembali > judul > meta (kategori, tanggal | ikon bagikan) >
   foto utama > isi > "Baca Juga". */
main.vf-artikel,
.vf-ref.vf-wadah-tetap main.vf-artikel {
  --wp--style--global--content-size: min(960px, calc(100% - 2 * var(--wp--style--root--padding-right, 24px)));
  --wp--style--global--wide-size: min(960px, calc(100% - 2 * var(--wp--style--root--padding-right, 24px)));
}
.vf-artikel__balik { margin-bottom: .9rem !important; font-size: .95rem; }
.vf-artikel__balik a { color: var(--wp--preset--color--teks); text-decoration: none; font-weight: 600; }
.vf-artikel__balik a:hover { color: var(--wp--preset--color--primary); }
.vf-artikel .vf-artikel__judul { margin-bottom: .8rem !important; }
.vf-artikel__meta {
  gap: 1rem 1.5rem;
  align-items: center;
  margin-bottom: 1.4rem !important;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wp--preset--color--garis);
}
.vf-artikel__meta-kiri { gap: .6rem .9rem; align-items: center; }
.vf-artikel__meta .vf-artikel__tanggal { margin: 0 !important; color: var(--wp--preset--color--abu); font-size: .93rem; }
.vf-bagikan { display: flex; align-items: center; gap: .5rem; }
.vf-bagikan__label { color: var(--wp--preset--color--abu); font-size: .85rem; }
.vf-bagikan__ikon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: 999px;
  color: var(--wp--preset--color--teks);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vf-bagikan__ikon svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.vf-bagikan__ikon:hover { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--di-primary); }
.vf-artikel .vf-artikel__foto { margin-bottom: 1.6rem; }
.vf-artikel .vf-terkait { margin-top: 3rem; }

/* Blok alignwide ikut lebar wadah (bawaan tema 1400px) supaya artikel & sidebar
   sejajar dengan seksi beranda. */
.vf-ref.vf-wadah-tetap .alignwide:not(main.vf-artikel .alignwide) {
  max-width: min(var(--vf-wadah, 1320px),
    calc(100% - 2 * var(--wp--style--root--padding-right, 24px)));
  margin-inline: auto;
}
/* Sudut kartu yang sama untuk kotak sidebar & "Baca Juga" di halaman artikel. */
.vf-ref.vf-wadah-tetap :is(.vf-samping .vf-kotak, .vf-terkait, .vf-artikel__foto img, .vf-kartu img) {
  border-radius: var(--vf-kartu-radius, 15px);
}
/* Isi halaman dalam selebar wadah yang sama dengan beranda (bawaan tema 760px). */
.vf-ref.vf-wadah-tetap main.wp-block-group:not(.vf-artikel),
.vf-ref.vf-wadah-tetap main:not(.vf-artikel) .wp-block-post-content {
  --wp--style--global--content-size: min(var(--vf-wadah, 1320px),
    calc(100% - 2 * var(--wp--style--root--padding-right, 24px)));
}

@media (max-width: 781px) {
  /* Di layar kecil sisakan tepi 16px saja — wadah 1320px + padding bawaan membuat
     kotaknya terlalu menjorok (solusicerdasconsulting.com 2026-09-18). */
  .vf-ref.vf-wadah-tetap .wp-block-post-content > .alignfull:not(.vf-header),
  .vf-ref.vf-wadah-tetap .wp-site-blocks > .alignfull:not(.vf-header):not(.wp-block-template-part),
  .vf-ref.vf-wadah-tetap .vf-footer,
  .vf-ref.vf-wadah-tetap .vf-judul-halaman {
    max-width: calc(100% - 32px);
    border-radius: var(--vf-kartu-radius, 15px);
  }
  .vf-ref.vf-wadah-tetap :is(.vf-header, .vf-footer) { --vf-wadah-jarak: 16px; }
}
/* Hero dua kolom ikut referensi: judul kiri, keterangan & tombol kanan; menumpuk di HP. */
.vf-ref-hero__baris { align-items: flex-end; gap: 2.5rem; width: 100%; }
@media (max-width: 781px) { .vf-ref-hero__baris { gap: 1rem; } }
.vf-header__bar { gap: 1.2rem; }
/* Logo umumnya bertulisan gelap; tanpa alas putih tidak terbaca di header berwarna. */
.vf-header .wp-block-site-logo a {
  display: inline-flex;
  padding: .45rem .8rem;
  border-radius: 10px;
  background: var(--wp--preset--color--putih);
}
/* Batas lebar & tinggi sekaligus supaya ukurannya ikut bentuk logo: wordmark
   memanjang tetap ~46px seperti sebelumnya (tertahan lebar), sedangkan logo
   bertumpuk (gambar di atas tulisan) boleh lebih tinggi agar tulisannya terbaca
   — solusicerdasconsulting.com, 2026-09-18. */
.vf-header .wp-block-site-logo img {
  width: auto; height: auto; max-height: 64px; max-width: 170px; object-fit: contain;
}
/* Nama situs hanya tampil kalau logo belum dipasang (blok logo tidak mencetak apa pun). */
.vf-header .wp-block-site-logo + .vf-nama-situs { display: none; }
.vf-nama-situs { margin: 0; font-size: 1.2rem; font-weight: 800; }
.vf-nav { margin-left: auto; }
.vf-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--aksen-di-primary); }
.vf-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 2rem 1.5rem; }
.vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1rem; }

@media (max-width: 781px) {
  /* !important: .wp-block-buttons{display:flex} bawaan core dimuat sesudah tema. */
  .vf-header__aksi { display: none !important; }
}
@media (min-width: 782px) {
  .vf-topbar__slogan { display: inline; }
}

/* ---------- judul bar rubrik / seksi ---------- */

.vf-rubrik-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end !important;
  gap: 1rem;
  margin-bottom: 1.1rem !important;
  border-bottom: 3px solid var(--wp--preset--color--primary);
}
.vf-rubrik-bar h1,
.vf-rubrik-bar h2 {
  margin: 0;
  padding: .4rem .95rem;
  border-radius: 6px 6px 0 0;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--di-primary);
  font-size: .95rem;
  line-height: 1.4;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.vf-rubrik-bar h1 { font-size: 1.15rem; }
.vf-rubrik-bar p { margin: 0; padding-bottom: .35rem; font-size: .85rem; font-weight: 700; }
.vf-rubrik-bar p a { color: var(--wp--preset--color--aksen-teks); text-decoration: none; }
.vf-rubrik-bar p a:hover { text-decoration: underline; }

/* ---------- label kategori (post-terms) ---------- */

.vf-label { margin: 0 0 .45rem; line-height: 1; }
.vf-label a {
  display: inline-block;
  padding: .22rem .55rem;
  border-radius: 4px;
  background: var(--wp--preset--color--aksen);
  color: var(--wp--preset--color--di-aksen) !important;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none !important;
  text-transform: uppercase;
}
/* Satu label cukup: artikel dengan beberapa kategori tidak memanjangkan kartu. */
.vf-label a ~ a,
.vf-label .wp-block-post-terms__separator { display: none; }

/* ---------- kartu berita ---------- */

.wp-block-post-date { font-size: .8rem; }
.vf-kartu .wp-block-post-featured-image,
.vf-daftar .wp-block-post-featured-image,
.vf-utama .wp-block-post-featured-image { margin: 0; overflow: hidden; border-radius: 10px; background: var(--wp--preset--color--latar); }
.vf-kartu .wp-block-post-featured-image img,
.vf-daftar .wp-block-post-featured-image img,
.vf-utama .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.vf-kartu li:hover .wp-block-post-featured-image img,
.vf-daftar li:hover .wp-block-post-featured-image img,
.vf-utama li:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.vf-kartu .wp-block-post-featured-image { margin-bottom: .75rem; }
.vf-kartu .wp-block-post-title { margin: .45rem 0 .3rem; font-size: 1.02rem; line-height: 1.35; }
.vf-kartu .wp-block-post-date { margin: 0; }

.vf-daftar { display: grid; gap: .95rem; }
.vf-daftar > li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: .85rem; align-items: start; margin: 0; }
/* Artikel tanpa foto utama: blok foto tidak mencetak apa pun, teks mengisi penuh. */
.vf-daftar > li:not(:has(.wp-block-post-featured-image)) { grid-template-columns: minmax(0, 1fr); }
.vf-daftar .wp-block-post-featured-image { border-radius: 8px; }
.vf-daftar .wp-block-post-title { margin: 0 0 .3rem; font-size: .93rem; line-height: 1.35; }
.vf-daftar .wp-block-post-date { margin: 0; }
.vf-daftar__teks > * { margin-block: 0; }

.vf-utama__kartu {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-gelap));
}
.vf-utama .wp-block-post-featured-image { border-radius: 12px; }
.vf-utama__teks {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3.5rem 1.2rem 1.1rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .86));
  color: #fff;
}
.vf-utama__teks > * { margin-block: 0; }
.vf-utama__teks .wp-block-post-title { margin: .35rem 0; font-size: clamp(1.2rem, 3.6vw, 1.95rem); line-height: 1.25; }
.vf-utama__teks .wp-block-post-title a,
.vf-utama__teks .wp-block-post-date,
.vf-utama__teks .wp-block-post-excerpt { color: #fff; }
.vf-utama__teks .wp-block-post-excerpt { margin-top: .4rem; font-size: .92rem; opacity: .9; }
.vf-utama__teks .wp-block-post-excerpt__excerpt { margin: 0; }

/* ---------- tata letak isi + kolom samping ---------- */

.vf-tata { gap: 2.5rem; }
.vf-tata > .wp-block-column { min-width: 0; }
.vf-seksi { margin-block: 0 2.4rem !important; }
.vf-utama-baris { gap: 1.1rem; margin-bottom: 2rem !important; }

.vf-samping { display: grid; gap: 1.5rem; }
.vf-samping > * { margin: 0 !important; }
.vf-kotak {
  padding: 1rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: 10px;
  background: var(--wp--preset--color--putih);
}
.vf-kotak > * + * { margin-block-start: .8rem; }
.vf-kotak p { font-size: .92rem; }

.vf-populer { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; counter-reset: populer; }
.vf-populer li { display: grid; grid-template-columns: 2rem 1fr; gap: .55rem; align-items: start; counter-increment: populer; }
.vf-populer li::before { content: counter(populer); color: var(--wp--preset--color--aksen-teks); font-size: 1.45rem; font-weight: 800; line-height: 1; }
.vf-populer a { color: var(--wp--preset--color--ink); font-size: .9rem; font-weight: 700; line-height: 1.35; text-decoration: none; }
.vf-populer a:hover { color: var(--wp--preset--color--aksen-teks); }

.vf-daftar-rubrik { margin: 0; padding: 0; list-style: none; }
.vf-daftar-rubrik li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--wp--preset--color--garis); }
.vf-daftar-rubrik a { color: var(--wp--preset--color--ink); font-weight: 600; text-decoration: none; }
.vf-daftar-rubrik a:hover { color: var(--wp--preset--color--aksen-teks); }

@media (min-width: 782px) {
  .vf-samping { position: sticky; top: 130px; }
}

/* ---------- halaman & artikel ---------- */

.vf-judul-halaman .wp-block-post-title { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.vf-artikel__judul { margin: .5rem 0 .4rem; font-size: clamp(1.5rem, 4.6vw, 2.35rem) !important; line-height: 1.25; }
.vf-artikel__tanggal { margin: 0 0 1.1rem; }
.vf-artikel__foto { margin: 0 0 1.3rem; overflow: hidden; border-radius: 12px; }
.vf-artikel__foto img { display: block; width: 100%; }
.vf-artikel__isi { font-size: 1.05rem; }
.vf-terkait { margin-top: 2.6rem !important; }
.wp-block-query-pagination { margin-top: 2rem; gap: .4rem; }
.wp-block-query-pagination-numbers .page-numbers {
  display: inline-block;
  min-width: 2.2rem;
  padding: .35rem .5rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
}
.wp-block-query-pagination-numbers .page-numbers.current { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--di-primary); }

/* ---------- beranda perusahaan ---------- */

.vf-hero { background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-gelap)); }
/* Hero menempel ke header: batalkan jarak atas <main> di template front-page. */
.wp-block-post-content > .vf-hero:first-child { margin-top: calc(-1 * var(--wp--preset--spacing--40)) !important; }
.vf-hero h1 { color: inherit; }
.vf-hero p { font-size: 1.1rem; opacity: .92; }
.vf-hero__poin { padding-left: 1.2rem; }
.vf-kartu-isi { height: 100%; }
.vf-kartu-isi h3 { margin-top: 0; font-size: 1.15rem; }
.vf-langkah { counter-reset: langkah; flex-wrap: wrap !important; }
/* Lima langkah di kolom konten 760px: judul ukuran h3 tema (1.6rem+) memotong kata
   di tengah ("Sampaika/n", glcagro.com 2026-09-15). Kolom boleh turun baris. */
.vf-langkah > .wp-block-column { counter-increment: langkah; flex: 1 1 9rem !important; min-width: 0; }
.vf-langkah h3 { margin-top: 0; font-size: 1.05rem; line-height: 1.3; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.vf-langkah > .wp-block-column::before {
  content: counter(langkah);
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: .6rem;
  border-radius: 50%;
  background: var(--wp--preset--color--aksen);
  color: var(--wp--preset--color--di-aksen);
  font-weight: 800;
}
.vf-ajakan { border-radius: 14px; }
.vf-ajakan h2 { color: inherit; }

/* ---------- kontak & form (blok velocity/kontak, velocity/form-kirim) ---------- */

.vf-kontak { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.vf-kontak li { margin: 0; }
.vf-kontak span { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .05em; opacity: .75; text-transform: uppercase; }

.vf-form {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: 12px;
  background: var(--wp--preset--color--putih);
}
.vf-form__baris { display: grid; gap: .35rem; margin: 0; }
.vf-form label { color: var(--wp--preset--color--ink); font-size: .85rem; font-weight: 700; }
.vf-form label span { color: #b42318; }
.vf-form__bantuan { color: var(--wp--preset--color--abu); font-size: .8rem; margin-top: -.2rem; }
.vf-form input:not([type="submit"]),
.vf-form select,
.vf-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: 8px;
  background: #fff;
  color: var(--wp--preset--color--ink);
  font: inherit;
}
.vf-form input:focus,
.vf-form select:focus,
.vf-form textarea:focus { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; }
.vf-form__jebakan { position: absolute !important; left: -9999px; }
.vf-form__kirim { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 0; }
.vf-form__kirim button,
.vf-form__kirim input[type="submit"] { cursor: pointer; border: 0; width: auto; }
/* Contact Form 7: markup .vf-form di dalam form CF7 (inc/cf7.php). */
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 .wpcf7-not-valid-tip { margin-top: .3rem; color: #b42318; font-size: .8rem; font-weight: 600; }
.wpcf7 .vf-form input.wpcf7-not-valid,
.wpcf7 .vf-form select.wpcf7-not-valid,
.wpcf7 .vf-form textarea.wpcf7-not-valid { border-color: #b42318; }
.wpcf7 .wpcf7-spinner { margin: 0; }
.wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 8px; border-width: 1px; font-size: .9rem; }
.wpcf7 form.sent .wpcf7-response-output { background: #e8f6ee; border-color: #86c79f; color: #14532d; }
.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output { background: #fdecec; border-color: #f1a9a9; color: #7f1d1d; }
.vf-form__catatan { margin: 0; font-size: .8rem; color: var(--wp--preset--color--abu); }
.vf-notif { margin: 0; padding: .8rem 1rem; border-radius: 8px; }
.vf-notif--ok { background: #e8f6ee; color: #14532d; }
.vf-notif--gagal { background: #fdecec; color: #7f1d1d; }
@media (min-width: 640px) {
  .vf-form { grid-template-columns: 1fr 1fr; }
  .vf-form__penuh { grid-column: 1 / -1; }
}

/* ---------- footer ---------- */

.vf-footer h1, .vf-footer h2, .vf-footer h3, .vf-footer h4 { color: inherit; }
.vf-footer__nama { margin: 0 0 .6rem; font-size: 1.25rem; font-weight: 800; }
.vf-footer__teks { font-size: .92rem; opacity: .88; }
.vf-footer__judul { margin: 0 0 .8rem; font-size: .95rem !important; letter-spacing: .06em; text-transform: uppercase; }
.vf-footer__menu .wp-block-navigation__container { gap: .45rem; }
.vf-footer .vf-kontak { font-size: .92rem; }
/* Ikon media sosial (aturan user 2026-09-14): ikon saja, ikut warna teks sekitarnya. */
.vf-sosmed.wp-block-social-links { gap: .9rem; margin-top: 1rem; font-size: 1.35rem; }
.vf-sosmed .wp-social-link { color: inherit; }
.vf-sosmed .wp-social-link a { color: inherit !important; padding: 0; }
.vf-sosmed .wp-social-link:hover { transform: translateY(-2px); opacity: .85; }
.wp-block-post-content .vf-sosmed { color: var(--wp--preset--color--primary); }
.vf-footer__bawah {
  gap: .35em;
  margin-top: 2rem !important;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  font-size: .85rem;
}
.vf-footer__bawah p { margin: 0; }
.vf-footer a { text-decoration: none; }
.vf-footer a:hover { text-decoration: underline; }

/* ---------- statistik pengunjung di footer (aturan user 2026-09-15 & 2026-09-16) ----------
   Letaknya SATU KOLOM footer sejajar kolom Menu, judul memakai gaya judul kolom footer,
   dan isinya CUKUP LIST saja (label + angka) — tanpa ikon, kotak, atau pita selebar footer.
   Markup [velocity-statistics style="list"] memakai kelas Bootstrap (list-group, d-flex,
   fw-bold) yang tidak dimuat tema blok, jadi daftarnya ditata di sini. Versi plugin lama
   mencetak <div> per baris, versi baru <li>. */

.vf-statistik > * { margin-block: 0 !important; }
.vf-statistik .wp-block-shortcode { margin-top: .9rem !important; }
/* Blok shortcode tercetak tanpa pembungkus, jadi jarak judul → daftar diberi di judulnya (sama dengan kolom Kontak). */
.vf-statistik > .vf-footer__judul { margin-bottom: .8rem !important; }
.vf-statistik:not(:has(.velocity-list-stats)) { display: none; }
/* Seragam dengan daftar lain di footer (kolom Menu): tanpa kotak, garis, atau selang-seling
   — permintaan user 2026-09-18. Jarak & ukuran huruf sama dengan .vf-footer__daftar. */
.vf-statistik .velocity-list-stats { list-style: none; display: grid; gap: .45rem; margin: 0; padding-left: 0; }
.vf-statistik .velocity-list-stats > li,
.vf-statistik .velocity-list-stats > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: .92rem;
}
.vf-statistik .velocity-list-stats > li > span:first-child,
.vf-statistik .velocity-list-stats > div > span:first-child { opacity: .85; }
.vf-statistik .velocity-list-stats .fw-bold { font-weight: 800; color: var(--wp--preset--color--aksen-di-primary); }

.vf-tampilan-2.vf-footer-gelap .vf-statistik .velocity-list-stats .fw-bold { color: var(--wp--preset--color--aksen-di-primary); }

/* ---------- gaya beranda perusahaan "korporat" & "terbelah" ----------
   Dipilih scripts/fse-apply dari screenshot beranda referensi klien: hero berfoto
   gelap -> korporat, hero terang -> terbelah. Pola dari referensi antrean Paket G
   2026-09-15. Cadangan bila referensi gagal diukur; situs berreferensi memakai body.vf-ref
   (bagian "desain mengikuti referensi web klien" di akhir berkas). */

:is(.vf-gaya-korporat, .vf-gaya-terbelah) .vf-topbar { display: none; }
:is(.vf-gaya-korporat, .vf-gaya-terbelah) .vf-header {
  background: var(--wp--preset--color--putih) !important;
  color: var(--wp--preset--color--ink) !important;
  box-shadow: 0 1px 0 var(--wp--preset--color--garis), 0 8px 24px rgba(15, 23, 42, .06);
}
:is(.vf-gaya-korporat, .vf-gaya-terbelah) .vf-header a:where(:not(.wp-element-button)),
:is(.vf-gaya-korporat, .vf-gaya-terbelah) .vf-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); }
:is(.vf-gaya-korporat, .vf-gaya-terbelah) .vf-nav .current-menu-item > .wp-block-navigation-item__content,
:is(.vf-gaya-korporat, .vf-gaya-terbelah) .vf-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--aksen-teks); }
:is(.vf-gaya-korporat, .vf-gaya-terbelah) .vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--di-primary); }
:is(.vf-gaya-korporat, .vf-gaya-terbelah) .vf-header .wp-block-site-logo a { padding: 0; background: transparent; }
/* Beranda ditutup pita ajakan selebar layar: tanpa jarak putih sebelum footer. */
:is(.vf-gaya-korporat, .vf-gaya-terbelah).home main.wp-block-group { padding-bottom: 0 !important; }

.vf-label-seksi { margin-bottom: .4rem !important; color: var(--wp--preset--color--aksen-teks); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.vf-kepala-seksi { max-width: 720px; margin-inline: auto !important; margin-bottom: 2rem !important; text-align: center; }
.vf-kepala-seksi > * { margin-block: 0 !important; }
.vf-kepala-seksi p:not(.vf-label-seksi) { margin-top: .55rem !important; color: var(--wp--preset--color--abu); }
.vf-pita { margin-block: var(--wp--preset--spacing--60) !important; }
.vf-pita :is(h2, h3) { color: inherit; }
.vf-pita .vf-kepala-seksi p:not(.vf-label-seksi) { color: inherit; opacity: .85; }
/* Pita berfoto bukan .vf-pita: subjudulnya sempat tetap abu (#5f6570) di atas foto. */
.vf-pita-foto .vf-kepala-seksi p:not(.vf-label-seksi) { color: var(--wp--preset--color--di-primary); opacity: .9; }
.vf-pita-foto .vf-kepala-seksi h2 { color: var(--wp--preset--color--di-primary); }
.vf-seksi { margin-block: var(--wp--preset--spacing--60) !important; }

/* hero berfoto (korporat) */
.wp-block-post-content > :is(.vf-hero-foto, .vf-hero-terang):first-child { margin-top: calc(-1 * var(--wp--preset--spacing--40)) !important; }
.vf-hero-foto { margin-bottom: 0 !important; padding: var(--wp--preset--spacing--60) 1.25rem !important; }
.vf-hero-foto > .wp-block-cover__inner-container { width: 100%; max-width: var(--wp--style--global--wide-size, 1400px); margin-inline: auto; }
.vf-hero-foto > .wp-block-cover__inner-container > * { max-width: 680px; }
/* Teks di atas foto memakai di-primary (selalu #fff), bukan putih: di palet gelap
   slug "putih" jadi latar halaman #0d0f12, sehingga judul hero pernah tampil hitam
   di atas foto gelap (bumiairchemitech.com 2026-09-16). */
.vf-hero-foto h1 { margin: .2rem 0 1rem; color: var(--wp--preset--color--di-primary); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.15; }
.vf-hero-foto p { color: var(--wp--preset--color--di-primary); font-size: 1.1rem; }
.vf-hero-foto .vf-label-seksi { color: var(--wp--preset--color--aksen-di-primary); }
.vf-hero-foto .wp-block-buttons { margin-top: 1.6rem; }

/* hero terang (terbelah) */
.vf-hero-terang { margin-bottom: 0 !important; }
.vf-hero-terang__baris { align-items: center !important; gap: clamp(1.5rem, 4vw, 3.5rem) !important; }
.vf-hero-terang h1 { margin: .2rem 0 1rem; font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.15; }
.vf-hero-terang p { font-size: 1.08rem; }
.vf-hero-terang .wp-block-buttons { margin-top: 1.4rem; }

.vf-foto-bingkai { margin: 0 !important; }
.vf-foto-bingkai img { display: block; width: 100%; border-radius: 16px; box-shadow: 0 18px 40px rgba(15, 23, 42, .14); }
.vf-tentang { align-items: center !important; gap: clamp(1.5rem, 4vw, 3.5rem) !important; margin-block: var(--wp--preset--spacing--60) !important; }
.vf-tentang h2 { margin-top: 0; }

/* kartu berfoto (layanan, produk) */
.vf-kartu-foto {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: 14px;
  background: var(--wp--preset--color--putih);
  color: var(--wp--preset--color--teks);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vf-kartu-foto:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 23, 42, .12); }
.vf-kartu-foto > * { margin-block: 0 !important; }
.vf-kartu-foto .wp-block-image { margin: 0; }
.vf-kartu-foto .wp-block-image img { display: block; width: 100%; }
.vf-kartu-foto--tanpa { border-top: 4px solid var(--wp--preset--color--aksen); }
/* Kartu polos ala referensi: latar abu muda, tanpa gambar, ikon panah di sudut
   ("Our Services" northseaaconsulting.com — permintaan user 2026-09-18). */
.vf-ref .vf-kartu-foto--polos {
  background: var(--wp--preset--color--latar, #f3f4f6);
  border-color: transparent;
  border-radius: var(--vf-kartu-radius, 15px);
}
.vf-ref .vf-kartu-foto--polos .vf-kartu-foto__isi { padding: 1.6rem 1.7rem 1.9rem; }
.vf-ref .vf-kartu-panah { position: relative; }
.vf-ref .vf-kartu-panah::after {
  content: "\2197";
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--wp--preset--color--putih);
  color: var(--wp--preset--color--primary);
  font-size: 1.05rem;
  line-height: 1;
}
.vf-ref .vf-kartu-panah .vf-kartu-foto__isi { padding-bottom: 3.2rem; }
/* Deret logo mitra & klien dari company profile: kotak putih seragam, logo utuh
   (tidak dipotong) dan tidak melar (permintaan user 2026-09-18). */
.vf-klien--logo { align-items: center; }
.vf-klien--logo .vf-klien__logo { margin: 0; }
/* Carousel logo: strip geser mendatar + tombol panah (dipasang assets/js/slider.js).
   Tanpa JS tetap bisa digeser jari/trackpad. */
.vf-logo-geser {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.vf-logo-geser::-webkit-scrollbar { display: none; }
.vf-logo-geser > * {
  flex: 0 0 calc((100% - 4rem) / 5);
  scroll-snap-align: start;
  margin: 0 !important;
}
@media (max-width: 1024px) { .vf-logo-geser > * { flex-basis: calc((100% - 2rem) / 3); } }
@media (max-width: 600px) { .vf-logo-geser > * { flex-basis: calc((100% - 1rem) / 2); } }
/* Varian carousel untuk FOTO (bukan logo): kartu lebih besar, gambar bersudut, keterangan
   di bawahnya. Memakai mekanisme geser & panah yang sama. */
.vf-geser-foto > * { flex-basis: calc((100% - 3rem) / 4); }
@media (max-width: 1024px) { .vf-geser-foto > * { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 600px) { .vf-geser-foto > * { flex-basis: 100%; } }
.vf-geser-foto figure { margin: 0; }
.vf-geser-foto img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--vf-kartu-radius, 15px);
}
.vf-geser-foto figcaption {
  margin-top: .65rem;
  color: var(--wp--preset--color--ink);
  font-size: .95rem;
  font-weight: 600;
  text-align: left;
}
.vf-logo-geser__bingkai { position: relative; }
.vf-logo-geser__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  /* Ikon panah diperbesar & diberi garis tegas supaya kelihatan (permintaan user
     2026-09-18); sebelumnya tipis dan nyaris menyatu dengan latar. */
  border: 2px solid var(--wp--preset--color--garis);
  border-radius: 999px;
  background: var(--wp--preset--color--putih);
  color: var(--wp--preset--color--ink);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  padding-bottom: .18em;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .1);
}
.vf-logo-geser__nav:hover { border-color: var(--wp--preset--color--primary); }
/* Panah non-aktif tetap terlihat (redup) — penanda bahwa deretnya bisa digeser. */
.vf-logo-geser__nav.is-mati { opacity: .35; cursor: default; box-shadow: none; }
.vf-logo-geser__nav.is-mati:hover { border-color: var(--wp--preset--color--garis); }
.vf-logo-geser__nav--mundur { left: -1.5rem; }
.vf-logo-geser__nav--maju { right: -1.5rem; }

.vf-klien--logo .vf-klien__logo img {
  display: block;
  width: 100%;
  height: 84px;
  object-fit: contain;
  background: var(--wp--preset--color--putih);
  /* Garis tipis supaya batas tiap kotak logo terlihat di latar abu. */
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: var(--vf-kartu-radius, 15px);
  padding: .9rem 1.1rem;
  box-sizing: border-box;
}
.vf-kartu-foto__isi { padding: 1.1rem 1.25rem 1.35rem; }
.vf-kartu-foto__isi > * { margin-block: 0 !important; }
.vf-kartu-foto h3 { color: var(--wp--preset--color--ink); font-size: 1.12rem; line-height: 1.3; }
.vf-kartu-foto p { margin-top: .5rem !important; font-size: .93rem; }
/* Poin layanan tanpa bullet: dirapikan jadi baris bertanda centang kecil, rata kiri
   (permintaan user 2026-09-18 — bullet bawaan terlihat berantakan di kartu). */
.vf-kartu-foto ul {
  margin-top: .75rem !important;
  padding-left: 0;
  list-style: none;
  font-size: .9rem;
  text-align: left;
}
.vf-kartu-foto ul li {
  position: relative;
  margin: 0;
  padding: .3rem 0 .3rem 1.45rem;
  line-height: 1.5;
}
.vf-kartu-foto ul li + li { border-top: 1px solid var(--wp--preset--color--garis); }
.vf-kartu-foto ul li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: .3rem;
  color: var(--wp--preset--color--aksen);
  font-weight: 700;
}

/* keunggulan berikon */
.vf-kotak-ikon {
  position: relative;
  height: 100%;
  padding: 1.35rem 1.25rem !important;
  border-radius: 14px;
  background: var(--wp--preset--color--putih);
  color: var(--wp--preset--color--teks);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
}
.vf-pita--gelap .vf-kotak-ikon {
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, var(--wp--preset--color--putih) 7%, transparent);
  color: inherit;
  box-shadow: none;
}
.vf-kotak-ikon > * { margin-block: 0 !important; }
.vf-kotak-ikon::before { content: ""; display: block; width: 48px; height: 48px; margin-bottom: .9rem; border-radius: 12px; background: var(--wp--preset--color--aksen); }
.vf-kotak-ikon::after {
  content: "";
  position: absolute;
  top: calc(1.35rem + 12px);
  left: calc(1.25rem + 12px);
  width: 24px;
  height: 24px;
  background: var(--wp--preset--color--di-aksen);
  -webkit-mask: var(--vf-ikon) center / contain no-repeat;
  mask: var(--vf-ikon) center / contain no-repeat;
}
.vf-kotak-ikon h3 { color: var(--wp--preset--color--ink); font-size: 1.05rem; line-height: 1.3; }
.vf-pita--gelap .vf-kotak-ikon h3 { color: inherit; }
.vf-kotak-ikon p { margin-top: .45rem !important; font-size: .92rem; }
.vf-ikon--area { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12Z'/><circle cx='12' cy='10' r='2.5'/></svg>"); }
.vf-ikon--satu { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='m8.5 12 2.5 2.5 4.5-5'/></svg>"); }
.vf-ikon--rab { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4' width='14' height='17' rx='2'/><path d='M9 4V3h6v1M9 11h6M9 15h4'/></svg>"); }
.vf-ikon--chat { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12Z'/></svg>"); }

/* galeri & pita ajakan berfoto */
.vf-galeri .wp-block-image { margin: 0; overflow: hidden; border-radius: 12px; }
.vf-galeri img { display: block; width: 100%; transition: transform .35s ease; }
.vf-galeri .wp-block-image:hover img { transform: scale(1.05); }
.vf-seksi--galeri > .wp-block-buttons { justify-content: center; margin-top: 1.5rem; }
.vf-ajakan-foto { margin-block: var(--wp--preset--spacing--60) 0 !important; padding: var(--wp--preset--spacing--60) 1.25rem !important; text-align: center; }
.vf-ajakan-foto h2 { margin-top: 0; color: var(--wp--preset--color--di-primary); }
.vf-ajakan-foto p { max-width: 640px; margin-inline: auto; color: var(--wp--preset--color--di-primary); }
.vf-ajakan-foto .wp-block-buttons { justify-content: center; }
:is(.vf-gaya-korporat, .vf-gaya-terbelah) .vf-ajakan { margin-bottom: var(--wp--preset--spacing--60) !important; }

/* ---------- katalog produk gaya reference ---------- */
.vf-product-archive { max-width: var(--wp--style--global--wide-size, 1400px); }
.vf-product-archive__title, .vf-product-single__title { color: var(--wp--preset--color--ink); font-weight: 800; }
.vf-product-archive__intro { color: var(--wp--preset--color--abu); margin-bottom: 2.5rem !important; }
.vf-product-grid { gap: 1.5rem !important; }
.vf-product-grid > .wp-block-post { overflow: hidden; border: 1px solid var(--wp--preset--color--garis); border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(15,23,42,.06); }
.vf-product-grid .wp-block-post-featured-image { margin: 0 !important; background: #f5f5f5; }
.vf-product-grid .wp-block-post-featured-image img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .25s ease; }
.vf-product-grid .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.vf-product-grid .vf-product-card__category, .vf-product-grid .wp-block-post-title, .vf-product-grid .wp-block-post-excerpt { margin-inline: 1rem !important; }
.vf-product-grid .vf-product-card__category { margin-top: 1rem !important; color: var(--wp--preset--color--aksen-teks); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.vf-product-grid .wp-block-post-title { margin-top: .35rem !important; font-size: 1.1rem; }
.vf-product-grid .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.vf-product-grid .wp-block-post-excerpt { color: var(--wp--preset--color--abu); font-size: .9rem; }
.vf-product-grid .wp-block-post-excerpt__more-link { color: var(--wp--preset--color--aksen-teks); font-weight: 700; }
.vf-product-single__columns { align-items: flex-start; gap: clamp(2rem, 6vw, 5rem); }
.vf-product-single__image img { width: 100%; height: auto; border-radius: 14px; }
.vf-product-single__category { color: var(--wp--preset--color--aksen-teks); font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.vf-product-single__title { margin-top: .6rem; font-size: clamp(2rem, 4vw, 3.2rem); }
@media (max-width: 781px) { .vf-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .vf-product-single__columns { display: block; } }

/* ---------- beranda gaya katalog (body.vf-gaya-katalog) ----------
   Pola referensi katalog merchandise (popcreativeprint.com, 2026-09-15): hero gelap + panel,
   deret media, fakta + angka, split desain custom, keunggulan 3+2, koleksi 3 kolom, ubin
   kategori, FAQ akordeon (core/details), teks SEO, CTA gelap. Tanpa foto: ikon mask SVG. */
.vf-gaya-katalog { --vf-kat-gelap: color-mix(in srgb, var(--wp--preset--color--ink) 88%, var(--wp--preset--color--aksen)); }
.vf-ik::before { content: ""; display: block; width: var(--vf-ik-ukuran, 30px); height: var(--vf-ik-ukuran, 30px); background: var(--wp--preset--color--aksen); -webkit-mask: var(--vf-ik) center / contain no-repeat; mask: var(--vf-ik) center / contain no-repeat; }
.vf-ik--mesin { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='5'/%3E%3Crect x='3' y='8' width='18' height='9' rx='2'/%3E%3Crect x='7' y='14' width='10' height='7'/%3E%3C/svg%3E"); }
.vf-ik--kilat { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.vf-ik--jam { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.vf-ik--tetes { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s-6 7-6 11a6 6 0 0 0 12 0c0-4-6-11-6-11z'/%3E%3C/svg%3E"); }
.vf-ik--toko { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16l-1.5-5h-13zM5 9v11h14V9M9 20v-6h6v6'/%3E%3C/svg%3E"); }
.vf-ik--bintang { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 5.8 6.2.9-4.5 4.4 1 6.2L12 17.4l-5.5 2.9 1-6.2L3 9.7l6.2-.9z'/%3E%3C/svg%3E"); }
.vf-ik--botol { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4v3l2 3v13H8V8l2-3z'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E"); }
.vf-ik--mug { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h11v10a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3zM16 10h2a2 2 0 0 1 0 4h-2'/%3E%3C/svg%3E"); }
.vf-ik--pena { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4-1 11-11-3-3L5 16zM14 7l3 3'/%3E%3C/svg%3E"); }
.vf-ik--buku { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11a2 2 0 0 1 2 2v14H7a2 2 0 0 1-2-2zM5 18a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E"); }
.vf-ik--kado { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4'/%3E%3Cpath d='M5 12v9h14v-9M12 8v13M12 8S10 3 7.5 4.5 9 8 12 8zm0 0s2-5 4.5-3.5S15 8 12 8'/%3E%3C/svg%3E"); }
.vf-ik--akrilik { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 16v5'/%3E%3C/svg%3E"); }
.vf-ik--kunci { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3Cpath d='M11 11l9 9M16 16l2-2M18 18l2-2'/%3E%3C/svg%3E"); }
.vf-ik--orang { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6' r='3'/%3E%3Cpath d='M7 18v-4a5 5 0 0 1 10 0v4M5 21h14'/%3E%3C/svg%3E"); }
.vf-ik--kartu { --vf-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }

.vf-kat-hero { margin-block: 0 !important; padding: clamp(3rem, 7vw, 6rem) var(--wp--style--root--padding-right, 1.25rem) !important; background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--wp--preset--color--aksen) 38%, transparent), transparent 55%), radial-gradient(circle at 10% 110%, color-mix(in srgb, var(--wp--preset--color--aksen) 18%, transparent), transparent 45%), var(--vf-kat-gelap); color: #fff; }
.vf-kat-hero__baris { align-items: center !important; gap: clamp(2rem, 5vw, 4.5rem) !important; margin-block: 0 !important; }
.vf-kat-hero h1 { margin: .7rem 0 1rem; color: #fff; font-size: clamp(2.2rem, 4.8vw, 3.7rem); line-height: 1.08; letter-spacing: -.01em; }
.vf-kat-trust { margin: 0; color: #ffd34d; font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
.vf-kat-sorot { display: inline-block; margin: 0 0 1.1rem !important; padding: .3rem .8rem; background: #fff; color: var(--wp--preset--color--ink); font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 700; }
.vf-kat-hero p:not(.vf-kat-trust):not(.vf-kat-sorot):not([class*="vf-kat-panel"]) { max-width: 36rem; color: rgba(255, 255, 255, .82); }
.vf-kat-hero .wp-block-buttons { gap: .8rem; margin-top: 1.8rem; }
.vf-kat-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: #fff; color: var(--wp--preset--color--ink); }
.vf-kat-hero .is-style-outline .wp-block-button__link { border: 2px solid rgba(255, 255, 255, .85); background: transparent; color: #fff; }
.vf-kat-panel { padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; background: rgba(255, 255, 255, .07); backdrop-filter: blur(6px); }
.vf-kat-panel > * { margin: 0 !important; }
.vf-kat-panel__judul { margin-bottom: .8rem !important; color: rgba(255, 255, 255, .7); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vf-kat-panel__item { display: flex; align-items: center; gap: .9rem; padding: .95rem 0; border-top: 1px solid rgba(255, 255, 255, .12); color: #fff; font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 700; }
.vf-kat-panel__item::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--wp--preset--color--aksen); box-shadow: 0 0 0 5px color-mix(in srgb, var(--wp--preset--color--aksen) 30%, transparent); }

.vf-kat-media-seksi { margin-top: var(--wp--preset--spacing--70) !important; }
.vf-kat-media-seksi .vf-kepala-seksi h2, .vf-kat-seo__judul { font-family: var(--wp--preset--font-family--pt-serif); font-weight: 400; }
.vf-kat-media { gap: .75rem !important; }
.vf-kat-media__item { margin: 0 !important; padding: .85rem 1.3rem; border: 1px solid var(--wp--preset--color--garis); border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(20, 23, 31, .06); color: var(--wp--preset--color--ink); font-weight: 600; }

.vf-kat-fakta { align-items: center !important; gap: clamp(2rem, 5vw, 4rem) !important; }
.vf-kat-fakta h2 { margin-top: 0; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.vf-kat-cek { padding: 0; list-style: none; }
.vf-kat-cek li { display: flex; gap: .6rem; margin: .5rem 0; color: var(--wp--preset--color--ink); font-weight: 600; }
.vf-kat-cek li::before { content: ""; flex: none; width: 22px; height: 22px; background: var(--wp--preset--color--aksen); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.vf-kat-fakta > .wp-block-column:last-child { padding-left: clamp(1rem, 3vw, 2.5rem); border-left: 1px solid var(--wp--preset--color--garis); }
.vf-kat-fakta__item { margin: 0 0 1.5rem !important; text-align: right; }
.vf-kat-fakta__item:last-child { margin-bottom: 0 !important; }
.vf-kat-fakta__item > * { margin: 0 !important; }
.vf-kat-angka { color: var(--wp--preset--color--ink); font-size: clamp(2rem, 3.6vw, 2.7rem); font-weight: 800; line-height: 1.1; }
.vf-kat-angka__label { margin-top: .2rem !important; color: var(--wp--preset--color--abu); font-size: .9rem; }

.vf-kat-custom { align-items: center !important; gap: clamp(2rem, 5vw, 4rem) !important; }
.vf-kat-custom h2 { margin-top: .3rem; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.3; }
.vf-kat-tanda { padding: 0 .3em; background: var(--wp--preset--color--aksen); color: var(--wp--preset--color--di-aksen); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vf-kat-langkah { display: flex; gap: 1rem; margin: 0 0 1rem !important; padding: 1.2rem 1.3rem; border: 1px solid var(--wp--preset--color--garis); border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(20, 23, 31, .05); }
.vf-kat-langkah:last-child { margin-bottom: 0 !important; }
.vf-kat-langkah__no { display: grid; flex: none; place-items: center; width: 42px; height: 42px; margin: 0 !important; border-radius: 50%; background: var(--wp--preset--color--aksen); color: var(--wp--preset--color--di-aksen); font-weight: 800; }
.vf-kat-langkah__teks > * { margin: 0 !important; }
.vf-kat-langkah__teks h3 { font-size: 1.05rem; }
.vf-kat-langkah__teks p { margin-top: .25rem !important; color: var(--wp--preset--color--abu); font-size: .9rem; }

.vf-kat-band { margin-block: var(--wp--preset--spacing--60) 0 !important; padding: clamp(3rem, 6vw, 4.5rem) var(--wp--style--root--padding-right, 1.25rem) !important; background: var(--wp--preset--color--latar); }
.vf-kat-unggul-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 1rem !important; }
.vf-kat-unggul { grid-column: span 2; padding: 1.5rem; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(20, 23, 31, .05); }
.vf-kat-unggul:nth-child(n+4) { grid-column: span 3; }
.vf-kat-unggul h3 { margin: .9rem 0 .3rem; font-size: 1.05rem; }
.vf-kat-unggul p { margin: 0; color: var(--wp--preset--color--abu); font-size: .9rem; }

.vf-kat-koleksi { margin-top: var(--wp--preset--spacing--70) !important; }
.vf-kat-koleksi__grid { max-width: 980px; margin-inline: auto !important; gap: 1.8rem 1.25rem !important; }
.vf-kat-koleksi__kartu > * { margin: 0 !important; }
.vf-kat-koleksi__ikon { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 14px; background: radial-gradient(circle at 30% 20%, #fff, transparent 60%), color-mix(in srgb, var(--wp--preset--color--aksen) 10%, var(--wp--preset--color--latar)); --vf-ik-ukuran: 64px; transition: transform .3s ease; }
.vf-kat-koleksi__kartu:hover .vf-kat-koleksi__ikon { transform: translateY(-4px); }
.vf-kat-koleksi__kartu h3 { margin-top: 1rem !important; font-size: .9rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.vf-kat-koleksi__kartu p:not(.vf-kat-tag) { margin-top: .25rem !important; color: var(--wp--preset--color--abu); font-size: .85rem; }
.vf-kat-tag { display: inline-block; margin-top: .6rem !important; padding: .2rem .7rem; border-radius: 99px; background: color-mix(in srgb, var(--wp--preset--color--aksen) 12%, #fff); color: var(--wp--preset--color--aksen-teks); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.vf-kat-koleksi > .wp-block-buttons, .vf-kat-kategori > .wp-block-buttons { justify-content: center; margin-top: 2.2rem; }

.vf-kat-ubin-grid { gap: 1rem !important; }
.vf-kat-ubin { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #fff; --vf-ik-ukuran: 46px; transition: box-shadow .25s ease; }
.vf-kat-ubin:hover { box-shadow: 0 10px 24px rgba(20, 23, 31, .1); }
.vf-kat-ubin::before { margin-top: 1.6rem; }
.vf-kat-ubin__label { position: absolute; inset: 0 0 auto; margin: 0 !important; padding: .5rem .8rem; background: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent); color: #fff; font-size: .85rem; font-weight: 700; }
.vf-kat-ubin__label a { color: #fff !important; text-decoration: none; }
.vf-kat-ubin__label a::after { content: ""; position: absolute; inset: 0; }

.vf-kat-faq { max-width: 960px; margin: var(--wp--preset--spacing--70) auto 0 !important; }
.vf-kat-faq__item { margin: .6rem 0 0 !important; border-radius: 10px; background: #fff; box-shadow: 0 2px 10px rgba(20, 23, 31, .05); }
.vf-kat-faq__item summary { position: relative; padding: 1rem 3rem 1rem 1.25rem; list-style: none; color: var(--wp--preset--color--ink); font-weight: 600; cursor: pointer; }
.vf-kat-faq__item summary::-webkit-details-marker { display: none; }
.vf-kat-faq__item summary::after { content: "+"; position: absolute; top: 50%; right: 1.25rem; transform: translateY(-50%); color: var(--wp--preset--color--abu); font-size: 1.35rem; }
.vf-kat-faq__item[open] summary::after { content: "−"; }
.vf-kat-faq__item > p { margin: 0 !important; padding: 0 1.25rem 1.1rem; color: var(--wp--preset--color--teks); }

.vf-kat-seo { margin-top: var(--wp--preset--spacing--70) !important; }
.vf-kat-seo__judul { margin-top: 0; color: var(--wp--preset--color--aksen-teks); font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.vf-kat-seo p { max-width: 64rem; }
.vf-kat-cta { margin-block: var(--wp--preset--spacing--50) !important; padding: clamp(2.5rem, 5vw, 3.5rem) 1.5rem !important; border-radius: 18px; background: var(--vf-kat-gelap); color: #fff; text-align: center; }
.vf-kat-cta h2 { margin: 0; color: #fff; }
.vf-kat-cta p { color: rgba(255, 255, 255, .8); }
.vf-kat-cta .wp-block-buttons { justify-content: center; }
.vf-kat-cta .wp-block-button__link { background: #fff; color: var(--wp--preset--color--ink); }

@media (max-width: 781px) {
  .vf-kat-hero__baris > .wp-block-column:last-child:empty { display: none; }
  .vf-kat-fakta > .wp-block-column:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding-left: 0; border-left: 0; }
  .vf-kat-fakta__item { margin: 0 !important; text-align: left; }
  .vf-kat-unggul-grid { grid-template-columns: 1fr !important; }
  .vf-kat-unggul, .vf-kat-unggul:nth-child(n+4) { grid-column: auto; }
  .vf-kat-koleksi__grid, .vf-kat-ubin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vf-kat-media__item { padding: .6rem .9rem; font-size: .85rem; }
}

/* ---------- font dari referensi desain klien (velocity_situs font_teks/font_judul) ---------- */

body { font-family: var(--vf-font-teks, var(--wp--preset--font-family--jakarta)); }

/* ---------- gaya beranda "sorotan" (body.vf-gaya-sorotan) ----------
   Majalah foto: header putih, pita judul seksi berikon di tengah, kartu foto
   selebar layar dengan judul serif di tengah, grid 2 kolom per rubrik, pita kaki
   hitam. Diturunkan dari referensi klien anaksegalabangsa.com
   (ourgrandfatherstory.com) — ukurannya mengikuti CSS referensi: kartu 37vw,
   lapisan gelap 40%, ikon cincin 22px/7px, jarak kartu 12px / 1vw. */

.vf-gaya-sorotan .vf-topbar { display: none; }
.vf-gaya-klinik .vf-topbar { display: none; }  /* mockup klinik: header putih tanpa baris atas */
/* Beranda klinik: hero menempel ke header, pita CTA menempel ke footer (permintaan user 2026-09-16).
   Padding <main> front-page.html ditulis inline, jadi perlu !important. */
body.vf-gaya-klinik.home > .wp-site-blocks > main.wp-block-group,
body.vf-gaya-klinik.home main#wp--skip-link--target.is-layout-flow { padding-top: 0 !important; padding-bottom: 0 !important; }
.vf-gaya-sorotan .vf-header {
  background: var(--wp--preset--color--putih) !important;
  color: var(--wp--preset--color--ink) !important;
  box-shadow: 0 1px 0 var(--wp--preset--color--garis);
}
.vf-gaya-sorotan .vf-header a:where(:not(.wp-element-button)),
.vf-gaya-sorotan .vf-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); }
.vf-gaya-sorotan .vf-nav .wp-block-navigation-item__content { font-weight: 700; }
.vf-gaya-sorotan .vf-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--aksen-teks); }
.vf-gaya-sorotan .vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--di-primary); }
.vf-gaya-sorotan .vf-header .wp-block-site-logo a { padding: 0; background: transparent; }
.vf-gaya-sorotan.home main.wp-block-group { padding-top: 0 !important; }
/* Pita judul & kartu saling menempel seperti referensi; blockGap bawaan menyisakan pita putih. */
.vf-gaya-sorotan .wp-block-post-content > .vf-masthead + .wp-block-query,
.vf-gaya-sorotan .wp-block-post-content > .wp-block-query + .vf-masthead { margin-block-start: 0 !important; }
.vf-gaya-sorotan .wp-block-post-content > .wp-block-query + .vf-masthead { margin-top: 12px !important; }

.vf-masthead {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Hanya atas-bawah: margin kiri-kanan negatif milik alignfull harus tetap ada. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 40px 30px !important;
  background: var(--wp--preset--color--primary-gelap);
  color: var(--wp--preset--color--di-primary);
  text-align: center;
  box-shadow: inset 0 15px 30px -15px rgba(0, 0, 0, .6);
}
.vf-masthead::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  margin: 0 auto 12px;
  border: 7px solid var(--wp--preset--color--aksen);
  border-radius: 50%;
}
.vf-masthead > * { position: relative; z-index: 1; margin: 0 !important; }
.vf-masthead h2 {
  color: inherit;
  font-family: var(--vf-font-teks, inherit);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.vf-masthead p { max-width: 1140px; margin-top: .7em !important; font-size: .82rem; opacity: .9; }
.vf-masthead p a { color: inherit; font-weight: 700; }
/* Pita pembuka: bidang warna aksen melengkung di atas warna utama. */
.vf-masthead--hot { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--di-aksen); box-shadow: inset -4vw 0 0 var(--wp--preset--color--primary-gelap); }
.vf-masthead--hot::after {
  content: "";
  position: absolute;
  z-index: 0;
  /* Bidang aksen harus menutupi judul di tengah: tulisan yang menyeberang ke
     warna utama tidak terbaca (percobaan pertama anaksegalabangsa.com). */
  top: -150%;
  bottom: 0;
  left: 28%;
  right: 3.7%;
  border-radius: 0 0 50% 50%;
  background: var(--wp--preset--color--aksen);
}
.vf-masthead--hot::before { border-color: var(--wp--preset--color--putih); }

.vf-sampul { display: grid; gap: 12px; margin: 0 !important; padding: 0; list-style: none; }
.vf-sampul > li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 37vw;
  margin: 0;
  padding: 40px 30px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-gelap));
  color: #fff;
  text-align: center;
}
.vf-sampul > li::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .4); transition: background .3s ease; }
.vf-sampul > li:hover::before { background: rgba(0, 0, 0, .55); }
.vf-sampul .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.vf-sampul .wp-block-post-featured-image a,
.vf-sampul .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-sampul__teks { position: relative; z-index: 2; max-width: 1140px; }
.vf-sampul__teks > * { margin: 0 !important; }
.vf-sampul .wp-block-post-title {
  font-family: var(--vf-font-judul, var(--vf-font-teks, inherit));
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
}
.vf-sampul .wp-block-post-title a { color: #fff !important; text-decoration: none; }
.vf-sampul .wp-block-post-title a:hover { box-shadow: 0 2px 0 #fff; }
.vf-sampul .wp-block-post-terms { font-size: .95rem; font-weight: 700; }
.vf-sampul .wp-block-post-terms::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: 12px auto;
  border: 7px solid #fff;
  border-radius: 50%;
}
.vf-sampul .wp-block-post-terms a { color: #fff !important; text-decoration: none; }
.vf-sampul .wp-block-post-terms a ~ a,
.vf-sampul .wp-block-post-terms .wp-block-post-terms__separator { display: none; }
.vf-sampul.vf-sampul--dua { gap: 1vw; }
.vf-sampul--dua > li { padding-bottom: 55px; }
/* Rubrik dengan jumlah artikel ganjil: kartu terakhir melebar, tidak menyisakan slot kosong. */
.vf-sampul--dua > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.vf-gaya-sorotan .vf-footer { padding-bottom: 0 !important; }
.vf-gaya-sorotan .vf-footer__bawah {
  justify-content: center;
  max-width: none !important;
  margin: 2.5rem calc(50% - 50vw) 0 !important;
  padding: 22px 30px;
  border-top: 0;
  background: #141414;
  color: #fff;
  font-size: .75rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.vf-gaya-sorotan .vf-footer__bawah a { color: #fff; }

/* ---------- ikon pencarian di header (core/search "button-only") ----------
   Klik ikon membuka kolom cari (perilaku bawaan blok), konsep dari header referensi
   klien anaksegalabangsa.com. Di HP kolom terbuka melebar di bawah bar header. */
.vf-header__bar { position: relative; }
.vf-cari { flex-shrink: 0; margin: 0 !important; }
.vf-cari .wp-block-search__inside-wrapper { padding: 0 !important; border: 0 !important; background: transparent !important; }
.vf-cari .wp-block-search__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  color: inherit !important;
}
.vf-cari .wp-block-search__button svg { width: 26px; height: 26px; min-width: 26px; fill: currentColor; }
.vf-cari .wp-block-search__button:hover,
.vf-cari .wp-block-search__button:focus-visible { background: rgba(0, 0, 0, .07) !important; }
.vf-cari .wp-block-search__input {
  padding: 6px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  background: transparent;
  color: inherit;
  font-family: var(--vf-font-judul, inherit);
  font-size: 1.1rem;
  font-weight: 700;
}
.vf-cari .wp-block-search__input:focus { outline: none; border-bottom-width: 2px !important; }
.vf-cari .wp-block-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

@media (min-width: 782px) {
  /* Kolom terbuka menimpa menu di kiri ikon, tidak mendorong isi bar (menu sempat turun 2 baris). */
  .vf-cari .wp-block-search__inside-wrapper { position: relative; }
  .vf-cari .wp-block-search__input {
    position: absolute;
    top: 50%;
    right: calc(100% + 6px);
    z-index: 5;
    transform: translateY(-50%);
    background: var(--wp--preset--color--putih, #fff) !important;
    color: var(--wp--preset--color--ink) !important;
  }
  .vf-cari:not(.wp-block-search__searchfield-hidden) .wp-block-search__input { width: min(340px, 40vw) !important; }
}
.vf-gaya-sorotan .vf-cari .wp-block-search__button { color: var(--wp--preset--color--primary) !important; }
.vf-gaya-sorotan .vf-cari .wp-block-search__input { color: var(--wp--preset--color--ink); }

@media (max-width: 781px) {
  /* Tombol menu & ikon cari berdampingan di kanan. Bar ber-justify space-between dan margin
     .vf-nav terhitung 0 (ditimpa layout flex WP), sehingga hamburger jatuh di tengah bar. */
  .vf-header__bar { gap: .25rem !important; }
  .vf-header__bar > .vf-nav { margin-left: auto !important; }
  /* Tanpa margin otomatis: .vf-nav sudah margin-left:auto, dua-duanya membelah ruang kosong. */
  .vf-cari:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
    position: absolute;
    top: calc(100% + .7rem);
    left: 0;
    right: 0;
    z-index: 60;
    padding: 12px 16px !important;
    background: var(--wp--preset--color--putih, #fff) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
  }
  .vf-cari:not(.wp-block-search__searchfield-hidden) .wp-block-search__input { width: 100% !important; color: var(--wp--preset--color--ink); }
  .vf-cari:not(.wp-block-search__searchfield-hidden) .wp-block-search__button { color: var(--wp--preset--color--ink) !important; }
}

/* Caption foto utama artikel (filter render_block_core/post-featured-image di inc/situs.php). */
.wp-block-post-featured-image .wp-element-caption {
  margin: 8px 0 0;
  color: var(--wp--preset--color--abu, #6b6b6b);
  font-size: .8rem;
  line-height: 1.45;
  text-align: left;
}

/* ---------- arsip rubrik "sorotan" (templates/archive-sorotan.html) ----------
   Konsep arsip rubrik referensi: pita judul + keterangan rubrik, tulisan terbaru
   sebagai kartu foto selebar layar, sisanya grid 4 kolom (foto, judul di bawah).
   Dipilih inc/situs.php untuk situs bergaya sorotan saja. */
/* Tepi grid dari lebar layar: nilai % di variabel dihitung ulang di tiap elemen pemakainya. */
.vf-arsip-sorotan { --vf-tepi: max(16px, calc((100vw - var(--wp--style--global--wide-size, 1240px)) / 2)); }
.vf-gaya-sorotan main.vf-arsip-sorotan { padding-top: 0 !important; }
.vf-arsip-sorotan > * + * { margin-block-start: 0 !important; }
.vf-masthead--arsip { padding: 56px 30px !important; }
.vf-masthead--arsip .vf-rubrik-bar { display: block; margin: 0; padding: 0; border: 0; background: none; }
.vf-masthead--arsip .vf-rubrik-bar h1 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-family: var(--vf-font-judul, var(--vf-font-teks, inherit));
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  text-transform: none;
}
.vf-masthead--arsip .wp-block-term-description { max-width: 720px; margin-top: .8em !important; }
.vf-masthead--arsip .wp-block-term-description p { margin: 0 !important; font-size: .95rem; line-height: 1.6; opacity: .9; }

.vf-sampul.vf-sampul--arsip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; padding: 0 var(--vf-tepi); }
.vf-sampul--arsip > li { min-height: 0; padding: 0; overflow: visible; background: none; color: var(--wp--preset--color--ink); text-align: left; justify-content: flex-start; align-items: stretch; }
.vf-sampul--arsip > li::before { display: none; }
.vf-sampul--arsip .wp-block-post-featured-image {
  position: relative;
  inset: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-gelap));
}
.vf-sampul--arsip .wp-block-post-featured-image img { transition: transform .4s ease; }
.vf-sampul--arsip > li:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.vf-sampul--arsip .vf-sampul__teks { padding-top: 12px; }
.vf-sampul--arsip .wp-block-post-title { font-size: 1.05rem; line-height: 1.35; }
.vf-sampul--arsip .wp-block-post-title a { color: var(--wp--preset--color--ink) !important; }
.vf-sampul--arsip .wp-block-post-title a:hover { box-shadow: none; color: var(--wp--preset--color--aksen-teks) !important; }
.vf-sampul--arsip .wp-block-post-date { margin-top: 6px !important; font-size: .8rem; color: var(--wp--preset--color--abu, #6b6b6b); }
/* Halaman pertama: tulisan terbaru jadi kartu foto selebar layar, judul di atas foto. */
body:not(.paged) .vf-sampul--arsip > li:first-child {
  grid-column: 1 / -1;
  min-height: 37vw;
  /* Selebar layar seperti kartu sorotan beranda (list berada di tengah layar). */
  margin: 0 calc(50% - 50vw) 8px;
  padding: 40px 30px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-gelap));
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
}
body:not(.paged) .vf-sampul--arsip > li:first-child::before { display: block; }
body:not(.paged) .vf-sampul--arsip > li:first-child .wp-block-post-featured-image { position: absolute; inset: 0; aspect-ratio: auto; }
body:not(.paged) .vf-sampul--arsip > li:first-child:hover .wp-block-post-featured-image img { transform: none; }
body:not(.paged) .vf-sampul--arsip > li:first-child .vf-sampul__teks { padding-top: 0; }
body:not(.paged) .vf-sampul--arsip > li:first-child .wp-block-post-title { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
body:not(.paged) .vf-sampul--arsip > li:first-child .wp-block-post-title a { color: #fff !important; }
body:not(.paged) .vf-sampul--arsip > li:first-child .wp-block-post-title a:hover { color: #fff !important; box-shadow: 0 2px 0 #fff; }
body:not(.paged) .vf-sampul--arsip > li:first-child .wp-block-post-date { color: rgba(255, 255, 255, .85); }
.vf-arsip-sorotan .wp-block-query-pagination { margin-top: 40px !important; padding: 0 var(--vf-tepi); }
.vf-arsip-sorotan .wp-block-query-no-results { padding: 40px var(--vf-tepi); }

/* ---------- artikel "sorotan" (templates/single-sorotan.html) ----------
   Konsep halaman artikel referensi: bidang 1140px di latar abu muda, foto 16:9,
   kolom isi 60% (judul serif, meta, tombol bagikan selebar kolom, penulis bergaris
   atas) dan kolom putih 40% berisi kartu foto tulisan lain. */
body.single.vf-gaya-sorotan { background: #f4f4f4; }
.vf-single-sorotan { max-width: 1140px; margin: 60px auto 0 !important; padding: 0 !important; }
.vf-single-sorotan > * + * { margin-block-start: 0 !important; }
.vf-single-sorotan__foto { margin: 0 !important; background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-gelap)); }
.vf-single-sorotan__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-single-sorotan__foto .wp-element-caption { margin: 0; padding: 8px 40px; background: #fff; }
.vf-single-sorotan__baris { gap: 0 !important; margin: 0 !important; align-items: stretch !important; }
.vf-single-sorotan__utama { padding: 40px !important; }
.vf-single-sorotan__samping { padding: 40px !important; background: #fff; }
.vf-single-sorotan__utama .wp-block-post-title {
  margin: 0 0 .8rem;
  font-family: var(--vf-font-judul, var(--vf-font-teks, inherit));
  font-size: 1.5625rem !important;
  line-height: 2rem;
}
.vf-single-sorotan__meta { gap: 0 1em; margin: 0 0 .8rem !important; font-size: 1rem; }
.vf-single-sorotan__meta .wp-block-post-terms { font-weight: 700; }
.vf-single-sorotan__meta .wp-block-post-terms a { color: var(--wp--preset--color--primary); text-decoration: none; }
.vf-single-sorotan__meta .wp-block-post-date { font-family: var(--vf-font-judul, inherit); font-weight: 600; }
/* [velocity-sharepost] mencetak gaya inline & label berbahasa Inggris: dirapikan jadi deretan tombol ikon. */
.vf-single-sorotan .social-share-buttons { margin: 0 0 1.5rem; }
/* Blok shortcode membungkus tombol dengan <p> (wpautop): hanya label "Share this post" yang disembunyikan. */
.vf-single-sorotan .social-share-buttons > p.fw-bold { display: none; }
.vf-single-sorotan .social-share-buttons > p:not(.fw-bold) { display: flex; gap: 10px; margin: 0; }
.vf-single-sorotan .social-share-buttons > p:not(.fw-bold) br { display: none; }
.vf-single-sorotan .social-share-buttons .share-button {
  flex: 1;
  justify-content: center;
  margin: 0 !important;
  padding: 10px !important;
  border-radius: 0 !important;
  transition: background-color .4s ease;
}
.vf-single-sorotan .social-share-buttons .share-button:hover { background-color: #141414 !important; }
.vf-single-sorotan .social-share-buttons .share-button span { display: none; }
.vf-single-sorotan .vf-artikel__isi { font-size: 1rem; line-height: 1.6; }
/* Subjudul isi: serif sedang seperti referensi, bukan judul tebal besar bawaan tema. */
.vf-single-sorotan .vf-artikel__isi :where(h2, h3, h4) {
  margin: 1.8em 0 .6em;
  font-family: var(--vf-font-judul, inherit);
  font-weight: 700;
  line-height: 1.3;
}
.vf-single-sorotan .vf-artikel__isi h2 { font-size: 1.3rem !important; }
.vf-single-sorotan .vf-artikel__isi h3 { font-size: 1.12rem !important; }
.vf-penulis { margin-top: 2rem !important; }
.vf-penulis > * { margin: 0 !important; }
.vf-penulis__label {
  display: inline-block;
  padding: .5rem 3rem 0 0;
  border-top: 1px solid var(--wp--preset--color--ink);
  font-size: .8rem;
  text-transform: uppercase;
}
.vf-penulis__nama { font-family: var(--vf-font-judul, inherit); font-size: 1.25rem; color: var(--wp--preset--color--primary); }
.vf-single-sorotan__judul-samping { margin: .7rem 0 1.5rem !important; font-size: 1rem !important; text-align: center; text-transform: uppercase; }
.vf-sampul.vf-sampul--samping { gap: 12px; }
.vf-sampul--samping > li { min-height: 210px; padding: 24px 20px; }
.vf-sampul--samping .wp-block-post-title { font-size: 1.1rem; }

@media (max-width: 1024px) {
  .vf-sampul.vf-sampul--arsip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .vf-single-sorotan { margin-top: 0 !important; }
}

@media (max-width: 781px) {
  .vf-single-sorotan__utama,
  .vf-single-sorotan__samping { padding: 24px 20px !important; }
  .vf-single-sorotan__foto .wp-element-caption { padding: 8px 20px; }
}

@media (max-width: 781px) {
  .vf-sampul > li { min-height: 56vw; }
  body:not(.paged) .vf-sampul--arsip > li:first-child { min-height: 70vw; padding: 30px 20px; }
  .vf-masthead--arsip { padding: 40px 20px !important; }
}

@media (max-width: 600px) {
  .vf-sampul.vf-sampul--arsip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .vf-sampul.vf-sampul--dua { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  .vf-masthead--hot::after { left: 6%; right: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vf-kartu .wp-block-post-featured-image img,
  .vf-daftar .wp-block-post-featured-image img,
  .vf-utama .wp-block-post-featured-image img { transition: none; }
}

/* ---------- desain mengikuti referensi web klien (body.vf-ref) ----------
   Keputusan user 2026-09-15: referensi di FORM ISIAN = acuan utama. Token diukur dari
   situs referensi (scripts/referensi_desain.py) dan disimpan di opsi velocity_fse_desain;
   warna tetap palet klien. Posisi logo/menu hanya di desktop: di HP `.vf-nav` dengan
   margin otomatis membuat hamburger jatuh di tengah bar (jebakan 2026-09-14). */

body.vf-ref { font-family: var(--vf-font-teks, var(--wp--preset--font-family--jakarta)); }
.vf-ref :is(h1, h2, h3, h4, .wp-block-site-title) { font-family: var(--vf-font-judul, var(--vf-font-teks, inherit)); font-weight: var(--vf-judul-tebal, 800); }
.vf-ref.vf-judul-kapital :is(h1, h2) { text-transform: uppercase; letter-spacing: .02em; }
.vf-ref :is(.wp-element-button, .wp-block-button__link) { border-radius: var(--vf-tombol-radius, 999px) !important; }
.vf-ref.vf-tombol-kapital :is(.wp-element-button, .wp-block-button__link) { text-transform: uppercase; letter-spacing: .04em; }
.vf-ref :is(.vf-kartu-foto, .vf-kotak-ikon, .vf-klien__nama) { border-radius: var(--vf-kartu-radius, 12px); overflow: hidden; }
.vf-ref :is(.vf-foto-bingkai img, .vf-galeri__foto img) { border-radius: var(--vf-kartu-radius, 12px); }
.vf-ref.vf-kartu-bayangan :is(.vf-kartu-foto, .vf-kotak-ikon) { box-shadow: 0 10px 30px rgba(15, 23, 42, .09); }

/* header */
.vf-ref.vf-tanpa-topbar .vf-topbar { display: none; }
.vf-ref.vf-tanpa-ajakan .vf-header__aksi { display: none !important; }
.vf-ref.vf-header-terang .vf-header.has-background {
  background: var(--wp--preset--color--putih) !important;
  color: var(--wp--preset--color--ink) !important;
  box-shadow: 0 1px 0 var(--wp--preset--color--garis), 0 8px 24px rgba(15, 23, 42, .06);
}
.vf-ref.vf-header-terang .vf-header a:where(:not(.wp-element-button)),
.vf-ref.vf-header-terang .vf-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); }
.vf-ref.vf-header-terang .vf-nav .current-menu-item > .wp-block-navigation-item__content,
.vf-ref.vf-header-terang .vf-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--aksen-teks); }
.vf-ref.vf-header-terang .vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--di-primary); }
.vf-ref.vf-header-terang .vf-header .wp-block-site-logo a { padding: 0; background: transparent; }
.vf-ref.vf-header-terang .vf-cari .wp-block-search__button { color: var(--wp--preset--color--ink) !important; }
.vf-ref.vf-header-gelap .vf-header.has-background { background: var(--wp--preset--color--primary-gelap) !important; }
.vf-ref.vf-menu-kapital .vf-nav .wp-block-navigation-item__content { text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; }
.vf-ref.vf-header-lengket header.wp-block-template-part { position: sticky; top: 0; z-index: 60; }
.admin-bar.vf-ref.vf-header-lengket header.wp-block-template-part { top: 32px; }

@media (min-width: 900px) {
  .vf-ref.vf-menu-tengah .vf-nav { margin-inline: auto !important; }
  .vf-ref.vf-menu-kiri .vf-header__bar { justify-content: flex-start !important; }
  .vf-ref.vf-menu-kiri .vf-nav { margin-left: 1.5rem !important; margin-right: auto !important; }
  .vf-ref.vf-logo-tengah .vf-header__bar { flex-wrap: wrap !important; justify-content: center !important; row-gap: .4rem; }
  .vf-ref.vf-logo-tengah .vf-nav { flex-basis: 100%; }
  .vf-ref.vf-logo-tengah .vf-nav .wp-block-navigation__container { justify-content: center; }
}

/* footer terang (referensi berfooter putih/abu) */
.vf-ref.vf-footer-terang .vf-footer.has-background {
  background: var(--wp--preset--color--latar) !important;
  color: var(--wp--preset--color--teks) !important;
  border-top: 1px solid var(--wp--preset--color--garis);
}
.vf-ref.vf-footer-terang .vf-footer :is(h2, h3, .wp-block-site-title, .wp-block-site-title a) { color: var(--wp--preset--color--ink); }
.vf-ref.vf-footer-terang .vf-footer a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--ink); }
.vf-ref.vf-footer-terang .vf-footer a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--aksen-teks); }
.vf-ref.vf-footer-terang .vf-footer .wp-block-social-links .wp-social-link { color: var(--wp--preset--color--ink); }

/* seksi beranda */
.vf-ref.home main.wp-block-group { padding-bottom: 0 !important; }
.wp-block-post-content > .vf-ref-hero:first-child { margin-top: calc(-1 * var(--wp--preset--spacing--40)) !important; }
.vf-ref-seksi.vf-pita + .vf-ref-seksi.vf-pita { margin-top: 0 !important; }
.vf-rata-tengah { text-align: center; }
.vf-rata-tengah > .wp-block-cover__inner-container > *,
.vf-rata-tengah.vf-hero-terang > *,
.vf-rata-tengah.vf-hero > * { margin-inline: auto !important; }
.vf-rata-tengah .wp-block-buttons { justify-content: center; }
.vf-ref-hero.vf-hero-terang:not(:has(.wp-block-columns)) > * { max-width: 760px; }
.vf-ref-seksi .vf-kepala-seksi + .wp-block-shortcode,
.vf-ref-seksi .vf-kepala-seksi ~ .wp-block-buttons { margin-top: 1.5rem; }
.vf-ref-produk > .wp-block-buttons { justify-content: center; }
.vf-klien { gap: .8rem !important; }
.vf-klien__nama {
  margin: 0 !important; padding: .9rem 1rem; text-align: center; font-weight: 700;
  background: var(--wp--preset--color--putih); border: 1px solid var(--wp--preset--color--garis);
  color: var(--wp--preset--color--ink);
}
.vf-pita--gelap .vf-kotak-ikon,
.vf-pita--aksen .vf-kotak-ikon { background: rgba(255, 255, 255, .08); }

/* ---------- beranda & halaman dealer mobil (body.vf-gaya-dealer) ----------
   Susunan mengikuti referensi klien (xpengsurabayaofficial.com, diukur 2026-09-16):
   situs gelap, hero foto + kartu keterangan, kartu model unit berisi angka utama,
   ubin nilai berfoto, teknologi berikon dua kolom, pita promo, kartu test drive &
   simulasi kredit, panel artikel. Warna tetap dari palet klien (hitam/silver/biru
   elektrik) — palet gelap ditulis installer ke wp_global_styles. */

body.vf-gaya-dealer { --vf-dealer-kartu: #17191e; --vf-dealer-kartu-dalam: #22262c; --vf-dealer-radius: 24px; }
body.vf-gaya-dealer a:where(:not(.wp-element-button):not(.wp-block-button__link)) { color: var(--wp--preset--color--aksen-teks); }
body.vf-gaya-dealer :is(h1, h2, h3, h4) strong { color: var(--wp--preset--color--aksen); font-weight: inherit; }
body.vf-gaya-dealer .vf-seksi { padding-block: clamp(2rem, 4vw, 3rem); }
body.vf-gaya-dealer .wp-block-post-content > * { margin-block: 0; }
/* Hanya beranda: hero menempel ke header. Halaman lain tetap berjarak dari pita judul. */
body.vf-gaya-dealer.home main.wp-block-group { padding-top: 0 !important; }
/* Judul seksi referensi rata tengah dengan pengantar sempit. */
body.vf-gaya-dealer .vf-rata-tengah .vf-kepala-seksi p { max-width: 680px; margin-inline: auto; color: var(--wp--preset--color--abu); }

/* hero */
.vf-dealer-hero { align-items: center; }
.vf-dealer-hero.vf-dealer-hero--polos > * { width: 100%; }
.vf-dealer-hero__baris { align-items: center; gap: 2rem; }
.vf-dealer-hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.08; margin-bottom: .9rem; }
.vf-dealer-hero p { max-width: 34rem; color: rgba(255, 255, 255, .82); }
.vf-dealer-hero .wp-block-buttons { margin-top: 1.6rem; }
.vf-dealer-kartu {
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  background: rgba(10, 12, 15, .55);
  backdrop-filter: blur(6px);
}
.vf-dealer-kartu > * { margin-block: 0 !important; }
.vf-dealer-kartu__judul { color: var(--wp--preset--color--aksen); font-size: 1.1rem; font-weight: 700; }
.vf-dealer-kartu__judul + p { margin-top: .8rem !important; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .95rem; }

/* kartu model unit (blok velocity/mobil-kartu) */
.vf-dealer-model { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.vf-dealer-model > li { margin: 0; }
.vf-mobil {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: var(--vf-dealer-radius);
  background: var(--vf-dealer-kartu);
}
.vf-mobil__nama { margin: 0 0 1.1rem; font-size: clamp(1.4rem, 3vw, 2rem); text-transform: uppercase; letter-spacing: .01em; }
.vf-mobil__nama a { color: inherit !important; text-decoration: none; }
.vf-mobil__ringkas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 18px;
  background: var(--vf-dealer-kartu-dalam);
}
.vf-mobil__angka { display: grid; gap: .3rem; }
.vf-mobil__label { font-size: .82rem; color: var(--wp--preset--color--abu); }
.vf-mobil__angka strong { font-size: clamp(1.1rem, 2.4vw, 1.45rem); color: var(--wp--preset--color--ink); }
.vf-mobil__harga { margin: .9rem 0 1.2rem; font-size: .9rem; color: var(--wp--preset--color--abu); }
.vf-mobil__tombol { display: flex; flex-wrap: wrap; gap: .7rem; }
.vf-tombol {
  display: inline-block;
  padding: .7rem 1.5rem;
  border: 1px solid var(--wp--preset--color--aksen);
  border-radius: 999px;
  background: var(--wp--preset--color--aksen);
  color: var(--wp--preset--color--di-aksen) !important;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}
.vf-tombol:hover { background: var(--wp--preset--color--aksen-teks); border-color: var(--wp--preset--color--aksen-teks); }
.vf-tombol--garis { background: transparent; color: var(--wp--preset--color--di-primary) !important; }
.vf-tombol--garis:hover { background: rgba(255, 255, 255, .08); }
.vf-mobil__foto { position: relative; }
.vf-mobil__foto img { display: block; width: 100%; height: auto; border-radius: 16px; }

/* pilihan warna unit */
.vf-warna { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; }
.vf-warna__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .3rem .8rem .3rem .35rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: 999px;
  font-size: .8rem;
  color: var(--wp--preset--color--teks);
}
.vf-warna__bulat { width: 18px; height: 18px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; }

/* ubin nilai berfoto */
.vf-nilai { gap: 0 !important; margin-block: 0 !important; }
.vf-nilai__ubin { position: relative; min-height: 260px; margin: 0 !important; overflow: hidden; }
.vf-nilai__ubin .wp-block-image,
.vf-nilai__ubin figure { margin: 0 !important; height: 100%; }
.vf-nilai__foto img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.vf-nilai__teks {
  position: absolute;
  inset: auto 0 0 0;
  padding: 4rem 1.25rem 1.5rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85));
  text-align: center;
}
.vf-nilai__teks > * { margin-block: 0 !important; }
.vf-nilai__teks h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.vf-nilai__teks p { margin-top: .35rem !important; font-size: .88rem; color: rgba(255, 255, 255, .8); }

/* foto jajaran unit */
.vf-dealer-lineup .wp-block-image { margin: 0; }
.vf-dealer-lineup__foto img { width: 100%; border-radius: var(--vf-dealer-radius); }

/* teknologi & keunggulan berikon di atas latar gelap */
body.vf-gaya-dealer .vf-kotak-ikon {
  border: 1px solid var(--wp--preset--color--garis);
  background: var(--vf-dealer-kartu);
  color: var(--wp--preset--color--teks);
  box-shadow: none;
  border-radius: 16px;
}
body.vf-gaya-dealer .vf-kotak-ikon h3 { color: var(--wp--preset--color--ink); }
body.vf-gaya-dealer .vf-dealer-teknologi .vf-kotak-ikon {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem !important;
  text-align: left;
}
body.vf-gaya-dealer .vf-dealer-teknologi .vf-kotak-ikon::before { margin: 0; flex: 0 0 44px; height: 44px; background: color-mix(in srgb, var(--wp--preset--color--aksen) 20%, transparent); }
body.vf-gaya-dealer .vf-dealer-teknologi .vf-kotak-ikon::after { top: 50%; left: calc(1.2rem + 10px); transform: translateY(-50%); background: var(--wp--preset--color--aksen); }
body.vf-gaya-dealer .vf-dealer-teknologi .vf-kotak-ikon h3 { font-size: 1rem; font-weight: 600; }
body.vf-gaya-dealer .vf-grid-ikon { margin-top: 1.75rem; }

/* pita promo */
.vf-dealer-promo h2 { font-size: clamp(1.8rem, 4.5vw, 3rem); max-width: 22em; }
.vf-dealer-promo p { max-width: 38rem; color: rgba(255, 255, 255, .82); }

/* kartu test drive & simulasi kredit */
.vf-dealer-layanan { gap: 1.25rem !important; }
.vf-dealer-layanan__kartu {
  position: relative;
  height: 100%;
  padding: 1.6rem !important;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: var(--vf-dealer-radius);
  background: var(--vf-dealer-kartu);
}
.vf-dealer-layanan__kartu::before { content: ""; display: block; width: 46px; height: 46px; margin-bottom: 1rem; border-radius: 14px; background: color-mix(in srgb, var(--wp--preset--color--aksen) 20%, transparent); }
.vf-dealer-layanan__kartu::after {
  content: "";
  position: absolute;
  top: calc(1.6rem + 11px);
  left: calc(1.6rem + 11px);
  width: 24px;
  height: 24px;
  background: var(--wp--preset--color--aksen);
  -webkit-mask: var(--vf-ikon) center / contain no-repeat;
  mask: var(--vf-ikon) center / contain no-repeat;
}
.vf-dealer-layanan__kartu h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.vf-dealer-layanan__kartu p { margin: 0 0 1.3rem; font-size: .95rem; }
.vf-dealer-layanan__kartu .wp-block-buttons { margin: 0; }
.vf-dealer-layanan__kartu .wp-block-button { width: 100%; }
.vf-dealer-layanan__kartu .wp-block-button__link { display: block; text-align: center; }

/* panel artikel + kartu artikel gelap */
.vf-dealer-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: var(--vf-dealer-radius);
  background: var(--vf-dealer-kartu-dalam);
}
.vf-dealer-panel > * { margin-block: 0 !important; }
.vf-dealer-panel h2 { grid-column: 1; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.vf-dealer-panel p { grid-column: 1; margin-top: .4rem !important; color: var(--wp--preset--color--abu); }
.vf-dealer-panel .vf-dealer-cari { grid-column: 2; grid-row: 1 / span 2; }
.vf-dealer-cari .wp-block-search__inside-wrapper { gap: .6rem; }
.vf-dealer-cari .wp-block-search__input {
  padding: .8rem 1.1rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: 999px;
  background: var(--wp--preset--color--putih);
  color: var(--wp--preset--color--ink);
}
.vf-dealer-cari .wp-block-search__button { border-radius: 999px !important; padding: .7rem 1.1rem; }
body.vf-gaya-dealer .vf-kartu > li {
  padding: 1rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: 18px;
  background: var(--vf-dealer-kartu);
}
body.vf-gaya-dealer .vf-kartu .wp-block-post-title a { color: var(--wp--preset--color--ink) !important; }
body.vf-gaya-dealer .vf-dealer-info .wp-block-query { margin-top: 1.5rem; }
body.vf-gaya-dealer .vf-dealer-info > .wp-block-buttons { justify-content: center; margin-top: 1.75rem; }

/* arsip & halaman model unit */
.vf-mobil-arsip .vf-kepala-seksi { text-align: center; margin-bottom: 1.5rem; }
.vf-mobil-arsip__cari:empty { display: none; }
.vf-mobil-single__atas { align-items: center; }
.vf-mobil-single__foto img { border-radius: var(--vf-dealer-radius); }
.vf-mobil-single h1 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); text-transform: uppercase; }
.vf-mobil-single__ringkas { color: var(--wp--preset--color--teks); }
.vf-mobil-single__tombol { margin-top: 1.4rem; }
.vf-mobil-lain { list-style: none; padding: 0; }
.vf-mobil-lain img { border-radius: 14px; }
.vf-spek { width: 100%; border-collapse: collapse; margin-block: 1.25rem; font-size: .95rem; }
.vf-spek :is(th, td) { padding: .8rem 1rem; border-bottom: 1px solid var(--wp--preset--color--garis); text-align: left; vertical-align: top; }
.vf-spek th { width: 38%; color: var(--wp--preset--color--abu); font-weight: 600; }
.vf-spek td { color: var(--wp--preset--color--ink); }

/* simulasi kredit (blok velocity/simulasi-kredit) — bentuk mengikuti halaman simulasi
   kredit referensi klien: kolom pilihan di kiri (tipe mobil, slider DP, slider bunga,
   tenor berupa tombol pil) dan panel hasil di kanan (cicilan besar + rincian + ajukan). */
.vf-kredit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0;
  margin-block: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: var(--vf-dealer-radius, 20px);
  background: var(--vf-dealer-kartu, var(--wp--preset--color--latar));
}
.vf-kredit__form {
  display: grid;
  gap: 1.35rem;
  align-content: start;
  min-width: 0;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border-right: 1px solid var(--wp--preset--color--garis);
}
.vf-kredit__baris { display: grid; gap: .4rem; margin: 0; min-width: 0; }
.vf-kredit__baris[hidden] { display: none; }
.vf-kredit__baris label,
.vf-kredit__geser label,
.vf-kredit__tenor-label { font-size: .85rem; font-weight: 700; color: var(--wp--preset--color--teks); }
.vf-kredit :is(input[type="number"], select) {
  /* Tanpa border-box, padding + border menambah lebar di atas 100% sehingga kolom
     isian menembus tepi kartu di layar HP (kartu ber-overflow:hidden, jadi terpotong). */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: 12px;
  background: var(--wp--preset--color--putih);
  color: var(--wp--preset--color--ink);
  font: inherit;
}
.vf-kredit__catatan-harga {
  margin: 0 !important;
  font-size: .82rem;
  color: var(--wp--preset--color--aksen-teks);
}
.vf-kredit__catatan-harga:empty { display: none; }

/* slider DP & bunga */
.vf-kredit__geser { display: grid; gap: .55rem; }
.vf-kredit__geser-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.vf-kredit__geser-kepala strong { font-size: 1.05rem; font-weight: 800; color: var(--wp--preset--color--aksen-di-primary); }
.vf-kredit input[type="range"] {
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0 .5rem;
  border-radius: 999px;
  background: var(--wp--preset--color--putih);
  border: 1px solid var(--wp--preset--color--garis);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.vf-kredit input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 3px solid var(--wp--preset--color--aksen);
  border-radius: 50%;
  background: var(--wp--preset--color--ink);
}
.vf-kredit input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--wp--preset--color--aksen);
  border-radius: 50%;
  background: var(--wp--preset--color--ink);
}
.vf-kredit input[type="range"]:focus-visible { outline: 2px solid var(--wp--preset--color--aksen); outline-offset: 2px; }
.vf-kredit__petunjuk { font-size: .78rem; color: var(--wp--preset--color--abu); }

/* tenor berupa tombol pil */
.vf-kredit__tenor { display: grid; gap: .55rem; }
.vf-kredit__tenor-pil { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.vf-kredit__pil { margin: 0; }
.vf-kredit__pil input { position: absolute; opacity: 0; width: 0; height: 0; }
.vf-kredit__pil span {
  display: block;
  padding: .7rem .4rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: 10px;
  background: var(--wp--preset--color--putih);
  color: var(--wp--preset--color--teks);
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.vf-kredit__pil input:checked + span {
  border-color: var(--wp--preset--color--aksen);
  background: var(--wp--preset--color--aksen);
  color: var(--wp--preset--color--di-aksen);
}
.vf-kredit__pil input:focus-visible + span { outline: 2px solid var(--wp--preset--color--aksen); outline-offset: 2px; }

/* panel hasil */
.vf-kredit__hasil {
  display: grid;
  align-content: start;
  gap: 0;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  background: var(--vf-dealer-kartu-dalam, var(--wp--preset--color--latar));
}
.vf-kredit__label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--abu); }
.vf-kredit__cicilan { margin-top: .35rem; font-size: clamp(1.8rem, 4.5vw, 2.9rem); line-height: 1.1; color: var(--wp--preset--color--aksen-di-primary); }
.vf-kredit__ringkas { margin-top: .35rem; font-size: .85rem; color: var(--wp--preset--color--abu); }
.vf-kredit__bar { margin-top: 1.4rem; height: 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); overflow: hidden; }
.vf-kredit__bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--wp--preset--color--aksen); transition: width .2s ease; }
.vf-kredit__bar-ket { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; font-size: .78rem; color: var(--wp--preset--color--abu); }
.vf-kredit__rincian { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; }
.vf-kredit__rincian li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  padding: .7rem 0;
  border-bottom: 1px solid var(--wp--preset--color--garis);
  font-size: .92rem;
}
.vf-kredit__rincian span { color: var(--wp--preset--color--abu); }
.vf-kredit__rincian strong { color: var(--wp--preset--color--ink); font-weight: 700; }
.vf-kredit__ajukan { display: block; margin-top: 1.5rem; padding: .95rem 1.25rem; border-radius: 12px; text-align: center; text-decoration: none; }
.vf-kredit__catatan { margin: .9rem 0 0 !important; font-size: .78rem; color: var(--wp--preset--color--abu); }

@media (max-width: 860px) {
  .vf-kredit { grid-template-columns: minmax(0, 1fr); }
  .vf-kredit__form { border-right: 0; border-bottom: 1px solid var(--wp--preset--color--garis); }
  .vf-kredit__tenor-pil { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ikon seksi dealer */
.vf-ikon--mobil { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 17h14M4 17l1.6-5.2A2 2 0 0 1 7.5 10h9a2 2 0 0 1 1.9 1.4L20 17'/><circle cx='7.5' cy='17.5' r='1.5'/><circle cx='16.5' cy='17.5' r='1.5'/></svg>"); }
.vf-ikon--baterai { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='15' height='8' rx='2'/><path d='M21 11v2M6 11v2M10 11v2'/></svg>"); }
.vf-ikon--isi { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 3 6 13h5l-1 8 7-10h-5l1-8Z'/></svg>"); }
.vf-ikon--layar { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='13' rx='2'/><path d='M9 21h6'/></svg>"); }
.vf-ikon--kamera { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8h3l1.5-2h7L17 8h3v11H4z'/><circle cx='12' cy='13' r='3'/></svg>"); }
.vf-ikon--perisai { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 5 6v6c0 4.4 3 7.6 7 9 4-1.4 7-4.6 7-9V6l-7-3Z'/><path d='m9 12 2 2 4-4'/></svg>"); }
.vf-ikon--kursi { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4h6a2 2 0 0 1 2 2v7H7z'/><path d='M5 13h14v4H5zM7 17v3M17 17v3'/></svg>"); }
.vf-ikon--atap { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11 12 4l9 7'/><rect x='6' y='11' width='12' height='8' rx='2'/></svg>"); }
.vf-ikon--otak { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='6' width='12' height='12' rx='3'/><path d='M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3'/></svg>"); }
.vf-ikon--kalkulator { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3' width='14' height='18' rx='2'/><path d='M8 7h8M8 12h2M12 12h2M16 12h0M8 16h2M12 16h2M16 16h0'/></svg>"); }
.vf-ikon--sertifikat { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='9' r='5'/><path d='m9 14-1 7 4-2 4 2-1-7'/></svg>"); }
/* Ikon yang bisa muncul dari data situs & nilai cadangan generator (kotak_ikon memakai
   "satu", beranda dealer memakai "kilat"/"bintang", data keunggulan memakai "orang").
   Tanpa definisinya, --vf-ikon kosong dan kotak ikon tampil sebagai kotak polos. */
.vf-ikon--orang { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='7' r='3.5'/><path d='M5 21v-1.5A5.5 5.5 0 0 1 10.5 14h3A5.5 5.5 0 0 1 19 19.5V21'/></svg>"); }
.vf-ikon--kilat { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 3 6 13h5l-1 8 7-10h-5l1-8Z'/></svg>"); }
.vf-ikon--bintang { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12 4 2.4 4.9 5.4.8-3.9 3.8.9 5.4-4.8-2.6-4.8 2.6.9-5.4L4.2 9.7l5.4-.8L12 4Z'/></svg>"); }
.vf-ikon--daun { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 4C10 4 5 9 5 16v4'/><path d='M5 14c8 0 13-3 15-10'/></svg>"); }

@media (max-width: 900px) {
  .vf-mobil { grid-template-columns: minmax(0, 1fr); }
  .vf-mobil__foto { order: -1; }
  .vf-dealer-panel { grid-template-columns: minmax(0, 1fr); }
  .vf-dealer-panel :is(h2, p, .vf-dealer-cari) { grid-column: 1; grid-row: auto; }
  .vf-kredit { grid-template-columns: minmax(0, 1fr); }
  .vf-dealer-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* Header dealer: menu panjang (9 item) + tombol ajakan. Tanpa penyesuaian ini baris menu
   patah jadi dua di layar 1024–1280px. */
@media (min-width: 900px) {
  body.vf-gaya-dealer .vf-header__bar { gap: 1rem; }
  body.vf-gaya-dealer .vf-nav .wp-block-navigation__container { gap: .85rem; flex-wrap: nowrap; }
  body.vf-gaya-dealer .vf-nav .wp-block-navigation-item__content { font-size: .82rem; letter-spacing: .02em; white-space: nowrap; }
  body.vf-gaya-dealer .vf-header__aksi .wp-block-button__link { padding: .6rem 1.1rem; font-size: .85rem; white-space: nowrap; }
  body.vf-gaya-dealer .vf-header .wp-block-site-logo img { max-height: 46px; width: auto; }
}

/* ---------- tombol mengambang velocity-addons (WhatsApp & scroll to top) ----------
   Markup plugin memakai kelas Bootstrap (d-flex, text-white, d-none d-md-inline-block) dan
   CSS-nya tidak mengatur posisi: di tema blok tombol jatuh sebagai pita di bawah halaman. */

.floating-footer { position: fixed; inset: auto 1rem 1rem auto; z-index: 90; display: grid; gap: .6rem; justify-items: end; }
.floating-footer.float-wa-left { inset: auto auto 1rem 1rem; justify-items: start; }
.floating-footer .floating-button { margin: 0; }
.floating-footer .whatsapp-floating a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.1rem;
  border-radius: 999px;
  background: #25d366;
  color: #fff !important;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
.floating-footer .whatsapp-floating a:hover { background: #1da851; }
.floating-footer .whatsapp-floating svg { width: 22px; height: 22px; display: block; }
.floating-footer .whatsapp-floating span { display: inline-flex; align-items: center; }
.floating-footer .scroll-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wp--preset--color--aksen);
  color: var(--wp--preset--color--di-aksen);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
.floating-footer .scroll-to-top svg { width: 20px; height: 20px; }
/* Plugin 2.2.x: tombol fixed sendiri (kanan/bawah .5rem) dan padding .375rem .75rem ikut
   ditambahkan ke 44px → lonjong 68x56. Dikunci jadi lingkaran setinggi tombol WA. */
.floating-footer .floating-button.scroll-to-top {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  min-width: 50px;
  padding: 0;
  aspect-ratio: 1;
  line-height: 1;
  border-radius: 50%;
}
/* Saat scroll-to-top tampil di sisi yang sama, plugin memberi WA kelas wa-shift-scrolltop;
   `margin: 0` di atas sempat membatalkan geserannya sehingga keduanya bertumpuk. */
.floating-footer .floating-button.whatsapp-floating.wa-shift-scrolltop { margin-right: calc(50px + .6rem); }
.floating-footer .floating-button.whatsapp-floating.left.wa-shift-scrolltop { margin-right: 0; margin-left: calc(50px + .6rem); }
@media (max-width: 600px) {
  .floating-footer .whatsapp-floating a { padding: .75rem; }
  .floating-footer .whatsapp-floating .d-none { display: none; }
}

/* Formulir & peta di situs dealer: kolom isian mengikuti permukaan gelap, bukan putih. */
body.vf-gaya-dealer .vf-form {
  border: 1px solid var(--wp--preset--color--garis);
  background: var(--vf-dealer-kartu);
}
body.vf-gaya-dealer .vf-form :is(input:not([type="submit"]), select, textarea) {
  border-color: var(--wp--preset--color--garis);
  background: var(--wp--preset--color--putih);
  color: var(--wp--preset--color--ink);
}
body.vf-gaya-dealer .vf-form :is(input, select, textarea)::placeholder { color: var(--wp--preset--color--abu); }
body.vf-gaya-dealer .vf-form :is(input, select, textarea):focus { outline-color: var(--wp--preset--color--aksen); }
body.vf-gaya-dealer .vf-kontak li span { color: var(--wp--preset--color--abu); }
body.vf-gaya-dealer iframe[title="Peta lokasi"] { border-radius: var(--vf-dealer-radius); display: block; }

/* ---------- isi core/cover mengikuti lebar container situs ----------
   Cover selebar layar (hero, pita promo, pita ajakan) memakai layout "default", jadi isinya
   melebar sampai tepi layar dan judulnya tidak sejajar logo/menu header maupun seksi lain
   (terukur: isi cover mulai di 16px, seksi lain di 83px pada layar 1366px). Lebarnya dibatasi
   wide-size + padding tepi, lalu dipusatkan — bukan lebar penuh.
   Jebakan: core punya aturan `.has-custom-content-position.is-position-* .wp-block-cover__inner-container
   { width: auto }` yang lebih spesifik, karena itu `width` di sini pakai !important. */

.wp-block-cover:is(.vf-dealer-hero, .vf-dealer-promo, .vf-hero-foto, .vf-pita-foto, .vf-ref-hero) > .wp-block-cover__inner-container {
  --vf-tepi: var(--wp--style--root--padding-left, 1.25rem);
  width: 100% !important;
  max-width: calc(var(--wp--style--global--wide-size, 1400px) + var(--vf-tepi) * 2);
  margin-inline: auto;
  padding-inline: var(--vf-tepi);
  box-sizing: border-box;
}
/* Isi di dalamnya sudah selebar container: alignwide/alignfull tidak perlu melebar lagi. */
.wp-block-cover:is(.vf-dealer-hero, .vf-dealer-promo, .vf-hero-foto, .vf-pita-foto, .vf-ref-hero) > .wp-block-cover__inner-container > :is(.alignwide, .alignfull) {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Video latar YouTube/Vimeo di blok cover (backgroundType embed-video) selalu menutupi cover.
   Core WP 7.1 memberi iframe 100vw x 100vh, jadi video 16:9 hanya pas bila layar juga 16:9:
   di HP 390px video tampil 390x219 di tengah hero setinggi 620px (xpengjakartaindonesia.com
   2026-09-17). Ukuran dihitung dari cover sendiri lewat container query: sisi yang kurang
   dilebarkan mengikuti rasio 16:9, kelebihannya terpotong overflow cover. */
.wp-block-cover .wp-block-cover__embed-background { container-type: size; overflow: hidden; }
.wp-block-cover .wp-block-cover__embed-background iframe {
  width: max(100cqw, 177.78cqh) !important;
  height: max(100cqh, 56.25cqw) !important;
  min-width: 0;
  min-height: 0;
  max-width: none;
}

/* ---------- arsip tulisan & kategori situs dealer (templates/archive-dealer.html) ----------
   Mengikuti halaman artikel referensi klien: pita judul gelap (judul besar rata kiri +
   satu baris pengantar + tombol ajakan), kepala seksi di tengah, lalu grid tiga kartu
   artikel — foto ber-badge tanggal, judul, ringkasan dua baris, tautan "Baca Selengkapnya". */

.vf-dealer-arsip .vf-dealer-kepala, .vf-dealer-halaman .vf-dealer-kepala { padding-block: clamp(3rem, 8vw, 6rem) !important; }
.vf-dealer-kepala .vf-rubrik-bar { margin: 0; padding: 0; border: 0; background: none; }
.vf-dealer-halaman .vf-dealer-kepala .wp-block-post-title,
.vf-dealer-kepala .vf-rubrik-bar h1 {
  max-width: 18em;
  margin: 0;
  /* Pita rubrik bawaan memberi padding kiri pada judulnya: di sini judul harus rata
     dengan pengantar & tombol di bawahnya. */
  padding: 0;
  /* Pita judul rubrik biasa memakai huruf kapital & spasi huruf; judul arsip dealer
     mengikuti referensi: huruf normal, ukuran besar. */
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--wp--preset--color--di-primary);
}
/* Isi pita judul dibungkus satu grup (layout default) supaya teks ber-max-width rata kiri:
   layout constrained memberi margin auto pada tiap anaknya sehingga teks sempit jadi terpusat. */
.vf-dealer-kepala__teks > * { margin-inline: 0 !important; }
.vf-dealer-kepala__sub { margin: .9rem 0 0 !important; max-width: 34em; opacity: .82; }
.vf-dealer-kepala__sub:empty { display: none; }
.vf-dealer-kepala .wp-block-term-description { margin: .6rem 0 0 !important; max-width: 40em; opacity: .82; }
.vf-dealer-kepala__aksi { margin: 2rem 0 0 !important; }
.vf-dealer-arsip__pengantar { padding-bottom: 0 !important; }
.vf-dealer-arsip__pengantar h2 { max-width: 24em; margin-inline: auto; }
.vf-dealer-arsip__pengantar p { max-width: 46em; margin-inline: auto; color: var(--wp--preset--color--abu); }

.vf-artikel-kartu { list-style: none; margin: 0; padding: 0; gap: 1.5rem !important; }
/* Grid responsif bawaan WP 7 mengabaikan columnCount dan berhenti di dua kolom pada
   lebar container; referensi memakai tiga kartu sebaris, jadi kolomnya ditetapkan di sini. */
.vf-artikel-kartu.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 960px) {
  .vf-artikel-kartu.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .vf-artikel-kartu.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
.vf-artikel-kartu > li {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: var(--vf-dealer-radius, 20px);
  background: var(--vf-dealer-kartu, var(--wp--preset--color--latar));
}
.vf-artikel-kartu__foto { position: relative; margin: 0 !important; }
.vf-artikel-kartu__foto .wp-block-post-featured-image { margin: 0; overflow: hidden; border-radius: 14px; }
.vf-artikel-kartu__foto .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-artikel-kartu__tanggal {
  position: absolute;
  top: .7rem;
  left: .7rem;
  margin: 0 !important;
  padding: .3rem .7rem;
  border-radius: 6px;
  background: var(--wp--preset--color--aksen);
  color: var(--wp--preset--color--di-aksen);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.vf-artikel-kartu .wp-block-post-title { margin: 1rem 0 0; font-size: 1.15rem; line-height: 1.3; }
.vf-artikel-kartu .wp-block-post-title a { color: var(--wp--preset--color--ink) !important; text-decoration: none; }
.vf-artikel-kartu .wp-block-post-title a:hover { color: var(--wp--preset--color--aksen-teks) !important; }
.vf-artikel-kartu .wp-block-post-excerpt { margin: .6rem 0 0; }
.vf-artikel-kartu .wp-block-post-excerpt__excerpt { margin: 0; font-size: .92rem; color: var(--wp--preset--color--teks); }
.vf-artikel-kartu .wp-block-post-excerpt__more-text { display: none; }
.vf-artikel-kartu__lanjut { margin: 1.1rem 0 0 !important; }
.vf-artikel-kartu__lanjut.wp-block-read-more {
  align-self: flex-start;
  margin-top: auto !important;
  padding-top: 1.1rem;
  color: var(--wp--preset--color--aksen-teks) !important;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
}
.vf-artikel-kartu__lanjut.wp-block-read-more::after { content: " ›"; }
.vf-dealer-arsip .wp-block-query-pagination { margin-top: 2.5rem; }

@media (max-width: 781px) {
  .vf-dealer-kepala .vf-rubrik-bar h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .vf-artikel-kartu { gap: 1.1rem !important; }
}

/* ---------- halaman Tentang Kami situs dealer ----------
   Mengikuti halaman "tentang kami" referensi klien: foto & teks berdampingan, keunggulan
   berikon di tengah, lalu pita ajakan menghubungi. */

.vf-dealer-tentang { align-items: center; gap: 2.5rem !important; }
.vf-dealer-tentang__foto img { border-radius: var(--vf-dealer-radius, 20px); }
.vf-dealer-tentang h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.15; }
.vf-dealer-tentang p { color: var(--wp--preset--color--teks); }
.vf-dealer-cta h2 { max-width: 22em; margin-inline: auto; font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1.15; }
.vf-dealer-cta p { max-width: 44em; margin-inline: auto; color: var(--wp--preset--color--abu); }
.vf-dealer-cta .wp-block-buttons { margin-top: 1.75rem; justify-content: center; }
body.vf-gaya-dealer .vf-dealer-halaman .wp-block-post-content > .vf-seksi:first-child { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- gaya beranda klinik (manifest gaya_beranda=klinik) ----------
   Mengikuti mockup desain klien medikaklinikteknologi.com (2026-09-16): lebar isi 1180px,
   judul navy tebal, label seksi biru-abu kapital, tombol pil, hero foto berpudar putih di kiri,
   poin berikon garis tanpa kotak, kartu solusi putih bergaris, pita muda kebiruan, pita ajakan
   navy bergradasi. Warna tetap dari palet (primary/aksen), bukan hex tetap. */

body.vf-gaya-klinik {
  --wp--style--global--wide-size: 1180px;
  --vf-klinik-muda: color-mix(in srgb, var(--wp--preset--color--aksen) 9%, #fff);
  --vf-klinik-muda-2: color-mix(in srgb, var(--wp--preset--color--aksen) 14%, #fff);
  --vf-klinik-redup: color-mix(in srgb, var(--wp--preset--color--primary) 45%, #fff);
  --vf-klinik-bayang: 0 20px 40px -22px color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
}
.vf-gaya-klinik :is(.vf-klinik-hero, .vf-klinik-seksi, .vf-klinik-pita) :is(h1, h2) {
  color: var(--wp--preset--color--primary);
  font-weight: 800;
  letter-spacing: -.01em;
}
.vf-gaya-klinik :is(.vf-klinik-hero, .vf-klinik-seksi, .vf-klinik-pita) h2 { font-size: clamp(1.55rem, 3vw, 2.05rem); line-height: 1.22; margin: 0; }
.vf-gaya-klinik :is(.vf-klinik-hero, .vf-klinik-seksi, .vf-klinik-pita, .vf-klinik-cta) .vf-label-seksi {
  margin: 0 0 .7rem !important;
  color: var(--vf-klinik-redup);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.vf-gaya-klinik :is(.vf-klinik-hero, .vf-klinik-seksi, .vf-klinik-pita) p:not(.vf-label-seksi, .vf-klinik-sub, .vf-klinik-tautan) {
  color: var(--wp--preset--color--abu);
  font-size: .93rem;
  line-height: 1.7;
}
.vf-klinik-sub { margin: 0 0 .8rem !important; color: var(--wp--preset--color--primary); font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 600; line-height: 1.45; }
.vf-klinik-tautan { margin: 1.1rem 0 0 !important; }
.vf-klinik-tautan a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-bottom: 2px;
  border-bottom: 1.5px solid currentColor;
  color: var(--wp--preset--color--primary) !important;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
}
.vf-klinik-tautan a::after { content: "→"; transition: transform .2s ease; }
.vf-klinik-tautan a:hover::after { transform: translateX(3px); }
.vf-gaya-klinik :is(.vf-klinik-hero, .vf-klinik-seksi, .vf-klinik-pita, .vf-klinik-cta) .wp-block-buttons { margin-top: 1.6rem; gap: .85rem; }
/* tombol isi navy bertulisan putih seperti mockup (bawaan tema: aksen) */
body.vf-gaya-klinik :is(.vf-header, .vf-klinik-hero, .vf-klinik-seksi, .vf-klinik-pita, .vf-hal-seksi) .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--di-primary) !important;
}
body.vf-gaya-klinik :is(.vf-header, .vf-klinik-hero, .vf-klinik-seksi, .vf-klinik-pita, .vf-hal-seksi) .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--wp--preset--color--primary-gelap) !important;
}
.vf-gaya-klinik :is(.vf-klinik-hero, .vf-klinik-seksi, .vf-klinik-pita) .wp-block-button__link {
  padding: .8rem 1.5rem;
  font-size: .88rem;
  font-weight: 600;
}
.vf-gaya-klinik :is(.vf-klinik-hero, .vf-klinik-seksi, .vf-klinik-pita) .wp-block-button:not(.is-style-outline) .wp-block-button__link::after,
.vf-gaya-klinik .vf-klinik-cta .wp-block-button__link::after { content: " →"; }
.vf-gaya-klinik .vf-klinik-hero .is-style-outline .wp-block-button__link {
  border: 1.5px solid var(--wp--preset--color--primary);
  background: rgba(255, 255, 255, .6);
  color: var(--wp--preset--color--primary);
}

/* foto seksi: sudut membulat + bayangan navy lembut */
.vf-klinik-foto { margin: 0 !important; height: 100%; }
.vf-klinik-foto img { display: block; width: 100%; height: 100% !important; border-radius: 16px; box-shadow: var(--vf-klinik-bayang); }

/* 1. hero */
.wp-block-cover.vf-klinik-hero { min-height: 560px; margin-block: 0 !important; padding: 0 !important; align-items: center; }
.vf-klinik-hero > .wp-block-cover__background {
  opacity: 1 !important;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .96) 26%, rgba(255, 255, 255, .72) 40%, rgba(255, 255, 255, 0) 58%) !important;
}
.wp-block-cover.vf-klinik-hero > .wp-block-cover__inner-container {
  --vf-tepi: var(--wp--style--root--padding-left, 1.25rem);
  width: 100% !important;
  max-width: calc(var(--wp--style--global--wide-size) + var(--vf-tepi) * 2);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5rem) var(--vf-tepi);
  box-sizing: border-box;
  color: var(--wp--preset--color--teks);
}
.vf-klinik-hero--polos { background: linear-gradient(135deg, #fff, var(--vf-klinik-muda)); }
.vf-klinik-hero__teks { max-width: 470px; margin-inline: 0 !important; }
.vf-klinik-hero__teks > * { margin-inline: 0 !important; }
.vf-klinik-hero h1 { margin: 0 0 1rem !important; font-size: clamp(2.3rem, 5vw, 3.55rem); line-height: 1.08; }
@media (max-width: 781px) {
  .wp-block-cover.vf-klinik-hero { min-height: 0; align-items: flex-end; }
  .vf-klinik-hero > .wp-block-cover__background {
    background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .94) 38%, #fff 62%) !important;
  }
  .wp-block-cover.vf-klinik-hero > .wp-block-cover__inner-container { padding-top: 12rem; }
}

/* 2 & 6. poin berikon garis (who we are, keunggulan) */
.vf-klinik-seksi { padding-block: clamp(3rem, 7vw, 5.25rem) !important; margin-block: 0 !important; }
.vf-klinik-tentang { align-items: center !important; gap: clamp(1.5rem, 3vw, 2.5rem) !important; margin-block: 0 !important; }
.vf-klinik-tentang > .wp-block-column:last-child:has(.vf-klinik-foto) { align-self: stretch; }
.vf-klinik-poin__grid { gap: 1.25rem !important; margin-top: 0 !important; }
.vf-klinik-poin { position: relative; margin: 0 !important; }
.vf-klinik-poin > * { margin-block: 0 !important; }
.vf-klinik-poin::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: .9rem;
  background: var(--wp--preset--color--primary);
  -webkit-mask: var(--vf-ikon) center / contain no-repeat;
  mask: var(--vf-ikon) center / contain no-repeat;
}
.vf-gaya-klinik .vf-klinik-poin h3 { color: var(--wp--preset--color--primary); font-size: .9rem; font-weight: 700; line-height: 1.3; }
.vf-gaya-klinik .vf-klinik-poin p { margin-top: .45rem !important; font-size: .78rem !important; line-height: 1.5 !important; }

/* pita selebar layar */
.vf-klinik-pita { margin-block: 0 !important; padding-block: clamp(3rem, 7vw, 5.25rem) !important; background: var(--vf-klinik-muda); }
.vf-klinik-pita--muda { padding-block: clamp(2.5rem, 5vw, 3.75rem) !important; background: var(--vf-klinik-muda-2); }
.vf-klinik-kepala-baris { gap: 1.25rem !important; margin-bottom: 2.4rem !important; }
.vf-klinik-kepala { max-width: 460px; }
.vf-klinik-kepala > * { margin-inline: 0 !important; }
.vf-klinik-kepala p:not(.vf-label-seksi) { margin-top: .9rem !important; }
.vf-klinik-kepala-baris > .vf-klinik-tautan { margin: 0 !important; }

/* 3. kartu solusi */
.vf-klinik-kartu__grid { gap: 1rem !important; }
.vf-klinik-kartu__grid.is-layout-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1080px) { .vf-klinik-kartu__grid.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 760px) { .vf-klinik-kartu__grid.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px) { .vf-klinik-kartu__grid.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; } }
.vf-klinik-kartu {
  height: 100%;
  margin: 0 !important;
  padding: 1.6rem 1.35rem !important;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--aksen) 16%, #fff);
  border-radius: var(--vf-kartu-radius, 14px);
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.vf-klinik-kartu:hover { transform: translateY(-4px); box-shadow: var(--vf-klinik-bayang); }
.vf-klinik-kartu > * { margin-block: 0 !important; }
.vf-klinik-kartu::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 1.1rem;
  background: var(--wp--preset--color--primary);
  -webkit-mask: var(--vf-ikon) center / contain no-repeat;
  mask: var(--vf-ikon) center / contain no-repeat;
}
.vf-gaya-klinik .vf-klinik-kartu h3 { color: var(--wp--preset--color--primary); font-size: .92rem; font-weight: 700; line-height: 1.3; }
.vf-gaya-klinik .vf-klinik-kartu p { margin-top: .5rem !important; font-size: .8rem !important; line-height: 1.55 !important; }

/* 4, 5, 6. foto + teks berdampingan */
/* margin-block saja: margin-inline:auto dari layout constrained yang memusatkan kolom alignwide di pita selebar layar */
.vf-klinik-dua { align-items: center !important; gap: clamp(1.75rem, 4vw, 3.25rem) !important; margin-block: 0 !important; }
.vf-klinik-dua p:not(.vf-label-seksi) { max-width: 30em; margin-top: .9rem !important; }
.vf-klinik-unggul .vf-klinik-poin__grid { margin-top: 2rem !important; }
.vf-klinik-unggul .vf-klinik-foto img { aspect-ratio: 1 / 1 !important; }
.vf-klinik-poin__grid.is-layout-grid { grid-template-columns: repeat(var(--vf-klinik-kolom, 3), minmax(0, 1fr)) !important; }
.vf-klinik-unggul .vf-klinik-poin__grid.is-layout-grid { --vf-klinik-kolom: 4; }
/* Poin bertulisan panjang (misi dari company profile) tidak muat 4 kolom di samping foto. */
.vf-klinik-unggul .vf-klinik-poin__grid--panjang.is-layout-grid { --vf-klinik-kolom: 2; }
@media (max-width: 1080px) { .vf-klinik-unggul .vf-klinik-poin__grid.is-layout-grid { --vf-klinik-kolom: 2; } }
@media (max-width: 600px) { .vf-klinik-poin__grid.is-layout-grid { --vf-klinik-kolom: 2; } }

/* 7. kartu artikel */
.vf-klinik-artikel { gap: 1.4rem !important; }
.vf-klinik-artikel.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 860px) { .vf-klinik-artikel.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; } }
.vf-klinik-artikel > li {
  overflow: hidden;
  padding: 0 0 1.35rem !important;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--aksen) 14%, #fff);
  border-radius: var(--vf-kartu-radius, 14px);
  background: #fff;
  box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
  transition: transform .2s ease, box-shadow .2s ease;
}
.vf-klinik-artikel > li:hover { transform: translateY(-4px); box-shadow: var(--vf-klinik-bayang); }
.vf-klinik-artikel > li > :not(.wp-block-post-featured-image) { margin-inline: 1.15rem !important; }
.vf-klinik-artikel .wp-block-post-featured-image { margin: 0 0 -.9rem !important; border-radius: 0 !important; }
.vf-klinik-artikel .wp-block-post-featured-image img { border-radius: 0 !important; }
.vf-klinik-artikel .vf-label { position: relative; display: inline-block; margin-top: 0 !important; margin-bottom: .75rem !important; }
.vf-klinik-artikel .vf-label a {
  display: inline-block;
  padding: .28rem .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--aksen) 24%, #fff);
  color: var(--wp--preset--color--primary) !important;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}
.vf-klinik-artikel .wp-block-post-title { margin-top: 0 !important; font-size: .95rem !important; font-weight: 600; line-height: 1.4; }
.vf-klinik-artikel .wp-block-post-title a { color: var(--wp--preset--color--primary); }
.vf-klinik-artikel .wp-block-post-date { margin-top: .55rem !important; color: var(--wp--preset--color--abu); font-size: .74rem; }

/* 8. pita ajakan navy */
.vf-klinik-cta {
  position: relative;
  margin-block: 0 !important;
  background: linear-gradient(120deg, var(--wp--preset--color--primary-gelap), var(--wp--preset--color--primary) 55%,
    color-mix(in srgb, var(--wp--preset--color--primary) 85%, var(--wp--preset--color--aksen))) !important;
}
.vf-klinik-cta__baris { align-items: center !important; gap: 1.5rem !important; margin-block: 0 !important; }
.vf-klinik-cta h2 { margin: 0; color: inherit; font-size: clamp(1.35rem, 2.6vw, 1.7rem); font-weight: 800; }
.vf-klinik-cta p:not(.vf-label-seksi) { margin-top: .5rem !important; opacity: .82; font-size: .9rem; }
.vf-gaya-klinik .vf-klinik-cta .vf-label-seksi { color: color-mix(in srgb, var(--wp--preset--color--aksen) 55%, #fff); }
.vf-klinik-cta .wp-block-buttons { margin-top: 0 !important; }
.vf-klinik-cta .wp-block-button__link { padding: .75rem 1.4rem; background: #fff !important; color: var(--wp--preset--color--primary) !important; font-size: .88rem; font-weight: 600; }
.vf-klinik-kontak { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.1rem !important; font-size: .86rem; }
.vf-klinik-kontak a { display: inline-flex; align-items: center; gap: .45rem; color: inherit !important; text-decoration: none; }
.vf-klinik-kontak a::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--vf-ikon) center / contain no-repeat; mask: var(--vf-ikon) center / contain no-repeat; }
.vf-klinik-kontak__wa, .vf-klinik-kontak__telp { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.4 2.1L8 9.9a16 16 0 0 0 6 6l1.4-1.2a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.8 2Z'/></svg>"); }
.vf-klinik-kontak__email { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m4 6 8 7 8-7'/></svg>"); }
@media (min-width: 782px) { .vf-klinik-cta__baris > .wp-block-column:last-child { display: flex; flex-direction: column; align-items: flex-start; } }

/* halaman biasa (templates/page.html) selebar beranda: pita judul (contentSize 1400px) dan isi
   (content-size 760px) mengikuti wide-size gaya klinik 1180px — permintaan user 2026-09-16 */
body.vf-gaya-klinik.page:not(.home) .vf-judul-halaman > *,
body.vf-gaya-klinik.page:not(.home) main > .wp-block-post-content,
body.vf-gaya-klinik.page:not(.home) main > .wp-block-post-content > :where(:not(.alignleft, .alignright, .alignfull)) {
  max-width: var(--wp--style--global--wide-size) !important;
}

/* submenu navigasi (menu bertingkat medikaklinikteknologi.com 2026-09-16) */
@media (min-width: 600px) {
  .vf-nav .wp-block-navigation__submenu-container {
    min-width: 230px !important;
    padding: .45rem !important;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, #fff) !important;
    border-radius: 12px;
    background: #fff !important;
    box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
  }
  .vf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: .55rem .8rem !important;
    border-radius: 8px;
    color: var(--wp--preset--color--ink) !important;
    font-size: .9rem;
    white-space: nowrap;
  }
  .vf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: color-mix(in srgb, var(--wp--preset--color--aksen) 12%, #fff);
    color: var(--wp--preset--color--primary) !important;
  }
}
/* footer: hanya menu tingkat atas; submenu tidak bisa dibuka rapi di kolom vertikal */
.vf-footer__menu .wp-block-navigation__submenu-container,
.vf-footer__menu .wp-block-navigation__submenu-icon { display: none !important; }

/* halaman dalam gaya klinik: seksi, grid kartu, langkah, kotak ajakan */
.vf-hal-seksi { margin-block: 0 clamp(2.5rem, 5vw, 3.75rem) !important; }
.vf-hal-seksi > * { margin-inline: 0 !important; }
.vf-gaya-klinik .vf-hal-seksi h2 { margin: 0 0 .9rem; color: var(--wp--preset--color--primary); font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.25; }
.vf-hal-seksi p { max-width: 46em; }
.vf-hal-seksi .vf-label-seksi { margin: 0 0 .5rem !important; color: var(--vf-klinik-redup, #6b7a8c); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vf-hal-seksi .vf-klinik-foto img { aspect-ratio: 16 / 10; object-fit: cover; }
.vf-hal-grid { gap: 1rem !important; margin-top: 1.4rem !important; }
.vf-hal-grid.is-layout-grid { grid-template-columns: repeat(var(--vf-hal-kolom, 3), minmax(0, 1fr)) !important; }
.vf-hal-grid--4.is-layout-grid { --vf-hal-kolom: 4; }
.vf-hal-grid--2.is-layout-grid { --vf-hal-kolom: 2; }
.vf-hal-grid--5.is-layout-grid { --vf-hal-kolom: 5; }
@media (max-width: 1080px) { .vf-hal-grid--5.is-layout-grid { --vf-hal-kolom: 3; } }
@media (max-width: 960px) { .vf-hal-grid.is-layout-grid { --vf-hal-kolom: 2 !important; } }
@media (max-width: 560px) { .vf-hal-grid.is-layout-grid { --vf-hal-kolom: 1 !important; } }
.vf-hal-grid .vf-klinik-kartu { height: 100%; }
.vf-hal-grid .vf-klinik-kartu h3 a { color: inherit; text-decoration: none; }
.vf-hal-grid .vf-klinik-kartu .vf-klinik-tautan { margin-top: .9rem !important; }
.vf-hal-langkah { color: var(--wp--preset--color--aksen-teks); font-size: .74rem !important; font-weight: 800 !important; letter-spacing: .1em; }
.vf-hal-daftar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 2rem; margin: 1.2rem 0 0 !important; padding: 0 !important; list-style: none; }
@media (max-width: 560px) { .vf-hal-daftar { grid-template-columns: minmax(0, 1fr); } }
.vf-hal-daftar li { position: relative; padding-left: 1.7rem; line-height: 1.5; }
.vf-hal-daftar li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 1.1rem; height: 1.1rem;
  background: var(--wp--preset--color--aksen-teks);
  -webkit-mask: var(--vf-ikon-centang) center / contain no-repeat; mask: var(--vf-ikon-centang) center / contain no-repeat;
}
:root { --vf-ikon-centang: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='m8 12 3 3 5-6'/></svg>"); }
.vf-ikon--centang { --vf-ikon: var(--vf-ikon-centang); }
.vf-klinik-kartu--polos::before { display: none !important; }
body.vf-gaya-klinik button[name="vf_form_kirim"] { background: var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--di-primary) !important; }
body.vf-gaya-klinik button[name="vf_form_kirim"]:hover { background: var(--wp--preset--color--primary-gelap) !important; }
.vf-hal-ajakan {
  margin-block: 0 !important;
  padding: clamp(1.75rem, 4vw, 2.75rem) !important;
  border-radius: 18px;
  background: linear-gradient(120deg, var(--wp--preset--color--primary-gelap), var(--wp--preset--color--primary)) !important;
  color: var(--wp--preset--color--di-primary);
}
.vf-hal-ajakan > * { margin-inline: 0 !important; }
.vf-gaya-klinik .vf-hal-ajakan h2 { margin: 0 0 .6rem; color: inherit; font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.vf-hal-ajakan p { opacity: .88; }
.vf-hal-ajakan .wp-block-buttons { margin-top: 1.3rem; }
body.vf-gaya-klinik .vf-hal-ajakan .wp-block-button__link { background: #fff !important; color: var(--wp--preset--color--primary) !important; font-weight: 600; }
body.vf-gaya-klinik .vf-hal-ajakan .wp-block-button__link::after { content: " →"; }
.vf-hal-kontak { margin-top: 1rem !important; }
.vf-hal-kontak p { margin: .3rem 0 !important; }

/* ikon garis gaya klinik (dipakai data fse-klinik) */
.vf-ikon--dukungan { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.6-7 10-7 10Z'/><path d='M9.5 11.5h5M12 9v5'/></svg>"); }
.vf-ikon--ahli { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3v5a4 4 0 0 0 8 0V3'/><path d='M10 12v2a5 5 0 0 0 10 0v-2'/><circle cx='20' cy='10' r='2'/></svg>"); }
.vf-ikon--mitra { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='7' r='3.2'/><path d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/><path d='m15 12 2 2 4-4'/></svg>"); }
.vf-ikon--gedung { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21V8l8-5 8 5v13'/><path d='M9 21v-6h6v6M9 11h.01M15 11h.01M3 21h18'/></svg>"); }
.vf-ikon--gerigi { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M12 2v3M12 19v3M4.9 4.9 7 7M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1'/><circle cx='12' cy='12' r='7'/></svg>"); }
.vf-ikon--lampu { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6M10 21h4'/><path d='M12 3a6 6 0 0 0-3 11.2c.6.5 1 1.1 1 1.8h4c0-.7.4-1.3 1-1.8A6 6 0 0 0 12 3Z'/></svg>"); }
.vf-ikon--monitor { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='13' rx='2'/><path d='M8 21h8M12 17v4M8 10.5h2l1.5-2.5 2 5 1.5-2.5h1'/></svg>"); }
.vf-ikon--dokumen { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3' width='14' height='18' rx='2'/><path d='M9 8h6M9 12h6M9 16h3'/></svg>"); }
.vf-ikon--tim { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='3'/><circle cx='17' cy='9' r='2.4'/><path d='M2.5 20c0-3.3 2.5-5.5 5.5-5.5s5.5 2.2 5.5 5.5M15.5 14.7c2.4.3 4 2.2 4 5.3'/></svg>"); }
.vf-ikon--tumbuh { --vf-ikon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m3 20 6-7 4 4 8-10'/><path d='M15 6h6v6'/></svg>"); }

/* ---------- pencarian gaya klinik (permintaan user 2026-09-16: "sesuai dengan tema web") ----------
   Header: ikon tetap di bar, kolom muncul sebagai kapsul putih di bawah header (tidak menimpa menu).
   Halaman hasil: kerangka seksi beranda — label kecil, judul navy, form pil, kartu putih bersudut. */
body.vf-gaya-klinik .vf-cari .wp-block-search__button { color: var(--wp--preset--color--primary) !important; }
body.vf-gaya-klinik .vf-cari:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
  background: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--di-primary) !important;
}
body.vf-gaya-klinik .vf-cari .wp-block-search__button svg { width: 22px; height: 22px; min-width: 22px; }
body.vf-gaya-klinik .vf-cari .wp-block-search__inside-wrapper { position: static !important; }
body.vf-gaya-klinik .vf-cari .wp-block-search__input {
  position: absolute !important;
  top: calc(100% + 1.1rem) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 60;
  transform: none !important;
  box-sizing: border-box;
  height: 52px;
  padding: 0 1.4rem !important;
  border: 1px solid var(--wp--preset--color--garis) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: var(--vf-klinik-bayang);
  color: var(--wp--preset--color--ink) !important;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
}
body.vf-gaya-klinik .vf-cari .wp-block-search__input:focus { border-color: var(--wp--preset--color--aksen) !important; border-bottom-width: 1px !important; }
body.vf-gaya-klinik .vf-cari:not(.wp-block-search__searchfield-hidden) .wp-block-search__input { width: min(420px, calc(100vw - 2.5rem)) !important; }
@media (max-width: 781px) {
  body.vf-gaya-klinik .vf-cari:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
    position: static !important; padding: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  body.vf-gaya-klinik .vf-cari:not(.wp-block-search__searchfield-hidden) .wp-block-search__input { top: calc(100% + .9rem) !important; width: 100% !important; }
  body.vf-gaya-klinik .vf-cari:not(.wp-block-search__searchfield-hidden) .wp-block-search__button { color: var(--wp--preset--color--di-primary) !important; }
}

body.vf-gaya-klinik.search .vf-tata { gap: 3rem; }
body.vf-gaya-klinik .vf-cari-judul {
  margin: 0 0 1.5rem;
  padding: 1rem 0 0;
}
body.vf-gaya-klinik .vf-cari-judul h1 {
  margin: 0;
  color: var(--wp--preset--color--primary);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
body.vf-gaya-klinik .vf-cari-judul__jumlah { margin: .5rem 0 0; color: var(--wp--preset--color--abu); font-size: .95rem; }

/* Form di halaman hasil */
body.vf-gaya-klinik.search main .wp-block-search:not(.vf-cari) { margin: 0 0 2rem; }
body.vf-gaya-klinik.search main .wp-block-search:not(.vf-cari) .wp-block-search__inside-wrapper {
  gap: .4rem;
  padding: 6px !important;
  border: 1px solid var(--wp--preset--color--garis) !important;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 28px -22px color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent);
}
body.vf-gaya-klinik.search main .wp-block-search:not(.vf-cari) .wp-block-search__input {
  padding: 0 1.1rem !important;
  border: 0 !important;
  background: transparent;
  color: var(--wp--preset--color--ink);
  font-size: 1rem;
}
body.vf-gaya-klinik.search main .wp-block-search:not(.vf-cari) .wp-block-search__input:focus { outline: none; }
body.vf-gaya-klinik.search main .wp-block-search:not(.vf-cari):focus-within .wp-block-search__inside-wrapper { border-color: var(--wp--preset--color--aksen) !important; }
body.vf-gaya-klinik.search main .wp-block-search:not(.vf-cari) .wp-block-search__button {
  margin: 0;
  padding: .75rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--di-primary) !important;
  font-weight: 700;
}
body.vf-gaya-klinik.search main .wp-block-search:not(.vf-cari) .wp-block-search__button:hover { background: var(--wp--preset--color--primary-gelap) !important; }

/* Kartu hasil */
body.vf-gaya-klinik.search .vf-kartu { gap: 1.25rem !important; }
body.vf-gaya-klinik.search .vf-kartu > li {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0 0 1.2rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: 16px;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
body.vf-gaya-klinik.search .vf-kartu > li:hover { transform: translateY(-3px); box-shadow: var(--vf-klinik-bayang); }
body.vf-gaya-klinik.search .vf-kartu > li > * { margin-inline: 1.15rem; }
body.vf-gaya-klinik.search .vf-kartu .wp-block-post-featured-image { margin: 0 0 1rem; border-radius: 0; }
body.vf-gaya-klinik.search .vf-kartu > li:not(:has(.wp-block-post-featured-image))::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 1rem;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234aa8e6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5M9 13h6M9 17h4'/></svg>") center / 56px no-repeat,
    var(--vf-klinik-muda);
}
body.vf-gaya-klinik.search .vf-kartu .vf-label { margin-top: 0; }
body.vf-gaya-klinik.search .vf-kartu .vf-label a,
body.vf-gaya-klinik.search .vf-kartu .vf-label span {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: var(--vf-klinik-muda-2);
  color: var(--wp--preset--color--primary);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
body.vf-gaya-klinik.search .vf-kartu .wp-block-post-title { margin: .55rem 1.15rem .35rem; font-size: 1.05rem; }
body.vf-gaya-klinik.search .vf-kartu .wp-block-post-title a { color: var(--wp--preset--color--primary); text-decoration: none; }
body.vf-gaya-klinik.search .vf-kartu .wp-block-post-title a:hover { color: var(--wp--preset--color--aksen-teks); }
body.vf-gaya-klinik.search .vf-kartu .wp-block-post-date { margin-top: auto; color: var(--wp--preset--color--abu); }

/* Pagination bulat */
body.vf-gaya-klinik.search .wp-block-query-pagination { align-items: center; margin-top: 2.5rem; gap: .5rem; }
body.vf-gaya-klinik.search .wp-block-query-pagination-numbers { display: flex; gap: .4rem; }
body.vf-gaya-klinik.search .wp-block-query-pagination-numbers .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--wp--preset--color--primary);
  font-weight: 700;
}
body.vf-gaya-klinik.search .wp-block-query-pagination-numbers .page-numbers.current { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--di-primary); }
body.vf-gaya-klinik.search :is(.wp-block-query-pagination-next, .wp-block-query-pagination-previous) {
  padding: .6rem 1.2rem;
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: 999px;
  color: var(--wp--preset--color--primary);
  font-weight: 700;
  text-decoration: none;
}
body.vf-gaya-klinik.search :is(.wp-block-query-pagination-next, .wp-block-query-pagination-previous):hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--di-primary); }

/* Hasil kosong */
body.vf-gaya-klinik.search .wp-block-query-no-results {
  padding: 3rem 1.5rem;
  border: 1px dashed color-mix(in srgb, var(--wp--preset--color--aksen) 45%, #fff);
  border-radius: 16px;
  background: var(--vf-klinik-muda);
  text-align: center;
}
body.vf-gaya-klinik.search .wp-block-query-no-results::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='m20 20-4.2-4.2'/></svg>") center / 28px no-repeat,
    var(--wp--preset--color--primary);
}
body.vf-gaya-klinik.search .wp-block-query-no-results p { margin: 0; color: var(--wp--preset--color--primary); font-weight: 600; }

/* Kolom samping di halaman hasil: judul kotak jadi label seksi, kotak kartu putih bersudut. */
body.vf-gaya-klinik.search .vf-samping .vf-kotak {
  padding: 1.4rem 1.4rem 1.5rem;
  border: 1px solid var(--wp--preset--color--garis);
  border-radius: 16px;
  background: #fff;
}
body.vf-gaya-klinik.search .vf-samping .vf-rubrik-bar { margin-bottom: .9rem !important; border: 0; }
body.vf-gaya-klinik.search .vf-samping .vf-rubrik-bar h2 {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--wp--preset--color--aksen-teks);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
}
body.vf-gaya-klinik.search .vf-samping .vf-populer a { color: var(--wp--preset--color--primary); }
body.vf-gaya-klinik.search .vf-samping .vf-populer li::before { color: var(--wp--preset--color--aksen); }
@media (max-width: 781px) {
  body.vf-gaya-klinik .vf-cari-judul { padding-top: .6rem; }
  body.vf-gaya-klinik.search .vf-kartu > li:not(:has(.wp-block-post-featured-image))::before { aspect-ratio: auto; height: 88px; background-size: 40px, auto; }
  body.vf-gaya-klinik.search main .wp-block-search:not(.vf-cari) .wp-block-search__button { padding: .7rem 1.2rem; }
}

/* Logo bertulisan melebar (medikaklinikteknologi.com, 804x182): tinggi dikunci, bukan lebar 170px. */
body.vf-gaya-klinik .vf-header .wp-block-site-logo { flex-shrink: 0; }
body.vf-gaya-klinik .vf-header .wp-block-site-logo a { padding: 0; background: transparent; }
body.vf-gaya-klinik .vf-header .wp-block-site-logo img { width: auto !important; height: 44px; max-height: none; max-width: 210px; object-fit: contain; }
@media (max-width: 781px) {
  body.vf-gaya-klinik .vf-header .wp-block-site-logo img { height: 36px; max-width: 170px; }
}

/* Logo footer (Data Situs logo_footer): tanpa alas, gambar dijadikan putih polos supaya
   tulisan navy terbaca di footer gelap (permintaan user 2026-09-16). */
.vf-footer__logo { margin: 0 0 1rem; }
.vf-footer__logo a { display: inline-flex; }
.vf-footer__logo-img { display: block; width: auto; height: 46px; max-width: 230px; object-fit: contain; filter: brightness(0) invert(1); }

/* Baris bawah footer + tautan legal (Data Situs tautan_legal): kiri hak cipta, kanan tautan;
   di HP urutan dibalik (tautan di atas). */
.vf-footer__bawah:has(.vf-footer__legal) { justify-content: space-between; align-items: center; }
.vf-footer__kiri { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.vf-footer__kiri > * { margin: 0; }
.vf-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; }
.vf-footer__legal a { text-decoration: none; }
.vf-footer__legal a:hover { text-decoration: underline; }
.vf-footer__legal span { opacity: .5; }
@media (max-width: 781px) {
  .vf-footer__bawah:has(.vf-footer__legal) { flex-direction: column-reverse; align-items: flex-start; gap: .8rem; }
}
/* Tombol WA + scroll-to-top (tinggi 50px, jarak .5rem) menutupi ujung kanan baris bawah
   ketika halaman sampai dasar → beri ruang di bawah footer. */
body:has(.floating-button) .vf-footer:has(.vf-footer__legal) { padding-bottom: calc(var(--wp--preset--spacing--40) + 58px) !important; }

/* Menu HP (overlay) rata kiri — navigasi header ber-justify kanan, dan WP memakai setelan itu
   juga untuk overlay (permintaan user 2026-09-16). Submenu menjorok dari kiri.
   Sejak 2026-10-03 berlaku untuk SEMUA gaya, bukan hanya klinik & toko referensi
   (warungmakanibutedy88khaskarawang.com: menu HP paket G masih rata tengah, submenu selalu terbuka). */
body .vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
body .vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
body .vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
body .vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  align-items: flex-start !important;
  text-align: left !important;
}
body .vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { width: 100%; }
body .vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  padding-left: 1.1rem !important;
  padding-right: 0 !important;
}
body .vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { justify-content: flex-start; }

/* Menu HP: submenu tertutup, dibuka lewat tombol panah tanpa bingkai (assets/js/menu-hp.js);
   link selebar baris supaya mudah diketuk (awalnya gaya klinik & toko referensi 2026-09-17, semua gaya 2026-10-03). */
body .vf-nav .is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content { display: block; width: 100%; box-sizing: border-box; }
body .vf-nav .is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation__submenu-container) > .wp-block-navigation-item { width: 100%; }
body .vf-nav .is-menu-open .wp-block-navigation-item.has-child {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
}
body .vf-nav .is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { flex: 1 1 0; width: auto; min-width: 0; }
body .vf-nav .is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -12px -10px -12px auto;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: inherit;
  cursor: pointer;
}
body .vf-nav .is-menu-open .wp-block-navigation-submenu__toggle svg { width: 14px; height: 14px; stroke: currentColor; transform: none !important; transition: transform .2s ease; }
body .vf-nav .is-menu-open .vf-sub-buka > .wp-block-navigation-submenu__toggle svg { transform: rotate(180deg) !important; }
body .vf-nav .is-menu-open :is(.wp-block-navigation__responsive-close, .wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-container-content, .wp-block-navigation__container) { width: 100% !important; max-width: none; }
body .vf-nav .is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
  display: none !important;
  flex-basis: 100%;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  margin-top: .8rem;
}
body .vf-nav .is-menu-open .wp-block-navigation-item.has-child.vf-sub-buka > .wp-block-navigation__submenu-container { display: flex !important; }

/* ---------- referensi: token rencana VERSI 3 (yukpergimancing.com, 2026-09-17) ----------
   Topbar gelap + kolom cari, menu berwarna, keranjang VD Store di header, slider hero,
   kartu kategori VD Store, kartu banner 2 kolom, kartu artikel ringkas, footer 5 kolom +
   pita hak cipta. Semua di balik kelas token (functions.php) atau kelas seksi baru, jadi
   situs berreferensi lama tidak berubah. */

/* topbar gelap */
.vf-ref.vf-topbar-gelap .vf-topbar { display: block; background: #050505; color: #d7d9de; font-size: .78rem; }
.vf-topbar--cari .vf-topbar__isi { align-items: center; padding-block: .3rem; }
.vf-topbar__kiri { opacity: .85; }
.vf-topbar__cari { display: flex; align-items: center; margin: 0 0 0 auto; background: #fff; border-radius: 999px; overflow: hidden; }
.vf-topbar__cari input[type="search"] {
  box-sizing: border-box; width: 190px; height: 28px; padding: 0 .4rem 0 .9rem;
  border: 0; outline: 0; background: transparent; color: #14171f; font: inherit; font-size: .78rem;
}
.vf-topbar__cari button {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px;
  padding: 0; border: 0; background: transparent; color: #14171f; cursor: pointer;
}
@media (max-width: 600px) {
  .vf-topbar__kiri { display: none; }
  .vf-topbar__cari { margin-inline: auto; }
  .vf-topbar__cari input[type="search"] { width: 60vw; }
}

/* menu berwarna (referensi: menu kapital tebal berwarna merek) */
.vf-ref.vf-menu-berwarna .vf-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); font-weight: 700; }
.vf-ref.vf-menu-berwarna .vf-nav .wp-block-navigation-item__content:hover,
.vf-ref.vf-menu-berwarna .vf-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--aksen-teks); }
.vf-ref.vf-menu-berwarna .vf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--di-primary); }
.vf-ref.vf-menu-berwarna .vf-nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--primary); }

/* tombol berwarna utama (aksen klien netral) */
.vf-ref.vf-tombol-primary .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.vf-ref.vf-tombol-primary .wp-element-button:not(.wp-block-search__button):not(.is-style-outline .wp-element-button) {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--di-primary);
}
.vf-ref.vf-tombol-primary .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background-color: var(--wp--preset--color--primary-gelap); }
.vf-ref.vf-tombol-primary .vf-ref-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  background-color: var(--wp--preset--color--putih); color: var(--wp--preset--color--primary);
}

/* keranjang VD Store di header */
.vf-keranjang { display: flex; align-items: center; margin-left: .4rem; color: var(--wp--preset--color--primary); }
.vf-keranjang svg { display: block; }
.vf-keranjang button, .vf-keranjang a { color: inherit; }
.vf-ref.vf-header-keranjang .vf-cari { display: none; }
@media (max-width: 781px) {
  .vf-keranjang { order: 2; margin-left: 0; }
}

/* slider hero */
.vf-ref-slider { position: relative; overflow: hidden; }
.vf-ref-slider > .wp-block-cover { margin: 0 !important; }
/* Slider = seksi pertama beranda: menempel ke header seperti hero tunggal (tanpa celah padding <main>). */
.wp-block-post-content > .vf-ref-slider:first-child { margin-top: calc(-1 * var(--wp--preset--spacing--40)) !important; }
.vf-ref-slider:not(.is-js) > .wp-block-cover:not(:first-child) { display: none; }
.vf-ref-slider.is-js { display: grid; }
.vf-ref-slider.is-js > .wp-block-cover {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s;
}
.vf-ref-slider.is-js > .wp-block-cover.is-aktif { opacity: 1; visibility: visible; }
.vf-ref-slider__judul { font-size: clamp(1.8rem, 4vw, 3rem) !important; }
/* Banner produk (teks kiri, produk kanan): di layar sempit foto digeser ke produk dan dilapis gelap agar teks terbaca. */
.vf-ref-slider .wp-block-cover__inner-container > * { max-width: 560px; }
@media (max-width: 781px) {
  .vf-ref-slider .wp-block-cover__image-background { object-position: 78% center !important; }
  .vf-ref-slider .wp-block-cover__background { opacity: .62 !important; }
}
.vf-ref-slider__titik {
  grid-area: 1 / 1; align-self: end; justify-self: center; z-index: 3;
  display: flex; gap: .5rem; margin-bottom: 1.1rem;
}
.vf-ref-slider__titik button {
  width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .5); cursor: pointer;
}
.vf-ref-slider__titik button.is-aktif { background: var(--wp--preset--color--putih); transform: scale(1.15); }

/* kategori produk VD Store: ubin foto berlabel */
.vf-ref-produk .wps-taxonomy-carousel { max-width: 1040px; margin-inline: auto; }
/* Satu baris ubin per halaman slider (kolom dari shortcode; referensi: 4 ubin + panah). */
.vf-ref-produk .wps-taxonomy-carousel__grid {
  grid-template-columns: repeat(var(--wps-taxonomy-columns, 4), minmax(0, 1fr)) !important; gap: 1rem !important;
  border: 0 !important; padding: .4rem .2rem 1rem;
}
.vf-ref-produk .wps-taxonomy-carousel .flickity-viewport { overflow: hidden; }
.vf-ref-produk .wps-taxonomy-carousel .flickity-prev-next-button { width: 42px; height: 42px; }
.vf-ref-produk .wps-taxonomy-carousel .flickity-prev-next-button.previous { left: -58px; }
.vf-ref-produk .wps-taxonomy-carousel .flickity-prev-next-button.next { right: -58px; }
@media (max-width: 1180px) {
  .vf-ref-produk .wps-taxonomy-carousel { max-width: calc(100% - 100px) !important; }
}
@media (max-width: 768px) {
  .vf-ref-produk .wps-taxonomy-carousel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .7rem !important; }
  .vf-ref-produk .wps-taxonomy-carousel { max-width: calc(100% - 70px) !important; }
  .vf-ref-produk .wps-taxonomy-carousel .flickity-prev-next-button { width: 34px; height: 34px; }
  .vf-ref-produk .wps-taxonomy-carousel .flickity-prev-next-button.previous { left: -40px; }
  .vf-ref-produk .wps-taxonomy-carousel .flickity-prev-next-button.next { right: -40px; }
  .vf-ref-produk .wps-taxonomy-carousel__name { font-size: .82rem; top: .5rem; right: .6rem; }
}
.vf-ref-produk .wps-taxonomy-carousel__item {
  position: relative; display: block; overflow: hidden; text-decoration: none; padding: 0 !important;
  border: 0 !important; box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
  border-radius: var(--vf-kartu-radius, 12px); background: var(--wp--preset--color--primary);
}
.vf-ref-produk .wps-taxonomy-carousel__item { aspect-ratio: 16 / 9; height: auto !important; min-height: 0 !important; }
.vf-ref-produk .wps-taxonomy-carousel__image { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; margin: 0; border-radius: 0; }
.vf-ref-produk .wps-taxonomy-carousel__image-file { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vf-ref-produk .wps-taxonomy-carousel__item:hover .wps-taxonomy-carousel__image-file { transform: scale(1.05); }
.vf-ref-produk .wps-taxonomy-carousel__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent) 0%, transparent 55%);
}
.vf-ref-produk .wps-taxonomy-carousel__name {
  position: absolute; top: .8rem; right: 1rem; z-index: 1; margin: 0;
  color: #fff; font-family: var(--vf-font-judul, inherit); font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* seksi terakhir berlatar (artikel) menempel ke footer, tanpa pita putih */
.vf-ref .wp-block-post-content > .vf-pita:last-child:has(.vf-kartu-ringkas) { margin-bottom: 0 !important; }
.vf-ref-artikel:has(.vf-kartu-ringkas) > * { max-width: 1040px; margin-inline: auto !important; }

/* kartu banner 2 kolom */
.vf-grid-banner { gap: 1.1rem !important; max-width: 1040px; margin-inline: auto !important; }
.vf-kartu-banner {
  position: relative; overflow: hidden; margin: 0 !important; min-height: 260px;
  border-radius: var(--vf-kartu-radius, 16px); background: var(--wp--preset--color--latar);
  box-shadow: 0 6px 22px rgba(15, 23, 42, .12);
}
.vf-kartu-banner__foto { position: absolute !important; inset: 0; margin: 0 !important; }
.vf-kartu-banner__foto img { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; transition: transform .5s ease; }
.vf-kartu-banner:hover .vf-kartu-banner__foto img { transform: scale(1.04); }
.vf-kartu-banner__isi {
  position: relative; z-index: 1; box-sizing: border-box; height: 100%; min-height: 260px; margin: 0 !important;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.2rem 1.1rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .82) 38%, rgba(255, 255, 255, 0) 70%);
}
.vf-kartu-banner--tanpa .vf-kartu-banner__isi { background: none; }
.vf-kartu-banner__teks { max-width: 55%; }
.vf-kartu-banner__teks > * { margin-block: 0 .4rem !important; }
.vf-kartu-banner__teks h3 { font-size: 1.35rem; color: var(--wp--preset--color--primary); }
.vf-kartu-banner__teks p { font-size: .9rem; color: var(--wp--preset--color--ink); }
.vf-kartu-banner .wp-block-buttons { justify-content: flex-end; margin: 0 !important; }
.vf-kartu-banner .wp-block-button__link {
  padding: .45rem 1.6rem !important; border-radius: 999px !important; font-size: .88rem !important;
  letter-spacing: .08em; background: rgba(10, 12, 18, .88) !important; color: #fff !important;
}
@media (max-width: 600px) {
  .vf-kartu-banner__teks { max-width: 75%; }
}

/* kartu artikel ringkas */
.vf-ref-artikel .vf-kepala-baris { align-items: baseline; margin-bottom: 1.4rem !important; }
.vf-ref-artikel .vf-kepala-baris > * { margin: 0 !important; }
.vf-ref-artikel .vf-kepala-baris h2 { color: var(--wp--preset--color--ink); }
.vf-ref-artikel .vf-kepala-baris a { font-size: .9rem; font-weight: 600; text-decoration: none; }
.vf-kartu-ringkas { gap: 1.6rem !important; }
.vf-kartu-ringkas .wp-block-post-featured-image img { border-radius: var(--vf-kartu-radius, 12px); }
.vf-kartu-ringkas .wp-block-post-title { font-size: .98rem; font-weight: 700; }
.vf-kartu-ringkas .wp-block-post-excerpt { margin-top: .4rem; font-size: .88rem; color: var(--wp--preset--color--teks); }
.vf-kartu-ringkas .wp-block-post-excerpt__more-text { margin-top: .7rem; }
.vf-kartu-ringkas .wp-block-post-excerpt__more-link { color: var(--wp--preset--color--ink); font-weight: 600; text-decoration: none; }
/* Kartu artikel ringkas di pita gelap (allikan.com 2026-09-17): judul, ringkasan & tautan
   memakai warna teks pita, bukan ink/teks yang hilang di latar primary. */
.vf-ref .vf-pita--gelap .vf-kepala-baris h2,
.vf-ref .vf-pita--gelap .vf-kepala-baris a,
.vf-pita--gelap .vf-kartu-ringkas .wp-block-post-title a,
.vf-pita--gelap .vf-kartu-ringkas .wp-block-post-excerpt,
.vf-pita--gelap .vf-kartu-ringkas .wp-block-post-excerpt__more-link,
.vf-pita--gelap .vf-kartu-ringkas .wp-block-post-date { color: inherit; }
.vf-pita--gelap .vf-kartu-ringkas .wp-block-post-excerpt { opacity: .88; }
@media (min-width: 782px) {
  .vf-kartu-ringkas.wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* footer 5 kolom + pita hak cipta */
.vf-footer__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .92rem; }
.vf-ref.vf-footer-5 .vf-footer__kolom { gap: 1.8rem; }
.vf-ref.vf-footer-5 .vf-footer__kolom > .wp-block-column:first-child { flex-basis: 24% !important; }
.vf-ref.vf-footer-5 .vf-footer__judul { text-transform: none; letter-spacing: 0; font-size: 1.1rem !important; }
.vf-ref.vf-footer-pita .vf-footer__bawah {
  justify-content: center; margin-top: 2.5rem !important;
  margin-bottom: calc(-1 * var(--wp--preset--spacing--40)) !important;
  padding: .85rem 0; border-top: 0;
  background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); clip-path: inset(0 -100vmax);
}

/* ---------- halaman plugin lewat get_header() (VD Store) ---------- */
.vf-halaman-plugin__isi {
  box-sizing: border-box; width: 100%; max-width: calc(var(--wp--style--global--wide-size, 1400px) + 2 * var(--wp--style--root--padding-right, 1.25rem));
  margin-inline: auto; padding: var(--wp--preset--spacing--50) var(--wp--style--root--padding-right, 1.25rem) var(--wp--preset--spacing--60);
}
.vf-halaman-plugin__isi .wps-container { max-width: none; }

/* ---------- referensi: token rencana VERSI 4 (2026-09-17, centralimpex.com) ----------
   Desain kiriman klien (folder desain/) sebagai acuan: kotak cari, judul seksi rata kiri,
   logo & baris hak cipta footer, banner judul halaman dalam. Kelas body dari functions.php;
   situs tanpa token ini tidak berubah. */
.vf-ref.vf-tanpa-cari .vf-header .vf-cari { display: none !important; }
.vf-topbar__kanan { margin-left: auto; letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; opacity: .85; }
@media (max-width: 781px) { .vf-topbar__kanan { display: none; } }

/* judul seksi beranda rata kiri seperti referensi */
.vf-ref-seksi.vf-rata-kiri .vf-kepala-seksi { max-width: 760px; margin-inline: 0 !important; text-align: left; }
.vf-ref-seksi.vf-rata-kiri > .vf-kepala-seksi,
.vf-ref-seksi.vf-rata-kiri.vf-pita > .vf-kepala-seksi { margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2)) !important; }
.vf-ref-seksi.vf-rata-kiri.vf-ref-ajakan { text-align: left; }
.vf-ref-seksi.vf-rata-kiri.vf-ref-ajakan .wp-block-buttons { justify-content: flex-start; }

/* footer: logo di kolom pertama, judul kolom biasa, baris hak cipta */
.vf-ref.vf-footer-logo .vf-footer__logo { display: inline-block; margin-bottom: .9rem; line-height: 0; }
.vf-ref.vf-footer-logo .vf-footer__logo-img { width: auto; max-width: 220px; max-height: 64px; height: auto; }
/* Logo berwarna gelap tetap terbaca di footer gelap. */
.vf-ref.vf-footer-logo.vf-footer-gelap .vf-footer__logo { padding: .45rem .7rem; border-radius: var(--vf-kartu-radius, 6px); background: var(--wp--preset--color--putih); }
/* Filter pemutih logo footer bawaan tidak dipakai di atas alas putih (logo sempat tak terlihat). */
.vf-ref.vf-footer-logo.vf-footer-gelap .vf-footer__logo-img { filter: none; }
.vf-ref.vf-footer-judul-biasa .vf-footer__judul { text-transform: none; letter-spacing: 0; }
.vf-ref.vf-hak-cipta-terbelah .vf-footer__bawah { justify-content: space-between !important; }
.vf-ref.vf-hak-cipta-tengah .vf-footer__bawah { justify-content: center !important; text-align: center; }

/* banner judul halaman dalam */
.vf-ref:is(.vf-banner-gelap, .vf-banner-aksen, .vf-banner-foto) .vf-judul-halaman.has-background,
.vf-ref:is(.vf-banner-gelap, .vf-banner-aksen, .vf-banner-foto) .vf-judul-halaman :is(h1, .wp-block-post-title, .vf-remah, .vf-remah a, .vf-artikel__tanggal, .wp-block-post-date) {
  color: var(--wp--preset--color--di-primary) !important;
}
.vf-ref.vf-banner-gelap .vf-judul-halaman.has-background { background: var(--wp--preset--color--primary-gelap) !important; }
.vf-ref.vf-banner-aksen .vf-judul-halaman.has-background { background: var(--wp--preset--color--primary) !important; }
.vf-ref.vf-banner-foto .vf-judul-halaman.has-background {
  background: linear-gradient(rgba(10, 16, 30, .62), rgba(10, 16, 30, .62)), var(--vf-banner-foto, none) center / cover,
    var(--wp--preset--color--primary-gelap) !important;
}
.vf-ref.vf-banner-terang .vf-judul-halaman.has-background { background: var(--wp--preset--color--putih) !important; border-bottom: 1px solid var(--wp--preset--color--garis); }
.vf-ref.vf-banner-tengah .vf-judul-halaman { text-align: center; }
.vf-ref.vf-banner-kiri .vf-judul-halaman { text-align: left; }
.vf-ref.vf-banner-tinggi .vf-judul-halaman { padding-block: clamp(3rem, 8vw, 5.5rem) !important; }
.vf-ref.vf-banner-sedang .vf-judul-halaman { padding-block: clamp(2.2rem, 5vw, 3.5rem) !important; }
.vf-remah { margin-top: .6rem; font-size: .85rem; opacity: .85; }
.vf-remah a { color: inherit; text-decoration: none; }
.vf-remah a:hover { text-decoration: underline; }


/* ---------- header referensi toko (vf-header-keranjang, yukpergimancing.com 2026-09-17) ----------
   kreditmotor.rmg.asia: isi header & topbar dalam container ±1160px, logo besar, menu tebal ±17px
   rata kanan dekat ikon keranjang, header datar lebih tinggi, lencana keranjang merah. */
.vf-ref.vf-header-keranjang { --vf-header-lebar: 1160px; }
.vf-ref.vf-header-keranjang .vf-header__bar,
.vf-ref.vf-header-keranjang.vf-topbar-gelap .vf-topbar__isi { max-width: var(--vf-header-lebar) !important; }
.vf-ref.vf-header-keranjang .vf-header { box-shadow: none; border-bottom: 1px solid var(--wp--preset--color--garis); }
.vf-ref.vf-header-keranjang .vf-header.has-background { padding-top: .8rem !important; padding-bottom: .8rem !important; }
/* Blok logo membawa width="170": tinggi dipaksa supaya logo sebesar referensi. */
.vf-ref.vf-header-keranjang .vf-header .wp-block-site-logo img { height: 58px !important; max-height: none; width: auto !important; max-width: 260px; object-fit: contain; }
.vf-ref.vf-header-keranjang .vf-nav { margin-left: auto !important; }
.vf-ref.vf-header-keranjang .vf-nav .wp-block-navigation__container { gap: 1.25rem; flex-wrap: nowrap; }
.vf-ref.vf-header-keranjang .vf-nav .wp-block-navigation-item__content { white-space: nowrap; }
.vf-ref.vf-header-keranjang.vf-menu-kapital .vf-nav .wp-block-navigation-item__content {
  font-size: 1rem; font-weight: 700; letter-spacing: .02em; font-family: var(--vf-font-judul, inherit);
}
.vf-ref.vf-header-keranjang.vf-menu-berwarna .vf-nav .current-menu-item > .wp-block-navigation-item__content,
.vf-ref.vf-header-keranjang.vf-menu-berwarna .vf-nav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px;
}
.vf-ref.vf-header-keranjang .vf-keranjang { margin-left: 1.8rem; color: var(--wp--preset--color--ink); }
.vf-ref.vf-header-keranjang .vf-keranjang .wps-cart-button { padding: .3rem; }
.vf-ref.vf-header-keranjang .vf-keranjang [x-text] {
  background: #dc3545 !important; box-sizing: border-box; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem !important;
  border-radius: 999px; font-size: .68rem; line-height: 1.1rem; text-align: center; font-weight: 700;
  top: -.35rem !important; right: -.45rem !important;
}
.vf-ref.vf-header-keranjang.vf-topbar-gelap .vf-topbar__cari input[type="search"] { width: 210px; }
@media (max-width: 781px) {
  .vf-ref.vf-header-keranjang .vf-header .wp-block-site-logo img { height: 44px !important; }
  .vf-ref.vf-header-keranjang .vf-keranjang { margin-left: .6rem; }
  .vf-ref.vf-header-keranjang .vf-nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--primary); }
}
@media (min-width: 782px) and (max-width: 1200px) {
  .vf-ref.vf-header-keranjang .vf-header .wp-block-site-logo img { height: 48px !important; }
  .vf-ref.vf-header-keranjang .vf-nav .wp-block-navigation__container { gap: .8rem; }
  .vf-ref.vf-header-keranjang.vf-menu-kapital .vf-nav .wp-block-navigation-item__content { font-size: .84rem; letter-spacing: 0; }
  .vf-ref.vf-header-keranjang .vf-keranjang { margin-left: 1rem; }
}

/* ---------- ubin kategori jajargenjang (user 2026-09-17, yukpergimancing.com) ----------
   Referensi kreditmotor.rmg.asia: ubin kategori miring berjajar. Ubin di-skew, foto & label
   di-skew balik supaya tetap tegak; jarak antar-ubin sejajar kemiringan. Hanya gaya toko
   referensi (vf-header-keranjang). */
.vf-ref.vf-header-keranjang .vf-ref-produk { --vf-miring: -14deg; }
.vf-ref.vf-header-keranjang .vf-ref-produk .wps-taxonomy-carousel__grid {
  gap: .55rem !important; padding: .6rem 1.6rem 1.2rem !important;
}
.vf-ref.vf-header-keranjang .vf-ref-produk .wps-taxonomy-carousel__item {
  transform: skewX(var(--vf-miring)); border-radius: 6px !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, .18);
}
.vf-ref.vf-header-keranjang .vf-ref-produk .wps-taxonomy-carousel__image {
  inset: 0 -22%; width: auto; transform: skewX(calc(-1 * var(--vf-miring)));
}
.vf-ref.vf-header-keranjang .vf-ref-produk .wps-taxonomy-carousel__item::after {
  background: linear-gradient(90deg, transparent 35%, color-mix(in srgb, var(--wp--preset--color--primary) 88%, transparent) 100%);
}
.vf-ref.vf-header-keranjang .vf-ref-produk .wps-taxonomy-carousel__name {
  transform: skewX(calc(-1 * var(--vf-miring))); top: .75rem; right: 1.3rem; font-style: italic; letter-spacing: .04em;
}
@media (max-width: 768px) {
  .vf-ref.vf-header-keranjang .vf-ref-produk { --vf-miring: -10deg; }
  .vf-ref.vf-header-keranjang .vf-ref-produk .wps-taxonomy-carousel__grid { gap: .45rem !important; padding: .5rem .9rem 1rem !important; }
  .vf-ref.vf-header-keranjang .vf-ref-produk .wps-taxonomy-carousel__name {
    top: .45rem; right: .8rem; left: .8rem; font-size: .7rem; line-height: 1.2; text-align: right; letter-spacing: .02em;
  }
}

/* ---------- carousel kategori slide per ubin + berulang (inc/vd-store/taxonomy-carousel.php) ----------
   Viewport dipotong berbentuk jajargenjang sejajar ubin (skewX): sudut miring ubin paling kiri/kanan
   tetap utuh, ubin sebelum/sesudahnya (mode berulang) tidak mengintip. Tinggi ubin = lebar x 9/16,
   jadi geseran potongan dihitung dari lebar container (cqw). */
.vf-ref.vf-header-keranjang .vf-ref-produk .vf-kategori-slide {
  container-type: inline-size;
  --k: var(--wps-taxonomy-columns, 4); --t: 0.2493; --px: .3rem; --py: .9rem;
}
.vf-kategori-slide__sel { box-sizing: border-box; width: calc(100% / var(--wps-taxonomy-columns, 4)); padding: var(--py, .9rem) var(--px, .3rem); }
.vf-kategori-slide .main-carousel:not(.flickity-enabled) { display: flex; justify-content: center; }
.vf-ref.vf-header-keranjang .vf-ref-produk .vf-kategori-slide__sel .wps-taxonomy-carousel__item { width: 100%; }
.vf-ref.vf-header-keranjang .vf-ref-produk .vf-kategori-slide .flickity-viewport {
  --o: calc(var(--t) * ((100cqw / var(--k) - 2 * var(--px)) * 0.5625 / 2 + var(--py)));
  overflow: visible !important;
  clip-path: polygon(var(--o) 0, calc(100% + var(--o)) 0, calc(100% - var(--o)) 100%, calc(0px - var(--o)) 100%);
}
@media (max-width: 768px) {
  .vf-ref.vf-header-keranjang .vf-ref-produk .vf-kategori-slide { --k: 2; --t: 0.1763; --px: .25rem; --py: .7rem; }
  .vf-kategori-slide__sel { width: 50%; }
}

/* ---------- halaman dalam toko referensi (yukpergimancing.com 2026-09-17) ---------- */
/* Berita & arsip tulisan (templates/archive-toko.html): kartu sama dengan seksi artikel beranda. */
.vf-arsip-toko > .wp-block-query { max-width: 1040px !important; margin-inline: auto !important; }
.vf-arsip-toko .wp-block-query-pagination { margin-top: 2.5rem; gap: .4rem; }
.vf-ref .vf-judul-halaman .vf-rubrik-bar { margin: 0; padding: 0; border: 0; background: none; }
.vf-ref .vf-judul-halaman .vf-rubrik-bar h1 {
  display: block; margin: 0; padding: 0; background: none; color: var(--wp--preset--color--ink);
  font-size: clamp(1.6rem, 4vw, 2.4rem); text-transform: none; letter-spacing: 0;
}
.vf-ref .vf-judul-halaman .vf-rubrik-bar h1::after { display: none; }

/* Hubungi Kami dua kolom (fse-apply kontak_kolom=2). */
.vf-kontak-dua { gap: 2.5rem !important; align-items: flex-start !important; }
.vf-kontak-dua h3 { margin: 1.6rem 0 .6rem; font-size: 1.25rem; }
.vf-kontak-dua > .wp-block-column > h3:first-child { margin-top: 0; }
.vf-kontak-dua .vf-kontak-intro > :first-child { margin-top: 0; }
.vf-kontak-dua iframe { display: block; width: 100%; height: 440px; border-radius: var(--vf-kartu-radius, 12px); }
.wp-block-post-content:has(> .vf-kontak-dua) { max-width: none; }

/* Detail produk VD Store selebar layar (bukan kotak 1400px). */
.vf-ref.vf-header-keranjang.single-store_product .vf-halaman-plugin__isi { max-width: none; padding-inline: clamp(1.25rem, 3vw, 3rem); }

/* Pita judul halaman toko VD Store (header.php, jalur klasik). */
.vf-judul-halaman--plugin { padding: var(--wp--preset--spacing--50) var(--wp--style--root--padding-right, 1.25rem); }
.vf-judul-halaman--plugin > h1 { box-sizing: border-box; max-width: 1400px; margin: 0 auto; }
.vf-halaman-toko > :first-child { margin-top: 0; }

/* ---------- detail produk & halaman biasa toko referensi (user 2026-09-17) ---------- */
/* Gambar galeri produk VD Store: width & height 100% dalam bingkai 4:5 (bawaan plugin 320px contain). */
.vf-ref.vf-header-keranjang.single-store_product .wps-product-gallery .carousel-cell,
.vf-ref.vf-header-keranjang.single-store_product .wps-product-gallery-open { aspect-ratio: 4 / 5; height: auto !important; }
.vf-ref.vf-header-keranjang.single-store_product .wps-product-gallery-open img,
.vf-ref.vf-header-keranjang.single-store_product .wps-product-gallery .wps-img-320 {
  display: block; width: 100% !important; height: 100% !important; max-height: none; object-fit: cover;
}
/* Halaman biasa: isi selebar container situs, bukan kolom teks 760px. */
.vf-ref.vf-header-keranjang.page:not(.home) main.wp-block-group { --wp--style--global--content-size: var(--wp--style--global--wide-size, 1400px); }

/* ---------- header toko: link profil & menu Produk bertingkat (user 2026-09-17) ---------- */
.vf-profil-toko { display: flex; align-items: center; margin-left: 1rem; }
.vf-profil-toko .wps-link-profile img { display: block; border-color: var(--wp--preset--color--garis) !important; transition: box-shadow .2s ease; }
.vf-profil-toko .wps-link-profile:hover img { box-shadow: 0 0 0 2px var(--wp--preset--color--primary); }
@media (max-width: 781px) {
  .vf-profil-toko { order: 3; margin-left: .5rem; }
}
@media (min-width: 782px) {
  /* Sub-submenu (subkategori) membuka ke kanan, sejajar item induknya. */
  .vf-ref.vf-header-keranjang .vf-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    top: -.45rem !important; left: 100% !important; margin-left: .35rem;
  }
  .vf-ref.vf-header-keranjang .vf-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: .9rem; font-weight: 600; text-transform: none; letter-spacing: 0;
  }
  .vf-ref.vf-header-keranjang .vf-nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle { color: var(--wp--preset--color--ink); }
}

/* Menu HP toko: item rata kiri penuh, profil tidak mepet tepi. */
@media (max-width: 781px) {
  .vf-ref.vf-header-keranjang .vf-nav .is-menu-open .wp-block-navigation__container { gap: .9rem !important; }
  .vf-ref.vf-header-keranjang .vf-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: .9rem; text-transform: none; }
  .vf-ref.vf-header-keranjang .vf-profil-toko .wps-link-profile img { width: 26px !important; height: 26px !important; }
}
/* Overlay menu HP berlatar warna utama: semua tautan (termasuk aktif/hover) berwarna teks-di-primary. */
.vf-ref.vf-header-keranjang .vf-nav .is-menu-open .wp-block-navigation-item__content,
.vf-ref.vf-header-keranjang .vf-nav .is-menu-open .wp-block-navigation-item__content:hover,
.vf-ref.vf-header-keranjang .vf-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--di-primary) !important; background: transparent !important;
}
.vf-ref.vf-header-keranjang .vf-nav .is-menu-open .wp-block-navigation-submenu__toggle { color: var(--wp--preset--color--di-primary) !important; }
.vf-ref.vf-header-keranjang .vf-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }
.vf-ref.vf-header-keranjang .vf-nav .is-menu-open .wp-block-navigation__submenu-container { width: 100%; box-sizing: border-box; background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* Footer toko 5 kolom (inc/referensi.php velocity_fse_footer_toko). */
@media (min-width: 782px) {
  .vf-ref.vf-footer-5 .vf-footer__kolom--toko {
    display: grid !important; grid-template-columns: 1.25fr .8fr .8fr 1.15fr 1.25fr; gap: 2rem !important;
  }
  .vf-ref.vf-footer-5 .vf-footer__kolom--toko > .wp-block-column { flex-basis: auto !important; min-width: 0; }
}
.vf-footer__kolom--toko .vf-sosmed.wp-block-social-links { margin-top: 1rem; }
@media (max-width: 781px) {
  .vf-ref.vf-footer-5 .vf-footer__kolom--toko { flex-wrap: wrap !important; }
  .vf-ref.vf-footer-5 .vf-footer__kolom--toko > .wp-block-column { flex-basis: 100% !important; }
}

/* ---------- lebar tetap toko referensi (manifest lebar_wadah, yukpergimancing.com 2026-09-17) ----------
   Semua wadah gaya toko mengikuti lebar global (--wp--style--global--wide-size, = wadah_px bila
   ditetapkan): header, topbar, seksi beranda, pita judul, halaman biasa, halaman toko & detail produk. */
.vf-ref.vf-header-keranjang.vf-ref-lebar { --vf-header-lebar: var(--wp--style--global--wide-size); }
.vf-ref.vf-header-keranjang.vf-ref-lebar :is(.vf-grid-banner, .vf-arsip-toko > .wp-block-query) {
  max-width: var(--wp--style--global--wide-size) !important;
}
/* Carousel kategori menyisakan ruang panah kiri-kanan di semua lebar. */
.vf-ref.vf-header-keranjang.vf-ref-lebar .vf-ref-produk .wps-taxonomy-carousel {
  max-width: min(var(--wp--style--global--wide-size), calc(100% - 120px)) !important;
}
@media (max-width: 768px) {
  .vf-ref.vf-header-keranjang.vf-ref-lebar .vf-ref-produk .wps-taxonomy-carousel { max-width: calc(100% - 84px) !important; }
}
.vf-ref.vf-header-keranjang.vf-ref-lebar .vf-ref-artikel:has(.vf-kartu-ringkas) > * { max-width: var(--wp--style--global--wide-size); }
.vf-ref.vf-header-keranjang.vf-ref-lebar .vf-judul-halaman > *,
.vf-ref.vf-header-keranjang.vf-ref-lebar .vf-judul-halaman--plugin > h1 { max-width: var(--wp--style--global--wide-size) !important; margin-inline: auto !important; }
.vf-ref.vf-header-keranjang.vf-ref-lebar .vf-halaman-plugin__isi,
.vf-ref.vf-header-keranjang.vf-ref-lebar.single-store_product .vf-halaman-plugin__isi {
  max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--style--root--padding-right, 1.25rem));
  padding-inline: var(--wp--style--root--padding-right, 1.25rem);
}

/* ---------- tombol menu di bawah 782px untuk semua gaya (iklimjayaroster.com, 2026-10-03) ----------
   Core baru melipat menu di bawah 600px; di 600-781px (HP mendatar, tablet kecil) menu 7-8 item
   tampil sebaris dan berdesakan dengan logo sampai keluar tepi layar. */
@media (min-width: 600px) and (max-width: 781px) {
  .vf-header .vf-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
  .vf-header .vf-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
  .vf-header .vf-nav .wp-block-navigation__responsive-container.is-menu-open { display: flex !important; }
}

/* ---------- header toko responsif (user 2026-09-17) ----------
   Menu lengkap + keranjang + profil butuh ±780px: di bawah 782px selalu pakai tombol menu
   (bawaan core baru di bawah 600px, sehingga di 600-781px menu, keranjang & profil terpotong). */
@media (min-width: 600px) and (max-width: 781px) {
  .vf-ref.vf-header-keranjang .vf-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
  .vf-ref.vf-header-keranjang .vf-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
  .vf-ref.vf-header-keranjang .vf-nav .wp-block-navigation__responsive-container.is-menu-open { display: flex !important; }
}
@media (max-width: 781px) {
  .vf-ref.vf-header-keranjang .vf-header__bar { gap: .6rem !important; }
  .vf-ref.vf-header-keranjang .vf-header .wp-block-site-logo { flex: 0 1 auto; min-width: 0; }
  .vf-ref.vf-header-keranjang .vf-header .wp-block-site-logo img { max-width: 100%; object-fit: contain; object-position: left center; }
  .vf-ref.vf-header-keranjang .vf-nav { flex: 0 0 auto; }
  .vf-ref.vf-header-keranjang .vf-keranjang { flex: 0 0 auto; margin-left: .2rem; }
  .vf-ref.vf-header-keranjang .vf-profil-toko { flex: 0 0 auto; margin-left: .75rem; }
}
@media (max-width: 359px) {
  .vf-ref.vf-header-keranjang .vf-header .wp-block-site-logo img { height: 36px !important; }
  .vf-ref.vf-header-keranjang .vf-topbar__cari input[type="search"] { width: 58vw; }
}

/* Tombol & aksen VD Store memakai palet situs, bukan biru bawaan plugin (allikan.com 2026-09-17).
   Hanya build baru (vf-tampilan-2) supaya toko lama tidak berubah warna. */
body.vf-tampilan-2 {
  --primary-color: var(--wp--preset--color--primary);
  --primary-color-hover: var(--wp--preset--color--primary-gelap);
  --blue-500: var(--wp--preset--color--primary);
  --blue-600: var(--wp--preset--color--primary);
  --blue-700: var(--wp--preset--color--primary-gelap);
  --callout-title-color: var(--wp--preset--color--primary);
}
body.vf-tampilan-2 .wps-price-range .wps-slider .wps-progress,
body.vf-tampilan-2 .wps-label-badge.label-recommended { background: var(--wp--preset--color--primary); }
body.vf-tampilan-2 .carousel-nav .carousel-cell.is-nav-selected { border-color: var(--wp--preset--color--primary); }
body.vf-tampilan-2 .wps-price-range input[type="range"] { accent-color: var(--wp--preset--color--primary); }

/* Slot iklan portal berita (blok velocity/iklan, Tampilan → Iklan). */
.vf-iklan { margin-block: var(--wp--preset--spacing--40, 1.5rem); text-align: center; }
.vf-iklan a { display: block; text-decoration: none; }
.vf-iklan__gambar { display: block; width: 100%; height: auto; margin-inline: auto; }
.vf-iklan--kosong a {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
	min-height: 90px; padding: 1rem; border: 1px dashed currentColor; opacity: .7;
	color: inherit; background: color-mix(in srgb, currentColor 4%, transparent);
}
.vf-iklan--kosong a:hover { opacity: 1; }
.vf-iklan__label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.vf-iklan__ajak { font-size: .9rem; font-weight: 600; }
.vf-samping .vf-iklan--kosong a { min-height: 250px; }

/* Arsip global portal berita (parts/arsip.html): daftar foto kiri + teks. */
.vf-daftar-berita { display: grid; gap: var(--wp--preset--spacing--30, 1.25rem); list-style: none; padding: 0; }
.vf-daftar-berita__item { gap: 1rem; }
.vf-daftar-berita__foto { flex: 0 0 34%; margin: 0; }
.vf-daftar-berita__foto img { width: 100%; height: 100%; object-fit: cover; }
.vf-daftar-berita__teks { flex: 1 1 auto; min-width: 0; }
.vf-daftar-berita__teks > * { margin-block: 0 .35rem; }
.vf-daftar-berita__judul { font-size: 1.15rem; line-height: 1.3; }
.vf-daftar-berita__tanggal, .vf-daftar-berita__ringkas { font-size: .875rem; opacity: .8; }
.vf-cari-arsip { margin-block: 0 1.25rem; }
@media (max-width: 600px) {
	.vf-daftar-berita__item { flex-wrap: wrap !important; }
	.vf-daftar-berita__foto { flex-basis: 100%; }
	.vf-daftar-berita__ringkas { display: none; }
}

/* Kartu program Velocity Donasi (inc/donasi.php): arsip /donasi/ & Query Loop postType donasi. */
.vf-donasi-kartu {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--putih);
	border: 1px solid var(--wp--preset--color--garis);
	border-radius: var(--vf-kartu-radius, 15px);
}
.vf-donasi-kartu__foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.vf-donasi-kartu__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-donasi-kartu__isi { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.1rem 1.2rem 1.3rem; }
.vf-donasi-kartu__judul { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.vf-donasi-kartu__judul a { color: var(--wp--preset--color--ink); text-decoration: none; }
.vf-donasi-kartu__progres { height: 7px; overflow: hidden; background: var(--wp--preset--color--latar); border-radius: 99px; }
.vf-donasi-kartu__progres span { display: block; height: 100%; background: var(--wp--preset--color--primary); border-radius: inherit; }
.vf-donasi-kartu__angka, .vf-donasi-kartu__akhir { margin: 0; font-size: .9rem; color: var(--wp--preset--color--abu); }
.vf-donasi-kartu__angka strong { color: var(--wp--preset--color--primary); font-variant-numeric: tabular-nums; }
.vf-donasi-kartu__tombol { margin-top: auto; align-self: flex-start; }