di semua
kondisi render (kelihatan di Chrome biasa: latar biru pojok kanan-atas
nyisa siku putih tipis, padahal aman di screenshot headless). Membulatkan
background sel itu sendiri lebih robust, wrapper tetap dipertahankan
untuk bingkai luarnya. */
.spec-table th:first-child { border-top-left-radius: var(--r-md); }
.spec-table th:last-child { border-top-right-radius: var(--r-md); }
.spec-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-md); }
.spec-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-md); }
.spec-table td {
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--c-border);
}
.spec-table tr td:last-child { width: 35%; }
/* ------------------------------------------------------------
10. BARIS SERTIFIKASI
------------------------------------------------------------ */
.cert-row {
/* Pengali ukuran logo per lebar layar (lihat media query di bawah). */
--cert-skala: 1;
display: flex;
flex-wrap: wrap;
align-items: center; /* semua logo di garis tengah yang sama */
gap: var(--sp-6) var(--sp-8); /* dump: 34px antar logo sebaris */
}
/* UKURAN DIMILIKI LOGONYA, BUKAN URUTANNYA (2026-10-09).
Dulu tinggi dipatok lewat :nth-child (86/82/40/79px untuk urutan desain
ISO-ISO14001-FSSC-Halal), sehingga produk dengan sertifikat atau urutan
lain tampil kacau: FSSC 86px tinggi, ISO 14001 40px, dan logo ke-5 dst.
tanpa batas sama sekali (seukuran berkasnya).
Sekarang lebarnya dihitung PHP per logo supaya muat di kotak 220x84
(anaya_logo_sertifikat_img, inc/helpers.php) dan dikirim sebagai --w.
height:auto + atribut width/height asli = rasio terjaga, tidak pernah
gepeng; max-width:100% = tidak pernah meluber di layar sempit. */
.cert-row img {
width: calc(var(--w, 84px) * var(--cert-skala));
height: auto;
max-width: 100%;
}
@media (max-width: 640px) {
/* HP: logo persegi 84 -> 60px, FSSC 220 -> 158px. Muat 3-4 logo
sebaris di kolom 300-340px tanpa ada yang menyusut sendirian. */
.cert-row {
--cert-skala: 0.72;
gap: var(--sp-5) var(--sp-6);
}
}
/* Carousel sertifikasi (halaman Tentang) — tampil 4, panah bila lebih. */
.cert-carousel {
/* Mode dibaca JS lewat getComputedStyle (assets/js/cert-carousel.js).
Ditaruh di CSS supaya BREAKPOINT-nya cuma ada di satu tempat — prinsip
yang sama dengan jumlah kolom, yang juga dibaca dari CSS dan tidak
pernah diduplikasi di JS. */
--cert-mode: halaman;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5); /* desain ~19px */
}
.cert-carousel__item {
aspect-ratio: 289 / 402; /* dari dump Tentang */
background: var(--c-placeholder);
border-radius: var(--r-md);
overflow: hidden;
}
.cert-carousel__item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Tetap 2 kolom sampai layar terkecil. Sempat turun ke 1 kolom di <=640px,
tapi item ini rasio potret 289:402 — di 390px satu kartu jadi 452px tinggi
dan section Sertifikasi membengkak ke 2007px (4 kartu beruntun). Sebagai
thumbnail bukti sertifikat, 2 kolom sudah cukup terbaca dan section-nya
tinggal ~600px. */
/* Panah geser carousel sertifikat — di sisi kiri & kanan kartu.
Tidak ada di dump (desain cuma menampilkan 4 kotak tanpa navigasi), tapi
katalog sertifikat klien akan lebih dari 4, jadi navigasinya wajib nyata.
Dirender hanya kalau jumlahnya melebihi yang muat; dengan tepat 4 kartu
halaman Tentang tetap sama persis dengan desain. */
.cert-carousel-wrap { position: relative; }
.cert-nav {
position: absolute;
top: 50%;
z-index: 1;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--c-border);
border-radius: 50%;
background: var(--c-white);
box-shadow: var(--shadow-card);
color: var(--c-primary);
cursor: pointer;
transition: background-color var(--t-fast), color var(--t-fast);
}
.cert-nav .icon { width: 18px; height: 18px; }
.cert-nav:hover:not(:disabled) {
background: var(--c-primary);
color: var(--c-white);
}
.cert-nav:disabled,
.cert-nav.is-disabled {
opacity: 0.35;
cursor: default;
box-shadow: none;
}
/* Setengah menumpang KELUAR dari tepi kartu, memanfaatkan gutter container.
Batas amannya dihitung, bukan dikira-kira: `--gutter` itu
clamp(20px, 8.3vw, 80px), jadi ruang tersempit ada di layar paling kecil
— 360px memberi 29,9px dan 390px memberi 32,4px. Geseran di sini
setengah lebar tombol: 22px (desktop) dan 18px (<=768px, tombol 36px),
dua-duanya masih di dalam ruang itu sehingga TIDAK menimbulkan overflow
horizontal di lebar mana pun. Kalau tombolnya diperbesar, hitung ulang. */
.cert-nav--prev { left: 0; translate: -50% -50%; }
.cert-nav--next { right: 0; translate: 50% -50%; }
@media (max-width: 768px) {
.cert-nav { width: 36px; height: 36px; }
.cert-nav .icon { width: 15px; height: 15px; }
}
@media (max-width: 1024px) {
.cert-carousel { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
/* <=768px: SLIDER GESER-SAMPING, digulir dengan jari.
Di layar sempit panah bukan alat yang tepat — ia menumpang di atas kartu
dan menuntut ketepatan tekan, sementara gulir mendatar sudah jadi gerak
bawaan di HP. Jadi panahnya disembunyikan dan gulirnya diserahkan ke
peramban: tidak ada transform, tidak ada penghitungan posisi, dan
inersia/momentum ikut dapat gratis.
Lebar kartu `clamp(200px, 60vw, 260px)` — BUKAN persentase container.
Persentase tunggal tidak bisa melayani dua ukuran layar sekaligus: 78%
memberi 254px yang pas di HP 390px, tapi di tablet 768px melar jadi
500x695 — satu kartu setinggi hampir seluruh layar. Dengan clamp, HP
dapat ~234px (kartu berikutnya mengintip, dan intipan itulah satu-satunya
isyarat bahwa daftarnya berlanjut) sementara tablet berhenti di 260px
sehingga muat dua kartu lebih sedikit intipan.
Batas atas 260px sengaja di bawah lebar kartu desktop (285px): ini tetap
thumbnail bukti, bukan pembaca dokumen.
⚠️ `grid-template-columns: none` WAJIB. Tanpa itu aturan 2 kolom di atas
masih berlaku, item mengisi kedua kolom eksplisit lebih dulu, dan yang
ikut `grid-auto-columns` cuma sisanya — lebarnya jadi campur aduk. */
@media (max-width: 768px) {
.cert-carousel {
--cert-mode: geser;
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: clamp(200px, 60vw, 260px);
overflow-x: auto;
overscroll-behavior-x: contain; /* jangan memicu gestur "kembali" peramban */
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}
/* Chromium & WebKit — keduanya perlu, dan keduanya sudah diverifikasi di
tools/uji-lintas-peramban.py. */
.cert-carousel::-webkit-scrollbar { display: none; }
.cert-carousel__item { scroll-snap-align: start; }
.cert-nav { display: none; }
}
/* ------------------------------------------------------------
11. HERO
------------------------------------------------------------ */
.hero {
position: relative;
display: grid;
place-items: center;
/* 329px, bukan 320px: dicek ke 5 dump (Tentang, Blog, Blog Detail, Kontak,
Produk) — Rectangle 1 selalu 1440x329 mulai y=152, tanpa kecuali. */
min-height: 329px;
padding-block: var(--sp-20);
color: var(--c-white);
text-align: center;
background-size: cover;
background-position: center;
isolation: isolate;
}
/* Overlay menjaga teks putih tetap lolos kontras AA di atas foto apa pun. */
.hero::after {
content: '';
position: absolute;
inset: 0;
background: var(--overlay-hero);
z-index: -1;
}
/* Foto yang sudah gelap sendiri (bubuk di latar hitam, cairan) —
overlay default akan membuatnya terlalu gelap. */
.hero--soft::after { background: var(--overlay-hero-soft); }
.hero--tall { min-height: 560px; }
/* Hero Home: 640px sesuai artboard. Padding atas-bawah sengaja tidak simetris —
di desain blok teks duduk ~53px di bawah titik tengah hero, bukan pas tengah. */
.hero--home {
min-height: 640px;
padding-block: var(--sp-30) var(--sp-6);
}
/* Dump mobile (412px): hero 520px, bukan 640px seperti artboard desktop.
Paddingnya ikut dikecilkan — dengan --sp-30 di atas, blok teks terdorong
melewati tinggi barunya. Dump: judul mulai y 209 dari hero yang mulai 0. */
@media (max-width: 640px) {
.hero--home {
min-height: 520px;
padding-block: var(--sp-20) var(--sp-6);
}
}
/* ------------------------------------------------------------
HERO CAROUSEL (Home)
Slide bertumpuk, yang berpindah cuma opasitasnya. Dipilih crossfade
bukan geser mendatar karena dump menaruh judul & tombol di posisi yang
SAMA di setiap slide -- geser mendatar akan menggerakkan teks yang
seharusnya diam.
------------------------------------------------------------ */
/* Foto latar pindah ke tiap slide, jadi sectionnya sendiri tidak punya. */
.hero-slider { background-image: none; }
/* ⚠️ LAPISAN DITULIS POSITIF SEMUA — jangan pernah memakai z-index negatif
di sini.
Versi pertama menaruh track di `z-index: -1`, lalu `-2` untuk mengembalikan
gradien putih di tepi atas. Yang kedua memperbaiki tampilannya tapi
MEMATIKAN SELURUH ISI SLIDE: anak ber-z-index negatif dilukis di BELAKANG
kotak induknya, sehingga `.hero` sendiri yang menerima setiap klik.
Terukur `document.elementFromPoint()` di tengah tombol "Dapatkan Penawaran
Gratis" mengembalikan `section.hero`, bukan tombolnya — tombol hero jadi
tidak bisa diklik sama sekali, tanpa satu pun galat.
Urutannya sekarang, semuanya di dalam `.hero` yang ber-`isolation: isolate`:
1 track -> foto + teks + tombol
2 gradien -> putih di tepi atas, DI ATAS foto
3 kontrol -> panah & titik
Gradien boleh di atas teks karena tingginya cuma 260px (--fade-white-h)
sementara judul hero mulai di ~400px; dan ia diberi `pointer-events: none`
supaya tidak ikut menelan klik di wilayah itu. */
.hero-slider__track {
position: absolute;
inset: 0;
z-index: 1;
}
.hero-slider.hero--fade-top::before {
z-index: 2;
pointer-events: none;
}
/* ⚠️ Slide TIDAK di-`display:none`. Tingginya ikut menentukan tinggi hero,
dan kalau yang non-aktif dicabut dari alur, hero menyusut lalu melonjak
tiap kali slide dengan panjang judul berbeda masuk -- CLS yang terlihat
jelas. Dengan opacity, ketiganya selalu menempati kotak yang sama. */
.hero-slider__slide {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding-block: var(--sp-30) var(--sp-6);
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity var(--t-hero-fade, 500ms) var(--ease);
}
.hero-slider__slide.is-active { opacity: 1; }
/* Tanpa JS slide tidak pernah berganti, jadi yang bertumpuk di baliknya
harus disembunyikan -- kalau tidak ketiga judul saling menimpa. */
.anaya-no-js .hero-slider__slide:not(.is-active) { visibility: hidden; }
/* Panah kiri-kanan.
Gaya & posisinya mengikuti rujukan situs yang dikirim klien
(2026-09-16), diukur langsung dari situsnya di viewport 1440:
48x48, radius 50%, latar warna merek 62%, garis putih 82%, ikon 27px,
dan duduk 24px dari tepi layar — jauh lebih ke tepi daripada --gutter.
⚠️ TIDAK lagi meminjam `.cert-nav`. Begitu gayanya menyimpang sejauh ini,
memakai kelas yang sama berarti setiap perubahan pada carousel sertifikat
diam-diam mengubah panah hero juga — dan sebaliknya. */
.hero-slider__nav {
position: absolute;
top: 50%;
translate: 0 -50%;
z-index: 3;
display: grid;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: 50%;
background: rgba(28, 117, 188, 0.62);
color: var(--c-white);
box-shadow: 0 8px 20px rgba(2, 23, 48, 0.24);
cursor: pointer;
transition: background-color 180ms var(--ease), border-color 180ms var(--ease),
color 180ms var(--ease), scale 180ms var(--ease);
}
.hero-slider__nav .icon { width: 27px; height: 27px; }
/* Hover: isian TERANG penuh + ikon gelap, meniru perubahan keadaan di
rujukan (di sana kuning merek). Anaya tidak punya warna hangat, jadi yang
dipakai putih penuh dengan ikon biru merek — pola yang sudah ada di tema
sebagai `.btn--white`, sekaligus satu-satunya pasangan yang lolos kontras:
biru merek di atas putih 4,86:1, sementara putih di atas biru muda merek
(#27AAE1) cuma 2,4:1. */
.hero-slider__nav:hover,
.hero-slider__nav:focus-visible {
background: var(--c-white);
border-color: var(--c-white);
color: var(--c-primary);
scale: 1.06;
}
.hero-slider__nav--prev { left: 24px; }
.hero-slider__nav--next { right: 24px; }
@media (max-width: 1100px) {
/* Di bawah ini panah 24px dari tepi mulai menindih teks hero yang
melebar. Dikembalikan ke dalam gutter. */
.hero-slider__nav--prev { left: var(--sp-4); }
.hero-slider__nav--next { right: var(--sp-4); }
}
/* Titik navigasi. Dump: aktif 21px terisi putih 80%, nonaktif 13px bergaris
putih -- jadi yang berubah UKURAN dan ISIAN-nya, bukan cuma opasitas.
Kotak tombolnya tetap 21px di kedua keadaan supaya barisnya tidak
bergeser saat slide berganti. */
.hero-slider__dots {
position: absolute;
left: 50%;
translate: -50% 0;
/* Dump: Group 16 di y 523 dari hero 640px -> 117px dari dasar. */
bottom: 96px;
display: flex;
align-items: center;
gap: var(--sp-2);
z-index: 3;
}
.hero-slider__dot {
display: grid;
place-items: center;
width: 21px;
height: 21px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.hero-slider__dot::before {
content: '';
width: 13px;
height: 13px;
border: 1px solid var(--c-white);
border-radius: 50%;
transition: width var(--t-base), height var(--t-base), background-color var(--t-base);
}
.hero-slider__dot.is-active::before {
width: 21px;
height: 21px;
background: rgba(255, 255, 255, 0.8);
border-color: transparent;
}
/* Tanpa JS kontrolnya tidak melakukan apa pun -- lebih baik tidak ada
daripada ada tapi mati (pola yang sama dengan tombol Bagikan). */
.anaya-no-js .hero-slider__kontrol,
.anaya-no-js .hero-slider__dots { display: none; }
@media (max-width: 900px) {
/* Di layar sempit panah menutupi teks hero; titiknya sudah cukup, dan
geser-sentuh tetap berfungsi. */
.hero-slider__kontrol { display: none; }
.hero-slider__dots { bottom: var(--sp-8); }
}
/* Gradien putih di tepi atas foto. Inilah yang membuat menu berteks gelap
terbaca di atas hero; tanpa ini header harus dibalik jadi teks putih. */
.hero--fade-top::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: var(--fade-white-h);
background: var(--fade-white);
z-index: -1;
}
/* Home tidak memakai overlay gelap: foto pelabuhannya terang dan teks putih
sudah kontras. Bayangan halus dipakai sebagai gantinya. */
.hero--plain::after { background: none; }
.hero--plain .hero__title,
.hero--plain .hero__subtitle {
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.hero__title {
font-size: var(--fs-hero);
font-weight: var(--fw-extrabold);
/* line-height & margin ditulis eksplisit, bukan diwarisi dari : di
halaman artikel tunggal elemen ini
, karena H1 halaman itu adalah
JUDUL ARTIKELNYA. Tanpa kedua baris ini tampilannya bergantung pada
nama tag, dan mengganti tag diam-diam menggeser tata letak. */
line-height: var(--lh-tight);
margin: 0;
text-wrap: balance; /* sama dengan h1, supaya
memecah baris persis sama */
}
.hero__subtitle {
font-size: var(--fs-hero-sub);
font-weight: var(--fw-regular);
/* Dump Home & Tentang: 25px/31px = rasio 1,24. --lh-body (1,7) yang
terwarisi dari body menghasilkan 43px — subjudul hero jadi renggang
seperti paragraf, padahal ini teks display pendek. */
line-height: var(--lh-tight);
margin-top: var(--sp-2);
/* Dibatasi supaya pecah barisnya mengikuti desain (subjudul Tentang
lebarnya 808px, bukan selebar container). */
max-width: 810px;
margin-inline: auto;
}
.hero__actions { margin-top: var(--sp-6); }
/*
* ⚠️ Tombol tidak boleh melebihi container. `.btn` itu `inline-flex`, jadi
* lebarnya murni isi + padding dan ia TIDAK menyusut — di 360px tombol hero
* "Dapatkan Penawaran Gratis" terukur 308px sementara containernya 300px,
* dan halamannya meluber 8px. Cacat lama, baru tersingkap saat versi mobile
* disapu 2026-09-17.
*
* `max-width` adalah jaring pengamannya (teks membungkus, tidak meluber);
* padding yang dirampingkan yang menjaga teksnya tetap satu baris.
*/
.btn { max-width: 100%; }
@media (max-width: 400px) {
.hero__actions .btn { padding-inline: var(--sp-6); }
}
/* ------------------------------------------------------------
12. BAND CTA FOTO
------------------------------------------------------------ */
.cta-band {
position: relative;
display: grid;
place-items: center;
/* Dump (Oil 1 / Rectangle 9): band ini 1440x284. Sebelumnya tingginya
ikut konten (233px) dan meleset dari desain. */
min-height: 284px;
/* Dump Tentang: teks mulai 56px dari tepi atas band, tombol berakhir 49px
sebelum tepi bawah. --sp-16 (64px) membuat total isi 336px sehingga
min-height 284px di atas tidak pernah terpakai. Dengan 48px total isi
272px -> min-height yang menentukan, dan place-items:center menaruhnya
persis di tengah 284px seperti desain. */
padding-block: var(--sp-12);
text-align: center;
color: var(--c-white);
background-size: cover;
background-position: center;
isolation: isolate;
}
.cta-band::after {
content: '';
position: absolute;
inset: 0;
background: var(--overlay-band);
z-index: -1;
}
/* Dump Tentang: jarak teks ke tombol 35px, bukan 64px. */
.cta-band__actions { margin-top: var(--sp-8); }
.cta-band__text {
/* Dump Tentang: 881px. */
max-width: 890px;
/* WAJIB, jangan dihapus. `place-items: center` di .cta-band memusatkan
ANAKNYA — dan anaknya cuma satu: .container (1200px). Paragraf ini ada
satu tingkat lebih dalam, jadi ia blok biasa yang menempel di tepi kiri
container. `text-align: center` menipu di sini: ia memusatkan BARIS
TEKS di dalam kotak 890px, sementara kotaknya sendiri tetap di kiri —
sehingga terbaca rata tengah tapi seluruh bloknya bergeser 155px ke
kiri di setiap lebar layar (diukur 2026-09-09 di 1440px & 1920px).
Tombolnya tidak kena karena .cta-band__actions selebar penuh container.
Bug ini ada sejak Fase 2 dan luput dari perbandingan ke prototipe —
prototipenya pun salah dengan cara yang sama (aturan #38). */
margin-inline: auto;
/* Dump Tentang menyebut 24px — sama dengan token --fs-product. Dipakai
ulang daripada menambah token baru dengan nilai yang sama. */
font-size: var(--fs-product);
/* Dump: 24px/30px = rasio 1,25. Dengan --lh-body (1,7) barisnya 41px dan
band-nya membengkak dari 284px ke 368px. */
line-height: var(--lh-tight);
}
/* ------------------------------------------------------------
13. BRAND / LOGO
------------------------------------------------------------
Logo Anaya dipakai di header (versi berwarna) dan footer
(versi putih). Ukuran di Figma: 134 x 55 px; file PNG diexport
@3x (402 x 165) supaya tetap tajam di layar retina.
Tinggi jadi patokan, lebar mengikuti rasio -> aman kalau nanti
logo diganti file lain dengan proporsi sedikit berbeda.
------------------------------------------------------------ */
.brand {
display: inline-flex;
align-items: center;
flex: none;
}
.brand__img {
display: block;
width: auto;
height: var(--brand-h, 55px);
/* Logo bisa diganti dari Pengaturan Situs (2026-10-14): logo unggahan yang
jauh lebih lebar dari aslinya (134px) dibatasi tanpa digepengkan, supaya
navbar tidak terdorong. Logo tema & Flexipack (223px) tidak terdampak. */
max-width: 300px;
object-fit: contain;
}
/* Versi putih untuk latar gelap/biru (footer, header transparan). */
.brand--light .brand__img { --brand-h: 55px; }
@media (max-width: 900px) {
.brand__img { --brand-h: 42px; }
}
/* ------------------------------------------------------------
14. HEADER / NAVBAR
------------------------------------------------------------ */
/* Navbar MENGIKUT saat digulir (permintaan klien, rapat 2026-09-15).
`sticky`, bukan `fixed`: header tetap berada di dalam alur dokumen,
sehingga tinggi halaman tidak berubah sedikit pun dan tidak perlu
padding-top penyeimbang di
— ketujuh halaman tetap 0px terhadap
prototipe. Halaman Home memakai jalur berbeda (lihat .header--overlay). */
.header {
position: sticky;
top: 0;
z-index: var(--z-header);
background: var(--c-white);
}
/* Varian Home: header melayang di atas foto hero, tanpa latar sendiri.
`fixed` SEJAK AWAL, bukan `absolute` yang nanti berganti. Di posisi diam
hasilnya identik — .hero-stack mulai di y=0, jadi `absolute` di dalamnya dan
`fixed` terhadap viewport menggambar di tempat yang sama persis, dan keduanya
sama-sama di luar alur sehingga tinggi halaman tidak berubah. Bedanya: dengan
`fixed`, navbar TIDAK PERNAH hilang, jadi tidak ada yang perlu "dimunculkan
kembali" — dan tidak ada momen munculnya yang bisa terlihat patah.
Versi sebelumnya menunggu hero terlewat baru muncul. Terukur: navbar hilang
dari scrollY 152 sampai 640, yaitu 488px gulir TANPA navbar sama sekali,
lalu muncul mendadak; dan saat digulir naik ia lenyap dalam SATU frame
(masuk dianimasikan 400ms, keluar 0ms). Asimetri itu yang paling terbaca
sebagai "patah", dan memperhalus animasinya tidak akan menyentuh void
488px-nya sama sekali. */
.header--overlay {
position: fixed;
inset: 0 0 auto;
background: transparent;
transition: background-color 220ms var(--ease);
}
/* ⚠️ Latar WAJIB memutih begitu gulir dimulai — ini bukan pilihan gaya.
Teks navbar hitam, dan foto hero makin gelap ke bawah: rasio kontras teks
hitam terhadap pita 152px terukur 15,78 di scrollY 0, 4,83 di 200, lalu
JATUH ke 4,29 di 300 dan 2,78 di 488 (foto pelabuhannya gelap & ramai).
Jadi kalau navbar menempel tapi dibiarkan transparan, ia berhenti terbaca
persis di paruh bawah hero. Ambang 40px membuat pemutihannya selesai jauh
sebelum titik gagal itu. */
.header--overlay.is-solid { background: var(--c-white); }
/* Border chip di atas foto hero: putih ~90% opacity, bukan biru.
Diverifikasi lewat sampel piksel render Figma langsung (bukan dump CSS,
yang gagal menangkap stroke ini): tepi pill terbaca ~R250 G253 B254 di atas
langit ~R211 G230 B241 — border biru akan terlihat gelap/kontras di sana,
sementara di desain tepinya nyaris menyatu dengan foto terang.
Sengaja disaring `.header__inner > .header__aside`: di <=900px main.js
MEMINDAHKAN aside ke dalam drawer putih, dan di sana pill bergaris putih
tidak terlihat sama sekali. Dengan saringan ini varian hero berhenti
berlaku begitu aside pindah, jadi tidak perlu aturan kedua yang
membatalkannya — dulu ada, dan dua aturan yang saling meniadakan seperti
itu selalu berakhir lepas sinkron.
Begitu latar header memutih (.is-solid) pill kembali ke kulit bawaannya,
dan pergantiannya ikut memudar bersama latar headernya.
⚠️ Yang berganti cuma WARNA garisnya, bukan ADA/TIDAKNYA garis. Chip selalu
ber-border 1px; di keadaan padat warnanya `transparent`. Kalau border-nya
benar-benar dilepas, lebar pill menyusut 2px (lebarnya auto, mengikuti teks)
sehingga ia tersentak setiap kali berganti keadaan — dan `border-width` juga
tidak bisa dipudarkan, cuma `border-color` yang bisa. */
.header--overlay:not(.is-solid) .header__inner > .header__aside .chip {
--chip-garis: rgba(255, 255, 255, 0.9);
--chip-bg: transparent;
--chip-shadow: none;
}
/* Grid 1fr auto 1fr, bukan flex space-between: dengan space-between posisi nav
ikut lebar logo & sisi kanan yang tidak sama, sehingga meleset ~30px dari
tengah. Kolom sisi yang sama lebar membuat nav persis di tengah seperti desain. */
.header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--sp-8);
/* Asimetris, dari sampel piksel Tentang (Preview).png: pita header putih
setinggi 152px, logo 134x55 menempati y 37..92 — jadi 37px di atas dan
60px di bawah, bukan 40/40. Dengan 40/40 header cuma 135px dan SELURUH
isi halaman naik 17px dari desain. */
padding-block: 37px 60px;
}
.header__inner > .brand { justify-self: start; }
.header__inner > .header__aside { justify-self: end; }
/* ⚠️ Menu, chip FLEXITANK & pilihan bahasa terpusat pada PITA HEADER (152px),
BUKAN pada baris logo (55px) — dan itu dua garis tengah yang berbeda: baris
logo berpusat di y 64,5 sementara pita berpusat di y 76.
Dengan `align-items: center` saja ketiganya ikut baris logo, jadi SELURUHNYA
10px terlalu tinggi dari desain. Terukur dari Header.png vs render: logo
37..91 di keduanya (cocok persis), tapi "Home" 69..80 di desain vs 59..69 di
render, "Kontak" 69..80 vs 58..69, "ID|EN" 68..83 vs 59..69, dan pill
FLEXITANK 58..91 vs 48..81. Penyimpangannya seragam 10px di keempatnya —
tanda satu sebab, bukan empat.
Dibaca balik dari dump, ketiganya memang kotak yang terpusat pada 152px:
chip 34px -> (152-34)/2 = 59 (dump 58), teks menu & bahasa 20px -> 66
(dump 65). Logonya yang justru TIDAK terpusat (37..92), dan itu sudah
tercatat sejak Fase 2 dari sampel piksel.
Hanya >=901px. Di bawah itu tinggi baris ditentukan tombol menu 44px dan
asidenya sudah pindah ke drawer, jadi memusatkan pada pita akan menggeser
tombol hamburger 11px tanpa ada yang meminta.
⚠️ 900.02px, BUKAN 901px (berlaku untuk SEMUA pasangan min/max di berkas
ini: 900.02 vs 900, 1024.02 vs 1024). Peramban yang di-zoom atau emulator
perangkat bisa memberi lebar viewport PECAHAN — mis. 1024,5px. Di situ
`max-width: 1024px` tidak cocok dan `min-width: 1025px` juga tidak, jadi
KEDUA blok lolos dan halaman jatuh ke aturan dasar. Itu yang dilihat klien
di iPad 2026-10-07: hero Flexipack memakai geometri Flexitank (gambar 155%
kolom) dan menutupi kartunya. */
@media (min-width: 900.02px) {
.header__inner {
min-height: var(--header-h);
padding-block: 0;
}
.header__inner > .brand {
align-self: start;
margin-top: 37px;
}
}
.nav {
display: flex;
align-items: center;
gap: var(--sp-12); /* jarak antar menu di desain ~54px */
}
.nav__link {
/* ANA-019 — target sentuh minimal 24x24 (WCAG 2.2 SC 2.5.8).
Terukur sebelumnya 23px: kurang SATU piksel.
⚠️ Kotaknya tumbuh SIMETRIS di sekitar garis tengah yang sudah
dikalibrasi ke Header.png (aturan #61) — `inline-flex` + `align-items:
center` menjaga tinta teksnya tetap di pusat pita 152px, jadi
perataan navbar yang susah payah disamakan itu tidak bergeser.
⚠️ Catatan: navbar ini sebenarnya SUDAH lolos lewat pengecualian jarak
pada SC 2.5.8 — jarak antar-target terukur 48px, jauh di atas syarat.
Perbaikan ini menutup temuannya secara harfiah supaya tidak perlu
dijelaskan ulang setiap kali diaudit. */
display: inline-flex;
align-items: center;
min-height: 24px;
color: var(--c-ink);
font-size: var(--fs-body-sm);
transition: color var(--t-fast);
}
.nav__link:hover { color: var(--c-primary); }
/* Dump Home, Tentang & Produk sepakat: menu nonaktif weight 300 (Light),
yang aktif 700 — bukan 400/600 yang dipakai sebelumnya. Selisihnya terlihat:
dengan 400/600 seluruh baris menu terkesan rata tebal dan halaman yang
sedang dibuka kurang menonjol. */
.nav__link { font-weight: var(--fw-light); }
.nav__link.is-active { font-weight: var(--fw-bold); }
.nav__item { position: relative; }
.nav__item--has-menu > .nav__link {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.nav__link .icon { width: 14px; height: 14px; }
/* Dropdown Produk */
.nav__menu {
position: absolute;
top: calc(100% + var(--sp-3));
left: 50%;
translate: -50% 0;
min-width: 220px;
margin: 0;
padding: var(--sp-4);
list-style: none;
background: var(--overlay-nav-dropdown);
border-radius: var(--r-md);
box-shadow: var(--shadow-dropdown);
z-index: var(--z-dropdown);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu {
opacity: 1;
visibility: visible;
transform: none;
}
.nav__menu a {
display: block;
padding: var(--sp-3) 0;
color: var(--c-white);
font-size: var(--fs-body-sm);
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.nav__menu li:last-child a { border-bottom: 0; }
.nav__menu a:hover { opacity: 0.8; }
/* Toggle bahasa */
.lang {
display: flex;
align-items: center;
gap: var(--sp-1);
font-size: var(--fs-body-sm);
}
.lang a { color: var(--c-ink); }
.lang .is-active { font-weight: var(--fw-bold); }
.lang__sep { color: var(--c-border); }
.nav-toggle { display: none; }
@media (max-width: 900px) {
/* .nav jadi drawer LAYAR-PENUH sehingga keluar dari alur grid; yang tersisa
di baris header cuma logo + tombol menu. Chip FLEXITANK & pilihan bahasa
dipindahkan ke dalam drawer oleh main.js (initHeaderAside) — aturan
display:none di bawah cuma jaring pengaman kalau JS belum sempat jalan,
supaya kolom grid tidak terlanjur salah hitung. */
.header__inner { grid-template-columns: 1fr auto; }
.header__inner > .header__aside { display: none; }
/* Logo ikut diangkat di atas drawer bersama tombolnya, supaya baris
header (logo + tombol tutup) tetap utuh saat menu terbuka — tanpa ini
drawer putih menutup seluruh branding. */
.header__inner > .brand { position: relative; z-index: calc(var(--z-drawer) + 1); }
.nav-toggle {
display: grid;
place-items: center;
/* 44px = ambang minimum area sentuh yang nyaman di HP; ikonnya sendiri
dinaikkan dari 20px (ukuran .icon umum) ke 28px karena di dalam kotak
sebesar ini garis hamburger 20px terlihat kekecilan. */
width: 44px;
height: 44px;
background: none;
border: 0;
color: var(--c-ink);
/* Wajib di ATAS drawer, kalau tidak tombolnya ketutupan dan menu tidak
bisa ditutup lagi. Keduanya bersaudara di stacking context yang sama
(sama-sama anak .header__inner), jadi z-index cukup. */
position: relative;
z-index: calc(var(--z-drawer) + 1);
}
/* Drawer, isinya rata tengah — mulai TEPAT DI BAWAH header, bukan menutupi
seluruh layar.
⚠️ Dulu `inset: 0` (layar penuh, termasuk area header), dan logo + tombol
X "menang" cuma lewat z-index. Klien melaporkan 2026-10-05 dari HP: drawer
terbuka tanpa logo dan tanpa tombol X — tidak ada jalan menutupnya.
Pola yang dikenal di iOS Safari: elemen `position: fixed` di dalam induk
`sticky` (header) dipromosikan ke lapisan komposit sendiri dan bisa
dilukis di atas saudaranya tanpa peduli z-index. Emulator Chromium &
WebKit Playwright TIDAK meniru perilaku komposit itu, jadi gejalanya tidak
bisa direproduksi dari sini. Dengan drawer yang tidak menumpang header,
baris logo + X tidak pernah tertutup di peramban mana pun — perbaikannya
tidak lagi bergantung pada urutan lapisan sama sekali.
--header-h di <=900 = 141px dan <=640 = 109px, persis tinggi header
sesungguhnya (tokens.css). */
.nav {
position: fixed;
top: var(--header-h);
right: 0;
bottom: 0;
left: 0;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-8) var(--gutter) var(--sp-12);
background: var(--c-white);
box-shadow: none;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none; /* seirama dengan scrollbar halaman yang disembunyikan di base.css */
z-index: var(--z-drawer);
display: none;
}
.nav::-webkit-scrollbar { width: 0; }
/* Header Home transparan di atas foto hero. Sejak drawer tidak lagi
menutupi area header, baris logo + X akan duduk di atas foto selama menu
terbuka — jadi header dipaksa putih, menyatu dengan drawer di bawahnya. */
body.is-drawer-open .header { background: var(--c-white); }
.nav-toggle .icon { width: 28px; height: 28px; }
.nav.is-open { display: flex; }
.nav__item { width: 100%; text-align: center; }
.nav__link {
display: block;
padding-block: var(--sp-3);
font-size: var(--fs-body);
}
/* .nav__item--has-menu > .nav__link tadinya inline-flex rata kiri —
harus dipusatkan lagi supaya sejajar dengan menu lain. */
.nav__item--has-menu > .nav__link {
display: flex;
justify-content: center;
}
/* Accordion Produk. Latar biru transparan versi desktop dilepas: di atas
drawer putih hasilnya biru muda pucat dengan teks putih — nyaris tidak
terbaca. Di sini cukup teks biasa yang sedikit diredupkan. */
.nav__menu {
position: static;
translate: none;
opacity: 1;
visibility: visible;
transform: none;
display: none;
min-width: 0;
padding: 0 0 var(--sp-3);
background: none;
box-shadow: none;
}
.nav__item--has-menu.is-open .nav__menu { display: block; }
.nav__menu a {
padding: var(--sp-2) 0;
color: var(--c-ink-soft);
border-bottom: 0;
text-align: center;
}
/* Chip + pilihan bahasa setelah dipindah ke dalam drawer. */
.nav > .header__aside {
flex-direction: column;
align-items: stretch;
gap: var(--sp-4);
margin-top: var(--sp-8);
}
/* Garis pemisah antara chip FLEXITANK dan pilihan bahasa. Panjangnya tidak
ditulis: .header__aside menyusut selebar anak terlebarnya (chip), lalu
align-items:stretch membuat .lang ikut selebar itu — jadi garisnya selalu
pas selebar chip, berapa pun teks chip-nya nanti. */
.nav > .header__aside > .lang {
justify-content: center;
border-top: 1px solid var(--c-primary);
padding-top: var(--sp-4);
}
}
/* Pembungkus header melayang + hero. Memberi konteks posisi untuk
.header--overlay supaya tidak bergantung pada body. */
.hero-stack { position: relative; }
/* Sisi kanan header: chip FLEXITANK + toggle bahasa. */
.header__aside {
display: flex;
align-items: center;
gap: var(--sp-5);
}
/* ------------------------------------------------------------
HEADER FLEXIPACK (Flexitank, Bag in Box, Paper IBC, Pollination Bag)
Dump 2026-10-05. Kerangka & perilakunya milik .header di atas — yang
ditulis di sini cuma selisihnya.
------------------------------------------------------------ */
/* Logo SOLUFLEX (2026-10-23, menggantikan logo Flexipack): wordmark @3x
642x84 dari klien + tagline "by Anaya Global Indonesia" yang sama dengan
logo lama (Poppins Italic, 171px di artboard), jarak 10px — satu berkas
642x154 = 214x51,3 di artboard. Tinggi jadi patokan. */
.header--flexipack .header__inner { --fp-logo-h: 51.33px; }
.header--flexipack .brand__img { --brand-h: var(--fp-logo-h); }
/* Dump: kotak logo mulai y=56 (logo Anaya y=37) — pita tetap 152px, jadi
menu/chip/bahasa tetap terpusat pada pita seperti header Anaya. Logo
yang lebih pendek (tablet) diturunkan setengah selisihnya supaya titik
tengahnya tetap di tempat yang sama dengan versi desktop. */
@media (min-width: 900.02px) {
.header--flexipack .header__inner > .brand {
margin-top: calc(56px + (51.33px - var(--fp-logo-h)) / 2);
}
}
/* HP 40px (167px lebar) — sama dengan tinggi logo Flexipack lama. */
@media (max-width: 900px) {
.header--flexipack .header__inner { --fp-logo-h: 40px; }
}
/* Dump: chip berakhir x=1253, "ID | EN" mulai x=1277 -> 24px. */
.header--flexipack .header__inner > .header__aside { gap: var(--sp-6); }
/* Chip BERGARIS biru tanpa isian — "kembali ke Anaya". Dump Rectangle 3:
178x34, border 1px #1C75BC, radius 20px; teks 16/20 w600 biru 136px ->
padding 21px kiri-kanan. Hover tetap milik .chip (isi biru, teks putih). */
.chip--garis {
--chip-garis: var(--c-primary);
--chip-bg: transparent;
--chip-shadow: none;
padding-inline: 21px;
/* Pil setinggi 34px tetap — teks yang patah baris meluber keluar garisnya
("kembali / ke / Anaya" bertumpuk, laporan klien di iPad 2026-10-07). */
white-space: nowrap;
}
/* Header Flexipack di laptop kecil & iPad rebah (901..1279px).
Grid `1fr auto 1fr` milik header Anaya memusatkan menu dengan membagi sisa
ruang SAMA RATA ke kiri-kanan. Isi kanan Flexipack (chip 191px + ID|EN =
263px) jauh lebih lebar daripada isi kanan Anaya, dan di bawah ~1250px
kolom kanannya jadi lebih sempit daripada isinya: terukur chip 166px di
1194 (patah 2 baris), 111px di 1024 (3 baris), dan logo tinggal 11px di
901px. Di >=1280px ruangnya cukup, jadi desktop (sudah 0-4px dari dump)
tidak disentuh.
Di rentang ini: kolom `auto 1fr auto` (logo & sisi kanan selebar isinya,
menu terpusat di sisa ruang), lalu logo, huruf menu, dan jarak menyusut
bersama lebar layar. Disapu 901..1279px di keempat halaman ID & EN:
jarak logo->menu & menu->chip >=18px, chip satu baris, tanpa geser. */
@media (min-width: 900.02px) and (max-width: 1279.98px) {
.header--flexipack .header__inner {
--fp-logo-h: clamp(36px, 3.6vw, 46px);
grid-template-columns: auto minmax(0, 1fr) auto;
gap: clamp(16px, 2vw, 24px);
}
.header--flexipack .header__inner > .nav {
justify-self: center;
gap: clamp(14px, calc(5.3vw - 34px), 36px);
}
.header--flexipack .nav__link { font-size: clamp(14px, 1.3vw, 16px); }
.header--flexipack .header__inner > .header__aside { gap: var(--sp-4); }
.header--flexipack .chip--garis {
padding-inline: 14px;
font-size: clamp(14px, 1.3vw, 16px);
}
}
/* ------------------------------------------------------------
INTRO PERUSAHAAN (Home)
Proporsi kolom diambil dari dump: teks 546px, foto 585px.
Ditulis sebagai fr supaya ikut menyusut, bukan lebar tetap.
------------------------------------------------------------ */
/* Dump Home: paragraf ini 16px/25 (546x141), bukan --fs-body (18px) yang
terwarisi dari body. Selisihnya menambah 73px tinggi halaman. */
.intro p { font-size: var(--fs-body-sm); }
.intro {
display: grid;
grid-template-columns: minmax(0, 546fr) minmax(0, 585fr);
align-items: start;
gap: var(--sp-20);
}
.intro__actions { margin-top: var(--sp-8); }
.intro__media img {
width: 100%;
height: auto;
border-radius: var(--r-md);
}
@media (max-width: 900px) {
.intro {
grid-template-columns: 1fr;
gap: var(--sp-8);
}
}
/*
* Dump mobile: foto 340x238 (rasio 1,43). Berkas fotonya sendiri jauh lebih
* melebar — terukur 344x140 di render, rasio 2,46 — jadi dengan `height:
* auto` ia tampil sebagai pita tipis, hampir 100px lebih pendek dari desain.
* Di mobile rasionya dipatok dan fotonya dipotong; `object-position: center`
* menjaga bagian tengah gudang tetap terlihat.
*/
@media (max-width: 640px) {
.intro__media img {
aspect-ratio: 340 / 238;
object-fit: cover;
object-position: center;
}
}
/* ------------------------------------------------------------
KEPALA SECTION dengan aksi di kanan (section Blog)
------------------------------------------------------------ */
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-6);
flex-wrap: wrap;
}
.section-head__title {
font-size: var(--fs-section);
font-weight: var(--fw-bold);
color: var(--c-primary);
}
/* ------------------------------------------------------------
SECTION PRODUK (Home)
Latar molekul hanya menutupi bagian atas section — di desain tepi
bawahnya memotong baris pertama kartu, jadi tingginya dikunci
284px dan tidak mengikuti tinggi section.
------------------------------------------------------------ */
/* Foto band dipasang lewat atribut style di sebagai background-image
biasa. JANGAN dioper lewat custom property: url() relatif di dalam custom
property diresolusi terhadap file CSS yang memakainya, bukan terhadap
dokumen — 'assets/img/...' jadi dicari di 'assets/css/assets/img/...'.
Sumbernya 2880x568, rasionya sama persis dengan band 1440x284, jadi
background-size 100% x tinggi-band tidak menggepengkan gambar.
Spesifisitas dinaikkan (.section.section--produk) agar padding atas tidak
ikut dinolkan aturan .section + .section — padding itulah yang menempatkan
judul di dalam band. */
.section.section--produk {
--band-h: 284px;
position: relative;
padding-top: var(--sp-12);
background-repeat: no-repeat;
background-position: top center;
background-size: 100% var(--band-h);
}
/* Lapisan putih 20% menurunkan kontras foto agar teks tetap terbaca. */
.section--produk::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: var(--band-h);
background: rgba(255, 255, 255, 0.2);
pointer-events: none;
}
/* Konten ikut jadi elemen terposisi supaya tergambar di atas lapisan putih,
tanpa perlu main z-index negatif. */
.section--produk > * { position: relative; }
/* ------------------------------------------------------------
JARAK ANTAR BLOK DALAM SECTION
Ditulis sebagai aturan bertetangga, bukan utility margin di HTML,
supaya markup tetap bersih dan nilainya hidup di satu tempat.
------------------------------------------------------------ */
.section-title + .section-lead { margin-top: var(--sp-3); }
.section-title + .icon-rail { margin-top: var(--sp-12); }
.section-title + .marquee-group { margin-top: var(--sp-10); }
/* Dump: baris logo selebar 964px (Group 9) & 1011px (Group 8), terpusat —
bukan selebar container 1200px. Lihat juga catatan proyek aturan #9: sempat
full-bleed, lalu diperbaiki ke dalam .container, tapi 1200px masih ~190px
lebih lebar dari desain. */
.marquee-group { max-width: 1011px; margin-inline: auto; }
.section-lead + .cat-grid { margin-top: var(--sp-16); }
/* Dua selektor, bukan satu: di prototipe `.cert-carousel` adalah saudara
langsung `.section-title`, tapi di WordPress ia dibungkus
`.cert-carousel-wrap` (pembungkus untuk panah navigasi, ditambahkan
Fase 6). Pembungkus itu memutus kombinator `+` sehingga jarak 64px-nya
hilang diam-diam — tidak ada error, cuma bagian Sertifikasi yang naik
menempel ke judulnya. Setiap kali markup dibungkus elemen baru, periksa
ulang aturan berpola `X + Y` yang menyangkut elemen itu. */
.section-title + .cert-carousel,
.section-title + .cert-carousel-wrap { margin-top: var(--sp-16); }
.section-head + .grid-3 { margin-top: var(--sp-10); }
/* ------------------------------------------------------------
KARTU NILAI (Tentang)
Tiga kartu biru tembus pandang yang menumpang di tepi bawah hero.
Karena latarnya semi-transparan, bagian atas kartu tampak lebih
gelap (di atas foto) dan bagian bawah lebih terang (di atas putih) —
efek gradasi itu datang sendiri, tidak perlu gradient.
------------------------------------------------------------ */
.section--values { padding-top: 0; }
.value-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-16);
/* Dump: baris kartu 1043px (kartu 307px). Ditulis 1160px — SENGAJA lebih
lebar dari dump. Alasannya font: baris pertama desain memuat "Layanan
berkisar dari pasokan" dalam 249px, sementara Poppins butuh 278px untuk
teks yang sama (~12% lebih lebar, lihat 01-design-system.md §2). Di
lebar dump teks itu pecah jadi 7 baris (desain 5) dan kartunya membengkak
dari 264px ke 314px. Di 1160px pecah barisnya kembali 5-4-5 dan tinggi
kartu kembali 264px persis seperti desain — proporsi kartu meleset 11%
di lebar, tapi seluruh sisanya kembali sama. Ini kompromi paling kecil
yang tersedia; menyempitkan font di bawah 18px akan melanggar dump. */
max-width: 1160px;
margin-inline: auto;
/* Naik menumpang hero. Nilainya dari dump: kartu mulai 66px sebelum
foto hero berakhir. */
margin-top: -66px;
position: relative;
}
.card-value {
display: flex;
flex-direction: column;
gap: var(--sp-6);
min-height: 264px;
padding: var(--sp-8);
border-radius: var(--r-md);
background: rgba(28, 117, 188, 0.65);
color: var(--c-white);
}
.card-value .icon {
width: 50px;
height: 50px;
}
.card-value__text {
font-size: var(--fs-body);
line-height: var(--lh-snug);
}
@media (max-width: 900px) {
.value-grid {
grid-template-columns: 1fr;
gap: var(--sp-6);
margin-top: var(--sp-8); /* di layar sempit tumpang-tindih jadi berantakan */
}
}
/* ------------------------------------------------------------
PANEL ABU-ABU + DAFTAR BERTANDA BRAND (Misi, Tentang)
------------------------------------------------------------ */
.panel {
background: var(--c-surface);
border-radius: var(--r-md);
padding: var(--sp-10);
}
.mission {
display: grid;
/* Dump: foto 433 (x 152..585), celah 54, kolom kanan 639..1287 = 648
(penanda 20,16 + celah 20,84 + ruang teks 607). Perbandingan desain
40 : 60.
⚠️ Digeser jadi 35 : 65 — aturan #28. Baris terpanjang poin misi
("...untuk kebutuhan bahan") butuh >=635px di Poppins, sementara ruang
teks desain cuma 607px di Google Sans Flex. Di 582px yang dihasilkan
perbandingan lama, poin pertama pecah jadi EMPAT baris padahal desain
tiga — dan itu yang dilaporkan klien 2026-09-17.
Disapu 620..700px per 1px: pecah baris sama persis dengan Figma pada
635..675, jadi dipakai 655 (tengah, bantalan 20px ke dua arah).
655 + 20 + 21 = 696 kolom kanan -> 376 sisa untuk foto (-13% terhadap
dump). Yang digeser lebar KOTAKNYA, bukan ukuran hurufnya. */
grid-template-columns: minmax(0, 376fr) minmax(0, 696fr);
align-items: start;
gap: var(--sp-12);
}
.mission__media img {
width: 100%;
height: auto;
border-radius: var(--r-md);
}
.mission__title {
font-size: var(--fs-section);
font-weight: var(--fw-bold);
color: var(--c-primary);
}
/* Daftar bertanda chevron brand, bukan bullet. */
/* Dump: item misi 18px/25 = rasio 1,39. --lh-body (1,7) yang terwarisi dari
body membuatnya 31px — daftar pendek berbutir jadi seregang paragraf. */
.list-brand li { line-height: var(--lh-snug); }
.list-brand {
margin: var(--sp-10) 0 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--sp-8);
}
.list-brand > li {
display: grid;
grid-template-columns: 20px 1fr;
/* ⚠️ 21px, bukan --sp-10 (40px). Dump menaruh penanda di x 639 (lebar
20,16) dan teks di x 680 -> offset total 41px, jadi CELAHNYA 41 - 20 =
21px. Yang 40px itu salah baca: selisih KOORDINAT KIRI penanda dan teks
dibaca sebagai celah, padahal lebar penanda belum dikurangi. Akibatnya
teks bergeser 20px terlalu jauh ke kanan DAN kotaknya 20px lebih sempit
— ikut mendorong pecah baris lebih awal. */
gap: 21px;
align-items: start;
}
.list-brand .icon {
width: 20px;
height: 22px;
margin-top: 0.35em; /* sejajar dengan baris pertama teks */
color: var(--c-primary);
}
@media (max-width: 900px) {
.mission { grid-template-columns: 1fr; }
.list-brand > li { gap: var(--sp-5); }
}
/* ------------------------------------------------------------
DETAIL PRODUK (halaman Produk)
------------------------------------------------------------ */
/* Sidebar 290px tetap (dump), sisanya kolom detail. Gap 40px = jarak
antara garis sidebar dan awal judul produk di dump. */
/* minmax(0, ...) di kedua kolom WAJIB ada. Tanpa itu, grid item punya
min-width:auto bawaan = ukuran min-content anak-anaknya — dan
`.spec-table` di dalam kolom kanan punya min-width:420px. Item grid
pun dipaksa selebar itu (menyeret kolom kiri ikut melebar juga di
layar sempit), sampai seluruh `.product-layout` meluber ke samping.
`.spec-table-wrap { overflow-x:auto }` tidak pernah sempat bekerja
karena overflow-nya sudah "bocor" ke level grid duluan. Ketahuan
lewat tools/shot.py di 390px murni (Chrome --window-size biasa
punya lantai ~512px, jadi bug ini tidak kelihatan di situ). */
.product-layout {
display: grid;
grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
gap: var(--sp-10);
align-items: start;
}
.product-nav { width: 290px; }
/* Keterangan di dalam kotak sidebar saat kategori belum punya produk, atau
saat pencarian tidak menemukan apa pun. Bentuknya sengaja mengikuti
`.product-nav__item` (padding & garis bawah yang sama) supaya kotaknya
tetap terbaca sebagai daftar, cuma isinya yang menjelaskan. */
.product-nav__kosong {
padding: var(--sp-4) var(--sp-8);
color: var(--c-ink-soft);
font-size: var(--fs-body-sm);
}
/* Catatan pengganti tabel spesifikasi untuk produk yang datanya belum masuk.
`flex-basis: 100%` karena induknya `.product-block` itu flex-wrap — lihat
aturan #37 catatan proyek; tanpa ini paragrafnya cuma selebar teksnya. */
.product-block--catatan p {
flex-basis: 100%;
margin: 0;
color: var(--c-ink-soft);
}
.product-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
}
/* 30px/800/primer/uppercase — nilai sama dengan hero title, terverifikasi
sama di 3 halaman Produk (Standard/Industrial/Pharma Grade). */
.product-title {
font-size: var(--fs-hero);
font-weight: var(--fw-extrabold);
color: var(--c-primary);
text-transform: uppercase;
}
.product-grade {
margin-top: var(--sp-2);
font-size: var(--fs-body);
}
.product-photo {
margin-top: var(--sp-6);
border-radius: var(--r-md);
overflow: hidden;
}
.product-photo img {
width: 100%;
height: auto;
aspect-ratio: 883 / 337;
object-fit: cover;
}
.product-feature {
margin-top: var(--sp-8);
font-size: var(--fs-body);
}
.product-feature dt {
display: inline;
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.product-feature dd {
display: inline;
margin-left: var(--sp-2);
}
/* Dump ("PACKAGING:" & isi daftarnya, "SERTIFIKASI:" & baris logo): label
dan kontennya sejajar SATU BARIS (top sama persis, 1678px & 1776px),
bukan label di atas lalu konten di bawahnya. Sempat ditulis stacked
(.product-block__label pakai margin-bottom, container tanpa flex) —
ketahuan pas dibandingkan lagi ke Preview.png. Pola ini sama seperti
.product-feature (dt/dd) di atas untuk "Karakteristik Produk", cuma di
sana kontennya teks polos (bisa display:inline), sedangkan Packaging
(list) & Sertifikasi (baris logo) perlu tetap jadi block/flex sendiri —
makanya baris label+konten di-flex di sini, bukan inline. */
.product-block {
margin-top: var(--sp-10);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--sp-2) var(--sp-4);
}
.product-block__label {
font-weight: var(--fw-bold);
font-size: var(--fs-body);
text-transform: uppercase;
flex: none;
}
.packaging-list {
list-style: none;
margin: 0;
padding: 0;
}
.packaging-list li {
position: relative;
padding-left: var(--sp-5);
font-size: var(--fs-body);
}
.packaging-list li + li { margin-top: var(--sp-1); }
.packaging-list li::before {
content: '';
position: absolute;
left: var(--sp-1);
top: 0.7em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--c-ink);
}
/* Baris label:nilai sebaris — dipakai untuk field opsional produk
(Packaging, Shelf Life) yang di beberapa grade (Industrial, Pharma)
tampil satu baris, bukan daftar bullet seperti Standard Grade. */
.product-extra__line {
margin-top: var(--sp-4);
font-size: var(--fs-body);
/* Induknya `.product-block` sengaja flex-wrap supaya LABEL bisa duduk
sebaris dengan nilainya ("KARAKTERISTIK PRODUK: Kristal Putih").
Efek sampingnya: dua paragraf ini ikut jadi flex item dan berdiri
bersebelahan, sehingga "PACKAGING: ..." dan "SHELF LIFE: ..." tergabung
jadi satu baris. Render Figma (Produk - KCL Pharma Grade) menaruhnya
bertumpuk dua baris, jadi tiap paragraf mengambil satu baris flex penuh.
Diwarisi dari prototipe Fase 2 (perilakunya sama persis di sana);
ketahuan 2026-09-08 saat perbandingan berdampingan ke Figma. */
flex-basis: 100%;
}
.product-extra__line strong {
font-weight: var(--fw-bold);
text-transform: uppercase;
margin-right: var(--sp-2);
}
/* Tabel spesifikasi berkolom banyak (mis. Chemical Analysis Industrial
Grade: Typical/Min/Max) — kolom pertama tetap melebar, sisanya sama rata. */
table.spec-table.spec-table--wide td,
table.spec-table.spec-table--wide th {
width: auto;
text-align: center;
}
table.spec-table.spec-table--wide td:first-child,
table.spec-table.spec-table--wide th:first-child {
text-align: left;
}
/* Lebar kolom diatur dari CMS (field `lebar`, dirender jadi ).
`table-layout: fixed` WAJIB: tanpa itu lebar pada cuma jadi saran dan
peramban tetap melebarkan kolom yang isinya panjang, sehingga angka yang
diatur klien terlihat diabaikan.
Di HP tabelnya tetap digeser — aturan min-width: max-content di bawah
menang atas width:100%, jadi kolom sempit tidak ikut memeras teksnya. */
.spec-table--lebar { table-layout: fixed; width: 100%; }
/* <=768px: BIARKAN KOLOM SELEBAR ISINYA, jangan diperas.
`.spec-table-wrap` memang sudah `overflow-x: auto` sejak aturan #14, jadi
tabel yang lebih lebar dari layar tinggal digeser. Tapi `min-width: 420px`
membuatnya berhenti melebar tepat di angka itu, sehingga kolomnya justru
DIPERAS supaya muat 420 — dan yang dikorbankan adalah keterbacaan:
terukur di 390px, judul "CHEMICAL ANALYSIS" pecah 2 baris (header 76px)
dan "Potassium Chloride (KCL)" pecah 3 baris (baris 102px).
`min-width: max-content` membuat lebarnya ditentukan isi, bukan angka
karangan. Terukur pada katalog sekarang: tabel 4 kolom butuh 580px, tabel
2 kolom 250-551px — cukup dekat sehingga gesernya pendek.
⚠️ Tetap dipasangkan dengan `width: 100%` yang sudah ada, dan urutannya
penting untuk dipahami: lebar tabel jadi max(100%, max-content). Kalau
isinya muat, tabel tetap melebar penuh seperti dulu (tidak menyusut jadi
selebar isi); kalau tidak muat, barulah ia melar dan digeser.
⚠️ HANYA <=768px. Di 1024px ke atas tabel sudah 639-868px dan tidak ada
yang pecah baris sama sekali, jadi menyentuh desktop cuma menambah risiko
tanpa memperbaiki apa pun. */
@media (max-width: 768px) {
.spec-table { min-width: max-content; }
}
/* ------------------------------------------------------------
CTA FORM MELAYANG (halaman Produk & Flexitank)
Teks di atas latar putih, foto band di bawahnya, kartu form
ditarik naik lewat margin negatif sehingga bagian atasnya duduk
di atas putih dan bagian bawahnya menumpang foto — persis dump:
form (434 tinggi) mulai 204px sebelum foto, berakhir 112px di
dalam foto (foto tinggi 342px).
------------------------------------------------------------ */
.produk-cta__lead {
max-width: 800px;
margin-inline: auto;
text-align: center;
font-size: var(--fs-section);
font-weight: var(--fw-bold);
color: var(--c-primary);
}
.produk-cta__form {
position: relative;
/* Tanpa z-index, foto di bawahnya (menyusul di DOM, ditarik naik lewat
margin negatif) menimpa 112px bagian bawah kartu ini — termasuk tombol
Submit — karena elemen belakangan menang di stacking context yang sama.
Ketahuan saat screenshot: Submit "hilang" tertutup foto, bukan cuma
soal warna/shadow. */
z-index: 1;
/* Dump (Rectangle 75, sama persis di Standard/Industrial/Pharma Grade &
Flexitank): 814px, bukan 680px — sempat ditulis lebih sempit dari
seharusnya, jadi kartu kelihatan "mengambang kekecilan" dibanding
lebar foto/section di sekitarnya. */
max-width: 814px;
margin: var(--sp-10) auto 0;
/* Alpha 90% (bukan putih solid) — kartu ini menumpang foto di bagian
bawahnya, dump-nya rgba(255,255,255,.9), bukan var(--c-white) biasa. */
background: rgba(255, 255, 255, 0.9);
}
/* Dump (Rectangle 73 vs Rectangle 75, Standard Grade — pola sama di semua
varian): foto top=2414, tinggi342 -> bottom 2756. Kartu top=2210,
tinggi434 -> bottom 2644. Overlap (bagian foto yang KETUTUP kartu) =
2644-2414 = 230px, sisanya yang TERLIHAT di bawah kartu cuma 112px
(2756-2644). Dua angka ini sempat KETUKAR — margin-top ditulis -112
(dikira itu overlap-nya), padahal 112 itu justru bagian yang kelihatan.
Akibatnya foto ketutup kartu kurang jauh; foto seharusnya naik sampai
sejajar field "No telp/Whatsapp" (kira-kira pertengahan kartu), bukan
cuma menyentuh sedikit di bawah tombol Submit. */
.produk-cta__photo {
height: 342px;
margin-top: -230px;
background-size: cover;
background-position: center;
}
/* Sama seperti .post-layout: sidebar daftar produk 290px membuat kolom
detail tinggal 421-534px di rentang 901-1024px, sementara tabel
spesifikasinya sendiri sudah min-width 420px. Bertumpuk mulai 1024px. */
@media (max-width: 1024px) {
.product-layout { grid-template-columns: minmax(0, 1fr); }
.product-nav { width: 100%; max-height: 320px; }
}
/* Garis pemisah antar section, selebar viewport.
Di desain muncul di atas & di bawah section Klien. */
.rule {
height: 1px;
border: 0;
background: var(--c-border);
}
/* Dump (Line 1, di atas "Solusi terpercaya..." — sama di semua halaman
Produk & Flexitank): garis full-bleed BIRU, bukan abu-abu seperti
.rule biasa. Sempat tidak ada sama sekali di section form CTA ini. */
.rule--primary { background: var(--c-primary); }
/* ------------------------------------------------------------
NILAI PERUSAHAAN (Tentang) — section baru 2026-09-16
Dump: judul y 1347; daftar & foto sama-sama mulai y 1441 dan sama-sama
berakhir ~1832 (tinggi 391). Teks 455px di x 152, penanda di x 113,
foto 645x391 di x 682. Container 113..1327 -> kolom 569 : 645.
------------------------------------------------------------ */
.nilai-grid {
display: grid;
/* Dump (container 1214): daftar 494 | celah 75 | foto 645.
⚠️ Celah ditulis sebagai `column-gap`, BUKAN dibiarkan jadi sisa ruang
kolom kiri setelah `max-width` memotong daftar — itu yang dipakai
sebelumnya dan ia RUSAK begitu container menyempit: kolom kiri turun di
bawah max-width, tidak ada lagi yang dipotong, dan celahnya jadi NOL.
Terukur 2026-09-17: 36px di >=1300px, tapi **0px di seluruh 901..1300**
— teks benar-benar menempel foto di semua lebar tablet, dan tidak ada
satu pun alat yang menandainya (tidak ada overflow, tidak ada luber).
Persen, bukan px: ia mengikuti CONTAINER (bukan viewport seperti vw,
lihat aturan #62), jadi celahnya menyusut proporsional dan tidak pernah
hilang. 5,66% = 68px di container 1200.
Kolom 548 : 584 -> daftar 548 (= penanda 20 + celah 19 + teks 509),
foto 584. Ketiganya: 548 + 68 + 584 = 1200.
⚠️ Foto jadi 48,7% container, dump 53,1% — penyimpangan SADAR. Poppins
menuntut kotak teks 509px (dump 455), dan di container 1200 ketiganya
(teks Poppins + celah 75 + foto 645) butuh 1256px. Kelebihan 56px itu
ongkos fontnya; dibagi proporsional antara celah dan foto supaya tidak
ada satu elemen yang menanggung semuanya. */
grid-template-columns: 548fr 584fr;
column-gap: 5.66%;
/* ⚠️ `start`, BUKAN stretch bawaan grid. Dengan stretch, foto diregangkan
mengikuti tinggi daftar yang berubah-ubah menurut panjang teks, dan
rasio 645x391 dari desain rusak. */
align-items: start;
/* Dump: judul 1347..1378, daftar mulai 1441 -> 63px. */
margin-top: 63px;
}
/* Menumpang `.list-brand` (penanda & kisi 20px + teks sudah dari sana);
yang ditimpa hanya jaraknya, karena dump Nilai berbeda dari dump Misi. */
.nilai-list {
/* .list-brand bawaannya margin-top 40px; di sini daftar sudah dijarakkan
oleh .nilai-grid, jadi dinolkan. */
margin-top: 0;
/* Dump: jarak antar-poin diukur dari koordinat ATAS (aturan #67), dan
angkanya tidak seragam di sana (46 / 63 / 46 / 63 / 63 / 59) karena
sebagian poin satu baris dan sebagian dua. Dipakai satu nilai: 21px,
yaitu selisih untuk poin satu baris (46 - 25). Dengan itu poin dua baris
otomatis mendapat jarak yang sama, bukan jarak yang berbeda-beda. */
/* ⚠️ Jarak antar-poin di dump TIDAK seragam: 21px sesudah poin satu
baris, 13px sesudah poin dua baris (diturunkan dari selisih koordinat
ATAS 46/63/46/63/63/59 — aturan #67). Itu tata letak yang dirapikan
dengan mata, bukan aturan. Dipakai satu nilai 15px, yang menghasilkan
total jarak 6 x 15 = 90px — persis jumlah jarak di dump (390 - 12 baris
x 25 = 90). Jadi tinggi daftarnya sama, sementara jaraknya konsisten. */
gap: 15px;
/* ⚠️ 548px, bukan 455px seperti dump. Poppins lebih lebar dari Google
Sans Flex: di 455px ketujuh poin memakan 16 baris, sementara desain 12.
Selisih 4 baris membuat daftar 529px sementara fotonya 386px — kolom
kanan jadi menggantung kosong hampir 150px, padahal di desain keduanya
sama tinggi (390 vs 391). Perluasan aturan #28 — yang digeser lebar
kotaknya (+20%), bukan ukuran hurufnya.
⚠️ Angka ini adalah lebar DAFTAR (penanda 20 + celah 19 + kotak teks),
jadi kotak teksnya = 548 - 39 = 509px. Kalibrasi lama memakai jumlah
BARIS saja dan berhenti di 545; itu memberi pola 1-2-1-2-2-2-2 yang
benar tetapi poin 2 & 6 pecah satu kata lebih awal dari Figma.
Disapu ulang 485..545px per 1px terhadap TITIK PECAH-nya, bukan cuma
jumlah baris: cocok persis pada kotak teks 491..528, jadi dipakai 509
(tengah) -> daftar 548px.
⚠️ Angka itu sekarang hidup di `.nilai-grid` sebagai lebar KOLOM (548fr),
bukan sebagai `max-width` di sini. Dua tempat menyatakan satu angka yang
sama selalu berakhir lepas sinkron — dan yang `max-width` juga rusak di
container sempit (lihat catatan celah di .nilai-grid). */
}
/* ⚠️ 19px, bukan 39px. Dump menaruh penanda di x 113 (lebar 20,16) dan teks
di x 152 -> offset total 39px, jadi CELAHNYA 39 - 20 = 19px. Kesalahan yang
sama persis dengan poin Misi: selisih koordinat kiri dibaca sebagai celah.
Dikoreksi 2026-09-17. */
.nilai-list > li { gap: 19px; }
.nilai-foto {
width: 100%;
height: auto;
/* ⚠️ 584/398, BUKAN 645/391 seperti dump — penyimpangan SADAR, dipilih
klien 2026-09-17.
Di dump kedua kolom SAMA TINGGI (daftar 390, foto 391) dan itulah yang
mengunci tata letaknya. Di tema hal itu tidak bisa dicapai sekaligus:
Poppins menuntut kotak teks 509px (dump 455), jadi foto setinggi daftar
dengan rasio 1,65 menuntut lebar 656px — dan daftar 548 + celah 68 +
656 = 1272, lewat 72px dari container 1200.
Dipilih: kolom kanan terisi PENUH setinggi daftar (584x398, selisih 0px)
dengan mengorbankan rasio kotaknya (1,467 vs 1,650). Alternatifnya —
rasio setia, foto berakhir 44px lebih tinggi dari teks — ditolak karena
kolom yang menggantung justru lebih terbaca "tidak sesuai desain"
daripada kotak yang sedikit lebih persegi.
⚠️ Angka 398 diturunkan dari tinggi daftar SAAT INI (7 poin = 12 baris
Poppins di 1200px). Kalau poin ditambah/dikurangi lewat CMS, foto tidak
ikut menyesuaikan dan selisihnya kembali muncul — ukur ulang di sini,
jangan mengubah ukuran huruf.
⚠️ `align-items: start` di .nilai-grid TETAP. Meregangkan foto dengan
`stretch` sudah dicoba dan GAGAL: `![]()
` sebagai grid item tanpa
aspect-ratio menentukan tinggi barisnya sendiri dari dimensi intrinsik
fotonya — terukur baris meledak jadi 1500px. Memperbaikinya menuntut
elemen pembungkus baru, dan pembungkus baru memutus kombinator `+`
(aturan #39). */
aspect-ratio: 584 / 398;
object-fit: cover;
border-radius: var(--r-md);
}
@media (max-width: 900px) {
.nilai-grid {
grid-template-columns: 1fr;
/* Menimpa `column-gap` di atas juga — satu kolom, jadi yang tersisa
hanya jarak baris antara daftar dan fotonya. */
gap: var(--sp-8);
margin-top: var(--sp-10);
}
}
/* ------------------------------------------------------------
BARIS LOGO LEMBAGA (Tentang, di bawah judul Sertifikasi)
Dump: Group 25 959x79 di y 2009, enam logo dengan proporsi
berbeda-beda (ISO 76x75, TÜV NORD 170x79, SNI 69x61,
Kemenperin 200x60, ESDM 80x76, BPOM 81x74).
------------------------------------------------------------ */
.lembaga-row {
display: flex;
align-items: center;
justify-content: center;
/* Dihitung dari koordinat x di dump, bukan dari selisih lebar total:
ISO 241..317, TÜV NORD 374..544, SNI 604..673, Kemenperin 723..923,
ESDM 984..1064, BPOM 1119..1200 -> celah 57, 60, 50, 61, 55.
Dipakai reratanya, 57px.
(Versi pertama menulis 41px dari `(959 - 756) / 5`; angka 756 itu salah
— jumlah lebar keenam logo 676, bukan 756.) */
gap: 57px;
flex-wrap: wrap;
margin-top: var(--sp-10);
}
/* ⚠️ Aturan ini SENGAJA tidak menyetel width/height. Ukurannya datang dari
atribut width/height di markup, yang dihitung dari dimensi berkas @3x —
mekanisme yang sama dengan logo klien di marquee Home. Begitu CSS menyetel
lebar, atribut itu kalah (ia cuma "presentational hint") dan SELURUH logo
jadi seukuran, padahal proporsinya berbeda-beda. Lihat aturan #35. */
.lembaga-row__logo {
display: block;
max-width: 100%;
height: auto;
}
@media (max-width: 768px) {
.lembaga-row { gap: var(--sp-6); }
}
/* ------------------------------------------------------------
BAND KCL (Home, di bawah "Produk Kami")
Dump Home: Rectangle 63 setinggi 289px, teks 24/30 putih di kotak 677px
(y 2059 = 72px dari tepi atas band), tombol biru 195x54 di y 2150
(163px dari tepi atas). 72 + 145 + 72 = 289.
------------------------------------------------------------ */
.section-kcl {
min-height: 289px;
/* `align-content: center`, bukan tinggi mati: teks 24px dalam Poppins
lebih lebar dari Google Sans Flex, jadi ia bisa memakan satu baris
lebih. Dengan ini band-nya melar rapi alih-alih teksnya terpotong. */
display: grid;
align-content: center;
padding-block: 72px;
color: var(--c-white);
background-size: cover;
/* ⚠️ Dijangkar ke KANAN, bukan center.
Foto sumbernya 5:1 sementara pita ini 4,4:1 (teks jadi 3 baris di
Poppins), jadi `cover` selalu memotong sisi kiri-kanan. Dengan `center`
potongannya dibagi rata: tangan tertarik ke tengah dan makin membesar,
sementara sisi kiri yang di desain berisi butiran halus justru terpotong
habis jadi bidang hitam polos — persis yang dilaporkan klien sebagai
"kaya ada layer di belakangnya". Dengan `right`, yang dimakan potongan
adalah tepi kiri yang memang paling kosong, dan komposisinya tetap sama
dengan desain di lebar layar mana pun. */
background-position: right center;
}
/* ⚠️ 750px, bukan 677px seperti dump. Poppins lebih lebar dari Google Sans
Flex: di kotak 677px kalimat ini pecah jadi TIGA baris, sementara desain
menampilkannya dua. Tiga baris menambah 30px dan mendorong tombol serta
dasar pita ikut turun, sehingga seluruh proporsi band meleset dari desain —
dan sisi kiri fotonya ikut terpotong lebih banyak karena rasio pitanya
berubah. Disapu 660..1100px: 3 baris sampai 740, 2 baris mulai 750.
Perluasan aturan #28 — yang digeser lebar kotaknya (+11%), bukan ukuran
hurufnya. Versi Inggris sudah muat 2 baris bahkan di 660px. */
.section-kcl__teks {
max-width: 750px;
font-size: 24px;
line-height: 30px;
}
/* ⚠️ 31px, dihitung dari KOORDINAT ATAS di dump, bukan dari tinggi kotak
teksnya: teks mulai y 2059, tombol mulai y 2150 -> 91px, dikurangi dua baris
teks (2 x 30) = 31px.
Versi pertama memakai 38px karena tinggi kotak teks di dump dibaca 53px
sebagai tinggi barisnya. 53px itu kotak INK hasil auto-height Figma, bukan
kotak barisnya (2 x line-height = 60). Salah 7px, dan pita jadi 296px
alih-alih 289px. Untuk jarak antar elemen, selisih koordinat ATAS selalu
lebih bisa dipercaya daripada tinggi kotak. */
.section-kcl__aksi { margin-top: 31px; }
@media (max-width: 768px) {
.section-kcl {
min-height: 0;
padding-block: var(--sp-12);
}
/* 24px terlalu besar di layar sempit -- teksnya jadi 5-6 baris dan band
setinggi layar penuh. Diturunkan ke skala judul sub-bagian. */
.section-kcl__teks {
max-width: none;
font-size: var(--fs-body);
line-height: var(--lh-snug);
}
.section-kcl__aksi { margin-top: var(--sp-6); }
}
/* ------------------------------------------------------------
BAND KCL — versi MOBILE (dump Home 412px, 2026-09-17)
------------------------------------------------------------ */
/*
* ⚠️ Blok ini harus berada SESUDAH @media (max-width: 768px) di atas:
* spesifisitasnya sama (0,1,0 / 0,2,0) dan media query tidak menambah
* spesifisitas sedikit pun, jadi yang menang urutan muat.
*/
@media (max-width: 640px) {
.section-kcl {
/* Dump: band 412x252, teks mulai 45px dari atasnya. */
min-height: 252px;
padding-block: 45px;
/* Jangkar untuk gradien di bawah. */
position: relative;
/*
* ⚠️ 70%, bukan `right` seperti desktop — dan angkanya DIUKUR.
* Foto sumbernya 2560x449 (5,7:1) sementara band mobile 412x252
* (1,6:1), jadi `cover` cuma menampilkan ~29% lebarnya; jangkar
* menentukan bagian mana. Dengan `right` yang tersisa hanyalah tangan
* yang memenuhi frame — di Figma tangannya kecil di kanan bawah dengan
* bubuk berhamburan dan banyak ruang gelap.
* Disapu right/85/70/60/50/35/20/left lalu dipersempit 64..76%,
* dibandingkan ke crop PNG rujukan dengan RMSE: `right` 90,58 dan 70%
* **45,60** — separuhnya. Nilai di sekitarnya (72% 65,9; 74% 68,1)
* semuanya lebih buruk, jadi 70% memang minimumnya, bukan kebetulan.
*
* ⚠️ Dump mobile sebenarnya menyebut berkas LAIN (`Banner Hand KCL.jpg`,
* sementara desktop `Rectangle 63.png`) yang tidak pernah dikirim ke
* sini. 70% adalah pendekatan terbaik dari foto yang ada; kalau berkas
* mobilenya menyusul, jangkar ini perlu diukur ulang.
*/
background-position: 70% center;
}
/*
* ⚠️ GRADIEN GELAP yang sebelumnya TIDAK ADA sama sekali di mobile.
* Dump menaruh Rectangle 91 — 257x251 menempel tepi kiri, `linear-gradient
* (90deg, #000 40,82%, rgba(0,0,0,0) 98,95%)`. Di desktop bidang itu tidak
* diperlukan karena fotonya sendiri sudah gelap di sisi kiri; begitu band
* menyempit ke 412px, `cover` menarik bagian terang foto ke bawah teks dan
* teks putihnya kehilangan latar. Klien melihatnya sebagai teks yang
* "menempel" langsung di foto, beda dari Figma.
*/
.section-kcl::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 257px;
background: linear-gradient(90deg, #000 40.82%, rgba(0, 0, 0, 0) 98.95%);
pointer-events: none;
}
/* Konten naik di atas gradien tanpa perlu z-index negatif. */
.section-kcl > * { position: relative; }
/*
* Dump: kotak teks 256px (BUKAN selebar container), 15px/19 -> empat baris.
* Sebelumnya `max-width: none` membuatnya melebar 344px dan jatuh ke tiga
* baris, sehingga barisnya keluar dari bidang gelap 257px.
*/
.section-kcl__teks {
max-width: 256px;
font-size: 15px;
line-height: 19px;
}
/* Dump: teks mulai 45px dari atas band dan tombol 154px — selisih 109px,
dikurangi empat baris teks (4 x 19 = 76) = 33px. Selisih KOORDINAT ATAS,
bukan tinggi kotak (aturan #67). */
.section-kcl__aksi { margin-top: 33px; }
}
/* ------------------------------------------------------------
15. FOOTER
------------------------------------------------------------ */
.footer {
background: var(--c-primary);
color: var(--c-white);
}
.footer a { color: var(--c-white); }
.footer a:hover { opacity: 0.8; }
/* Tiga lajur, proporsinya langsung dari dump footer 2026-09-16 (kanvas 1440,
isi membentang 113..1326 = 1213px):
logo & alamat 113 -> 629 = 516
menu 629 -> 1127 = 498 (di dalamnya dua lajur lagi)
kontak 1127 -> 1326 = 199
Ditulis sebagai `fr`, bukan px, supaya ikut menyusut di layar sedang tanpa
mengubah perbandingannya. */
.footer__top {
display: grid;
grid-template-columns: 516fr 498fr 199fr;
align-items: start;
/* Dump: logo mulai di y 43 dari tepi atas footer; garis pemisah di y 237,
sementara isi kolom terpanjang (kontak) berakhir di y 207. */
padding-block: 43px 30px;
}
/* ⚠️ Ketiga lajur ditempatkan EKSPLISIT. Di halaman Flexitank .footer__nav
tidak dirender sama sekali (footer--minimal), dan dengan penempatan otomatis
blok kontak akan naik mengisi lajur tengah — kolom kanan jadi kosong dan
kontaknya pindah ke tengah tanpa ada yang meminta. */
.footer__brand { grid-column: 1; }
.footer__nav { grid-column: 2; }
.footer__contact { grid-column: 3; }
/* Menu & kontak mulai 65px di bawah logo (dump: logo y 43, baris menu pertama
dan baris telepon sama-sama y 108). */
.footer__nav,
.footer__contact { padding-top: 65px; }
/* Dump: alamat 334x55 di y 122, logo berakhir di y 98 -> jarak 24px.
Lebarnya dipatok supaya pecah barisnya sama dengan desain (3 baris);
tanpa itu ia melar selebar lajur 516px dan jadi 2 baris. */
.footer__alamat {
/* Dump: 334px. Dipakai 335 — Poppins butuh tepat satu piksel lebih untuk
memecah alamat jadi TIGA baris seperti desain; di 334px ia jatuh ke empat
dan mendorong seluruh footer 25px lebih tinggi. Terukur dengan menyapu
320..470px: 4 baris sampai 330, 3 baris mulai 335. Perluasan aturan #28
— yang digeser lebar kotaknya, bukan ukuran hurufnya. */
max-width: 335px;
margin-top: var(--sp-6);
font-size: var(--fs-body-sm);
/* 16/25 dari dump, bukan --lh-snug (≈1,4). Selisihnya 2,7px per baris,
dan pada blok 3 baris itu menggeser dasar kolom 8px — cukup untuk
memindahkan garis pemisah dan seluruh baris hak cipta di bawahnya. */
line-height: 25px;
}
/* ⚠️ .brand bawaannya `inline-flex`, jadi ia ikut membentuk LINE BOX dan
induknya menambahkan ruang turunan huruf di bawah gambar — terukur logo
berakhir di y 108, bukan 98, sehingga alamat di bawahnya meleset 10px
walau margin-nya sudah benar. Dijadikan `flex` (block-level) supaya
tingginya persis setinggi gambarnya. `width: max-content` menjaga area
kliknya tetap selebar logo, bukan selebar kolom. */
.footer__brand .brand {
display: flex;
width: max-content;
}
/* Menu footer: DUA lajur, bukan satu baris mendatar seperti sebelumnya.
`grid-auto-flow: column` + tiga baris tetap menaruh tiga item pertama di
lajur kiri (Home, Tentang, Produk) dan sisanya di lajur kanan (Blog,
Kontak) — persis dump, dan tetap masuk akal kalau klien menambah item:
yang ke-6 turun ke dasar lajur kedua, bukan merusak susunannya.
Lajur dalamnya 221 : 277, lagi-lagi dari dump (menu kiri x 629, kanan 850,
batas kanan blok 1127). */
.footer__nav {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(3, auto);
grid-template-columns: 221fr 277fr;
row-gap: 17px; /* dump: jarak antar baris 37px - tinggi baris 20px */
align-content: start;
font-size: var(--fs-body-sm);
line-height: 20px;
}
/* Sama polanya dengan menu utama: nonaktif 300, yang sedang dibuka 700. */
.footer__nav a { font-weight: var(--fw-light); }
.footer__nav a[aria-current] { font-weight: var(--fw-bold); }
.footer__kontak {
font-size: var(--fs-body-sm);
line-height: 25px; /* 16/25 dari dump — blok dua baris ini tepat 50px */
}
/* Dump: blok telepon/email 108..158, ikon medsos 29x29 di y 178. */
.footer__social {
display: flex;
gap: var(--sp-3);
margin-top: var(--sp-5);
}
.footer__social .icon { width: 29px; height: 29px; }
/* Garis pemisah PUTIH PENUH, bukan putih 40%. Sampel piksel dump footer:
baris y=237 terbaca rgb(255,255,255) persis, sementara y=236 masih biru
brand — jadi 1px solid, tanpa transparansi. */
.footer__bottom {
padding-block: 31px 41px;
border-top: 1px solid var(--c-white);
/* Dump Home/Tentang/Produk sepakat 14px/18 untuk baris copyright —
bukan 13px seperti tanggal artikel. */
font-size: var(--fs-label);
line-height: 18px;
/* Dump BARU memusatkannya (pusat terukur 718,5 dari kanvas 720). Versi
sebelumnya rata kanan, mengikuti dump lama. */
text-align: center;
}
/* Varian minimal untuk halaman Flexitank: tanpa menu navigasi. */
.footer--minimal .footer__nav { display: none; }
@media (max-width: 900px) {
/* Lajur kontak 199fr tinggal ~110px di lebar ini — "+62 21 2932 4688" saja
butuh ~170px, jadi susunan tiga lajur harus dilepas SEBELUM angkanya
memaksa teksnya pecah. Semua offset vertikal desktop ikut dilepas
(aturan #21). */
.footer__top {
grid-template-columns: 1fr;
gap: var(--sp-10);
padding-block: var(--sp-12) var(--sp-10);
}
.footer__brand,
.footer__nav,
.footer__contact {
grid-column: 1;
padding-top: 0;
}
/* ⚠️ Aliran KOLOM dipertahankan, cuma lebar lajurnya yang disamakan.
Sempat diubah ke `grid-auto-flow: row` — hasilnya item mengalir mendatar
(Home, Tentang / Produk, Blog / Kontak), jadi menu terbaca melompat-lompat
dan urutannya tidak lagi sama dengan versi desktop. Dengan aliran kolom,
lajur kiri tetap Home-Tentang-Produk dan kanan Blog-Kontak. */
.footer__nav {
grid-template-columns: 1fr 1fr;
row-gap: var(--sp-4);
}
.footer__alamat { max-width: none; }
}
/*
* MOBILE (dump Home 412px, 2026-09-17): menu footer jadi SATU BARIS.
*
* Dump menaruh kelima item sebaris di y 4518 — Home x35, Tentang x102,
* Produk x184, Blog x258, Kontak x313 — dengan jarak ~21px. Susunan dua
* lajur yang dipakai di tablet menghabiskan 92px (tiga baris) untuk sesuatu
* yang di desain cuma 20px; itu sendiri hampir seluruh sisa selisih tinggi
* halaman terhadap dump.
*
* ⚠️ `grid-auto-flow: column` dari blok di atas HARUS dilepas juga, bukan
* cuma kolomnya diubah — selama alirannya kolom, item tetap menumpuk ke
* bawah lebih dulu.
*/
@media (max-width: 640px) {
.footer__nav {
display: flex;
flex-wrap: wrap;
/* `space-between` supaya barisnya mengisi lebar penuh seperti dump;
`gap` jadi jarak MINIMUM, bukan jarak tetap. Di layar lebih sempit
dari ~360px item terakhir membungkus turun — melar, bukan meluber. */
justify-content: space-between;
gap: var(--sp-3) 21px;
}
/*
* ⚠️ Garis pemisah DILEPAS di mobile. Dump desktop punya garis putih penuh
* di atas baris copyright (sampel piksel: y=237 tepat rgb(255,255,255));
* dump MOBILE tidak — disapu 8550..9620 pada PNG rujukan, tidak ada satu
* baris pun yang >85% putih. Paddingnya ikut dikecilkan karena garisnya
* hilang.
*
* ⚠️ Copyright rata KIRI, bukan tengah. Tinta barisnya terukur x 39..334
* pada kanvas 412 — pusatnya 186, sementara pusat container 206. Ia mulai
* di gutter, sama seperti blok lain di atasnya.
*/
.footer__bottom {
border-top: 0;
padding-block: var(--sp-6) var(--sp-8);
text-align: left;
}
}
/* ------------------------------------------------------------
HALAMAN FLEXITANK
Landing lini produk terpisah. Nilai geometri diambil dari dump
FLEXITANK.txt (artboard 1440px).
------------------------------------------------------------ */
/* Hero: band air 329px, foto kontainer 1022px yang sengaja keluar dari
tepi kiri viewport (dump: left -84px) dan menggantung di bawah band,
panel teks kaca 537px di kanan. */
.hero-flexi {
position: relative;
isolation: isolate;
overflow: hidden;
}
.hero-flexi__band {
position: absolute;
inset: 0 0 auto;
height: 329px;
background-size: cover;
background-position: center;
z-index: -1;
}
.hero-flexi__inner {
display: grid;
/* 604 : 572 = perbandingan kolom di desain 1440px (kotak container 1200px
dikurangi gap 24px). 572 itu panel 537px + offset 35px ke kiri dari tepi
container (lihat .hero-flexi__panel) — kalau kolomnya dibuat 537px,
margin-right-nya malah memakan lebar panel sendiri (jadi 502px).
⚠️ Ditulis sebagai PERBANDINGAN (`fr`), bukan `minmax(0,1fr) 572px`.
Dengan panel dipatok 572px, penyempitan layar ditanggung KOLOM FOTO
SENDIRIAN — terukur: di 1440px foto 938px berbanding panel 537px
(rasio 1,75, sesuai desain), tapi di 1025px foto tinggal 418px
berbanding panel yang tetap 537px. Rasionya jatuh ke 0,78: fotonya
justru lebih KECIL daripada panelnya, kebalikan dari desain. Persis
yang terlihat di tablet.
Dengan 604fr : 572fr keduanya menyusut bersama, jadi proporsinya
terjaga di lebar berapa pun. Di 1440px hasilnya tetap 604px & 572px
persis seperti sebelumnya — angka desainnya tidak bergeser sedikit pun.
minmax(0, ...) wajib: tanpa itu `min-width: auto` bawaan grid item
membuat kolom dipaksa selebar konten minimumnya (aturan #14). */
grid-template-columns: minmax(0, 604fr) minmax(0, 572fr);
align-items: center;
gap: var(--sp-6);
padding-block: var(--sp-4) var(--sp-12);
}
/* Melebihi kolomnya ke kiri supaya kontainer menembus tepi layar.
Dump: foto 1022px mulai di x = -84px, sementara kolomnya sendiri cuma
~639px di 1440 — makanya angkanya besar. Sisa yang keluar dipotong
oleh overflow:hidden di .hero-flexi. */
.hero-flexi__product {
/* Ukuran & posisi direkonstruksi dari SILUET kontainer di FLEXITANK.png,
bukan dari kotak layer di dump. Kotak dump 1022x531 itu frame-nya
(termasuk ruang kosong); gambarnya sendiri 938x531 — dicek silang:
938 / 1,766 (rasio file 1876x1062) = 531,1 = tinggi dump. Kemarin
sempat dipaksa 1022px + object-fit:cover, akibatnya kontainer ~8%
kebesaran dan menjorok ~67px terlalu ke kiri sehingga margin kirinya
tidak sejajar dengan section di bawahnya.
Kolom kiri 604px -> 938/604 = 155,3%; tepi kiri gambar x=-8 (dihitung
dari tepi kontainer terlihat x=80 dikurangi padding transparan 9,3%). */
width: 155.3%;
max-width: none;
margin-left: -21.2%;
/* Dump: gambar mulai y=122, yaitu 30px DI ATAS band air (152). */
margin-top: -46px;
height: auto;
/* Foto kontainer digambar DI ATAS panel kaca, bukan di belakangnya —
dicek lewat sampel piksel desain: di zona tumpang-tindih warna biru
kontainernya tetap pekat, tidak dipudarkan overlay putih 49% milik
panel. Tanpa z-index, panel yang menyusul di DOM otomatis menang. */
position: relative;
z-index: 1;
}
/* Dump: panel 748..1285 (537px) — TIDAK rata dengan tepi kanan .container
(1320), tapi 35px di dalamnya. Konsekuensinya foto kontainer (-84..938)
menindih panel 190px, bukan 155px seperti sebelumnya, dan sisa ruang di
kanan jadi lebih lega — persis yang terlihat di Figma.
Padding kiri 94px (dump: teks mulai x=842, panel x=748) memang besar:
itu yang membuat teks tetap bebas dari foto kontainer yang menindih. */
.hero-flexi__panel {
background: rgba(255, 255, 255, 0.49);
/* 4,5px, bukan 2px. Nilainya TIDAK ada di dump (dump cuma mencatat
`background: rgba(255,255,255,0.49)` + `border-radius: 20px`, dan export
kode Figma pun tidak menyertakan efek background-blur) — jadi diukur
langsung dari render Figma, sesuai aturan #10. Caranya: ambil dua
wilayah di dalam panel yang bersih dari teks, blur render WordPress
bertahap, lalu cari radius yang selisihnya paling kecil terhadap render
Figma. Keduanya sepakat ~4,5px: selisih rata-rata turun dari 4,3/4,1
jadi 1,1/1,6 — mendekati derau dasar 2,06 yang terukur di wilayah
kontrol DI LUAR panel. Kecerahannya sendiri sudah pas sejak awal
(219,8 vs 219,5), jadi yang meleset memang cuma ketajamannya. */
-webkit-backdrop-filter: blur(4.5px);
backdrop-filter: blur(4.5px);
border-radius: var(--r-md);
/* Padding kiri-kanan & offset kanan dinyatakan PERSEN, bukan px.
Persentase padding/margin pada grid item dihitung terhadap lebar KOLOM
(572px di 1440), jadi di lebar desain nilainya tetap persis 94px / 47px
/ 35px — tidak ada angka desain yang bergeser.
Kenapa perlu: sejak kolomnya proporsional, panel ikut menyempit di
tablet. Dengan padding tetap 94px, di 1025px kolom teks tinggal 233px
dan judul pecah jadi 5 baris (desainnya 4, dipatok
dari field),
sekaligus menaikkan tinggi panel dari 344px ke 478px. Padding yang ikut
menyusut mengembalikan judul ke 4 baris.
Padding atas & bawah tetap px: keduanya tidak bersaing dengan lebar
teks, dan mengaitkannya ke lebar kolom justru membuat panel ikut
berubah tinggi tanpa alasan. */
padding: 45px 8.2168% 65px 16.4336%;
margin-right: 6.1189%;
/* Posisi & tinggi panel MENGIKUTI ANGKA DUMP, bukan hasil hitungan
centering. Sebelumnya panel ikut `align-items: center` milik
.hero-flexi__inner dan tingginya murni dari isinya, sehingga jatuh di
245..577 (332px) — dump Rectangle 84 justru 252..596 (537x344). Meleset
7px ke atas dan 12px terlalu pendek.
Kenapa centering tidak bisa menghasilkan angka itu: kotak konten grid
mulai y=168 dan tinggi 485px, jadi panel 344px yang di-center akan
mendarat di y=238 — bukan 252. Panel memang tidak terpusat terhadap
fotonya di desain. Makanya dipatok eksplisit: 84px dari tepi atas kotak
konten (168 + 84 = 252).
`min-height`, bukan `height`: kalau Poppins memecah deskripsi jadi lebih
banyak baris daripada font desain (aturan #28), panel boleh tumbuh
daripada teksnya terpotong. Dengan min-height ini padding-bawah 65px di
atas berubah peran jadi batas minimum saja. */
align-self: start;
margin-top: 84px;
min-height: 344px;
}
/* Dump: judul 30px/35px (1,17) dan deskripsi 18px/25px (1,39) — lebih
rapat dari --lh-tight (1,25) & --lh-body (1,7) yang dipakai sebelumnya.
Selisihnya menjadikan panel 365px, padahal desain 344px. */
.hero-flexi__title {
font-size: var(--fs-hero);
font-weight: var(--fw-extrabold);
line-height: 1.17;
}
.hero-flexi__desc {
/* dump: judul berakhir y=402, deskripsi mulai y=417 -> 15px */
margin-top: var(--sp-4);
font-size: var(--fs-body);
line-height: var(--lh-snug);
}
/* Hero bertumpuk mulai 1024px, BUKAN 768px seperti section lain. Panel
kaca lebarnya dipatok 572px (ukuran desain), jadi kolom fotonya yang
menyusut: di 1024px tinggal 268px dan di 834px cuma 100px — fotonya
praktis hilang. Di bawah 1024px foto ditaruh penuh di atas, panel di
bawahnya, dan semua trik overlap versi desktop dilepas. */
@media (max-width: 1024px) {
.hero-flexi__inner {
grid-template-columns: 1fr;
padding-block: 0 var(--sp-10);
}
.hero-flexi__product {
width: 100%;
margin-left: 0;
margin-top: 0;
aspect-ratio: auto;
}
.hero-flexi__panel {
margin-right: 0;
padding: var(--sp-8);
/* Seluruh trik penempatan versi desktop DILEPAS bersamaan — aturan #21:
satu trik overlap terdiri dari beberapa properti yang saling mengunci,
kalau salah satunya direset semuanya harus. Di layar bertumpuk panel
sudah selebar penuh, jadi offset 84px & tinggi minimum 344px justru
menyisakan ruang kosong di bawah teks. */
align-self: auto;
margin-top: 0;
min-height: 0;
}
}
/* <=768px: KONTAINER DIPERBESAR — melampaui tepi layar.
Di layar bertumpuk foto cuma selebar container (325px di HP 390px), dan
yang benar-benar terlihat jauh lebih kecil lagi: berkasnya punya ruang
TRANSPARAN yang lebar — terukur pada baris tengah, isinya cuma menempati
14,7%..84,9% dari lebar berkas. Jadi kontainer birunya sendiri tinggal
~228px, terlihat mungil di tengah layar.
Melebarkan elemennya melampaui viewport membuat ruang kosong itu terpotong
`overflow: hidden` milik .hero-flexi, bukan ikut ditampilkan — kontainernya
naik ke ~342px tanpa satu piksel pun isinya hilang. Angkanya dihitung dari
pengukuran di atas, bukan dikira-kira: pada 125vw, tepi kiri isi jatuh di
0,147x487 = 72px sementara yang terpotong cuma 48px, jadi masih ada 23px
sisa aman; tepi kanan isi 414px sementara batas potong 439px.
⚠️ Ditempatkan lewat MARGIN, bukan `transform: translateX` — aturan #43:
Firefox menghitung area gulir dokumen dari kotak TATA LETAK, sehingga
pemusatan lewat transform membuat halaman bisa digeser ke samping ke ruang
kosong. Di sini pun sudah dijaga `overflow: hidden`, tapi polanya tetap
yang aman.
⚠️ Angka 125vw MENGANDALKAN ruang transparan pada foto hero sekarang.
Kalau klien mengganti fotonya dengan yang isinya rata tepi, 12,5% di kiri
dan kanan akan benar-benar terpotong. Tidak merusak tata letak (terpotong
rapi), tapi kalau itu terjadi, ukur ulang dengan cara yang sama. */
@media (max-width: 768px) {
.hero-flexi__product {
width: 125vw;
margin-left: calc(50% - 62.5vw);
}
/* Kartu ditarik NAIK supaya menempel ke kontainer, meniru hubungan yang
ada di desain desktop (di sana kontainer memang menindih panel kaca).
Di layar bertumpuk hubungan itu hilang: kartu terpisah oleh gap 24px
DITAMBAH ruang kosong di bawah gambar, sehingga keduanya terbaca sebagai
dua benda yang tak berhubungan.
Aman karena yang dilewati bukan kontainernya: terukur dari berkasnya,
isi gambar berhenti di 93% tinggi (7% terbawah transparan penuh) dan
bodi kontainer sendiri sudah selesai di ~83% — sisanya cipratan air.
Di 390px itu berarti ~19px transparan + ~28px cipratan.
Foto tetap digambar DI ATAS kartu (z-index:1 di .hero-flexi__product),
jadi cipratan airnya jatuh menimpa tepi atas kartu — persis seperti
desktop, bukan kartu yang memotong foto.
`max(-64px, -12vw)` = tarikan mengikuti lebar layar tapi berhenti di
64px. Tanpa batas itu, di 768px tarikannya jadi 92px dan tepi atas
kartu naik melewati bodi kontainer. */
.hero-flexi__panel {
margin-top: max(-64px, -12vw);
}
}
/* Intro: teks 546px + foto 585px, jarak 83px (dump). minmax(0, ...) supaya
kolom bisa menyusut di bawah lebar alami fotonya — pola sama dengan
.intro (Home) dan .mission (Tentang), lihat catatan panjang di
.product-layout soal kenapa ini wajib. */
.flexi-intro {
display: grid;
grid-template-columns: minmax(0, 546fr) minmax(0, 585fr);
gap: var(--sp-20);
align-items: center;
}
/* Dump: paragraf intro 16px dengan line-height 25px (1,56) — bukan
--fs-body (18px)/--lh-body (1,7) bawaan. Dengan setelan bawaan teksnya
jadi 7 baris setinggi 214px, padahal desain 6 baris/141px, dan
kelebihan itu menggeser SELURUH section di bawahnya ~71px. */
.flexi-intro p {
font-size: var(--fs-body-sm);
line-height: 1.56;
}
.flexi-intro__photo {
width: 100%;
height: auto;
border-radius: var(--r-md);
}
/* ------------------------------------------------------------
HALAMAN PRODUK FLEXIPACK — Bag in Box, Paper IBC, Pollination Bag
(dump 2026-10-05, ketiganya artboard 1440x3377)
Satu template-part (template-parts/flexipack/halaman.php) untuk keduanya.
Kelas `--fp` = aturan BERSAMA; `--bib` / `--ibc` / `--pb` = geometri khas tiap
halaman (posisi & ukuran gambar). Komponen Flexitank dipakai ulang, jadi
yang ditulis di sini cuma selisihnya. Semua angka dari dump kecuali
disebut lain.
⚠️ Foto kemasan di Media Library SUDAH dipangkas ke isinya (kotak alpha),
jadi kotak gambar = isi + bayangannya. Angka posisi di bawah dihitung dari
KOTAK ISI di dump, bukan kotak layer Figma.
------------------------------------------------------------ */
/* ---------- Hero ----------
Hanya >=1025px: di bawahnya hero menumpuk dan aturan bawaan .hero-flexi
yang berlaku (aturan #21: trik overlap dilepas bersamaan). */
@media (min-width: 1024.02px) {
.hero-flexi--fp .hero-flexi__product { align-self: start; }
/* Rectangle 84 di kedua dump: 537x268 @ rgba(255,255,255,.7) — bukan 344px
@ .49 seperti Flexitank. Teks mulai x=800 (52px dari tepi panel), berakhir
x=1239 (46px sebelum tepi kanan). Persen terhadap lebar kolom 572px, sama
alasannya dengan panel Flexitank (ikut menyusut di tablet). */
.hero-flexi--fp .hero-flexi__panel {
background: rgba(255, 255, 255, 0.7);
padding: 45px 8.042% 19px 9.091%;
min-height: 268px;
}
/* Hero berakhir tepat di dasar bayangan kemasan (y ~628 di kedua dump). */
.hero-flexi--fp .hero-flexi__inner { padding-bottom: 0; }
/* Bag in Box: isi x 106..666, y 227..628. Kolom kiri 604px mulai x=120,
kotak konten grid mulai y=168 -> lebar 560/604, geser -14/604, turun 59. */
.hero-flexi--bib .hero-flexi__product {
width: 92.72%;
margin-left: -2.32%;
margin-top: 59px;
}
/* Paper IBC: isi x 230..623, y 230..628 -> 393/604, geser 110/604, turun 62. */
.hero-flexi--ibc .hero-flexi__product {
width: 65.07%;
margin-left: 18.26%;
margin-top: 62px;
}
/* Paper IBC: judul 3 baris mulai y=279 -> padding atas 27px (Bag in Box
2 baris, y=297 -> 45px). */
.hero-flexi--ibc .hero-flexi__panel { padding-top: 27px; }
/* Pollination Bag: isi x 162..730, y 163..852 -> 568/604, geser 42/604,
naik 5px (163 - 168). Kantongnya MENJULANG ke area intro — sampai y=852,
bagian bawahnya akar & bayangan yang memudar — sementara intro mulai
y=740. Jadi section intro menumpang 112px (di bawah). Judul 2 baris
mulai y=279 -> padding atas 27px, sama dengan Paper IBC. */
.hero-flexi--pb .hero-flexi__product {
width: 94.04%;
margin-left: 7%;
margin-top: -5px;
}
.hero-flexi--pb .hero-flexi__panel { padding-top: 27px; }
/* ⚠️ position + z-index WAJIB: .hero-flexi ber-position relative, jadi ia
dilukis di lapisan elemen berposisi — DI ATAS section non-posisi yang
datang sesudahnya. Tanpa ini teks & tombol intro tertindih kantong yang
memudar, dan tombol "Lihat Detail" tidak bisa diklik (aturan #63). */
.flexi-intro-section--pb {
padding-top: 0;
margin-top: -112px;
position: relative;
z-index: 1;
}
/* Bag in Box: sketsa intro mulai y=616, 13px DI ATAS dasar hero — section
intro menumpang. Aman: di x itu (>=775) hero sudah kosong. */
.flexi-intro-section--bib { padding-top: 0; margin-top: -13px; }
/* Paper IBC: gambar intro mulai y=646, hero berakhir 628 -> 18px. */
.flexi-intro-section--ibc { padding-top: 18px; }
}
/* Laptop kecil & iPad rebah (1025..1279px): tumpangan intro di atas DILEPAS.
Angka -13/18/-112 dihitung di 1440px, di mana kemasan lebih tinggi daripada
kartu kaca. Di lebar ini kartu justru lebih tinggi (teksnya membungkus
lebih banyak baris, min-height 268px tetap) sehingga intro menabrak kartu:
terukur kartu->intro -13px (BiB) & 18px (IBC) di 1025, 31/45px di 1194 —
klien melaporkannya "dempet" 2026-10-07. Patokan Flexitank 52px.
Pollination SENGAJA tetap menumpang: hero-nya diperpanjang akar kantong
yang memudar, jadi tanpa tumpangan ada celah >200px. Tumpangannya
diskalakan lebar layar — melewati dua titik ukur, 1025px -> -84px dan
1279px -> -268px — supaya kartu->intro tetap 64-89px di seluruh rentang.
Terukur kartu->intro: BiB 56..137, IBC 56..111, PB 64..89. Di >=1280px
aturan desktop di atas berlaku lagi tanpa perubahan. */
@media (min-width: 1024.02px) and (max-width: 1279.98px) {
.flexi-intro-section--bib,
.flexi-intro-section--ibc { margin-top: 0; padding-top: 56px; }
.flexi-intro-section--pb {
padding-top: var(--sp-12);
margin-top: calc(658px - 72.4vw);
}
}
/* Di layar menumpuk kemasan TIDAK dilebarkan melampaui layar seperti
kontainer Flexitank (trik 125vw di <=768px mengandalkan ruang transparan
lebar di berkas Flexitank — berkas ini sudah dipangkas, jadi trik itu akan
memotong kemasannya sendiri). Dibatasi ukuran desainnya. */
/* Layar menumpuk (<=1024px) — komposisinya MENIRU hero Flexitank versi HP
(permintaan klien 2026-10-07, Flexitank jadi panduan). Terukur di 390px:
isi kontainer Flexitank mulai 51px di bawah navbar, berhenti di dalam band
329px, dan kartu kaca menumpang band 76px. Sebelumnya ketiga halaman
Flexipack menempelkan kemasannya 1px di bawah navbar (berkasnya sudah
dipangkas ke isi, tanpa ruang transparan di atas), Paper IBC memenuhi
seluruh band, dan kartu Paper IBC/Pollination tidak menumpang band sama
sekali.
Jadi gambarnya diperkecil supaya MUAT DI DALAM band, diturunkan dari
navbar, lalu kartu ditarik naik sampai tepat di dasar isinya. Semua angka
px karena band-nya px (329) — gambar & kartu harus mengikuti band, bukan
lebar layar. Rumus margin kartu:
atas kartu = margin-top gambar + tinggi gambar + gap 24 + margin kartu
dengan sasaran atas kartu ~250-265px dari tepi atas band (menumpang band
64-79px, setara Flexitank).
Lebar gambar dipatok <=300px supaya tetap utuh di HP 360px (container
300px); max-width 100% menjaga layar yang lebih sempit lagi. */
@media (max-width: 1024px) {
.hero-flexi--fp .hero-flexi__product {
max-width: 100%;
margin-inline: auto;
}
/* Kartu di ATAS gambar (kebalikan Flexitank, yang sengaja menaruh
cipratan airnya di atas kartu): akar kantong Pollination Bag memudar
panjang di bawah isinya, dan tanpa ini akar transparan itu tergambar
menimpa judul kartu. Di bawah kartu ia ikut diburamkan backdrop-filter. */
.hero-flexi--fp .hero-flexi__panel {
position: relative;
z-index: 2;
}
/* Bag in Box: berkas 1,395:1, isi 0..88% tinggi. 300px -> tinggi 215,
isi 56..246 dari tepi band; kartu mulai 250 (56+215+24-45). */
.hero-flexi--bib .hero-flexi__product { width: 300px; margin-top: 56px; }
.hero-flexi--bib .hero-flexi__panel { margin-top: -45px; }
/* Paper IBC: berkas hampir persegi (0,987:1) dan isinya rata tepi, jadi
lebarnya yang harus turun paling banyak: 214px -> tinggi 217, isi
52..269; kartu mulai 265 (menumpang bayangan palet 4px). */
.hero-flexi--ibc .hero-flexi__product { width: 214px; margin-top: 52px; }
.hero-flexi--ibc .hero-flexi__panel { margin-top: -28px; }
/* Pollination Bag: berkas 0,825:1, kantong pekat 3,3..61,7% tinggi, sisanya
akar memudar. 290px -> tinggi 352, isi pekat 56..261; kartu mulai 258
dan menutup akarnya (lihat z-index kartu di atas). */
.hero-flexi--pb .hero-flexi__product { width: 290px; margin-top: 44px; }
.hero-flexi--pb .hero-flexi__panel { margin-top: -162px; }
/* Padding atas --sp-1, sama dengan intro Flexitank: hero sudah membawa
padding bawahnya sendiri, jadi padding section 80px menyisakan celah
~130px di bawah panel. */
.flexi-intro-section--fp { padding-top: var(--sp-1); }
}
/* Di layar menumpuk kemasan dipusatkan menurut BENDANYA, bukan berkasnya.
Berkas foto tidak simetris: Bag in Box membawa bayangan lembut ~23% di
sisi KIRI (kardus baru mulai x 278 dari 1200 -> titik tengahnya di 60,8%
lebar), Pollination Bag menyisakan ruang transparan di sisi KANAN
(kantong di 43,7%). Di desktop itu memang komposisinya; begitu gambarnya
dipusatkan di layar HP, kardus terlihat bergeser ~35px ke kanan dan
kantong ~20px ke kiri. Paper IBC sudah 50% dan tidak disentuh.
Diukur dari kanal alpha berkasnya (piksel alpha > 200), bukan dikira.
⚠️ `translate`, bukan margin: elemennya ber-`margin-inline: auto`, dan
persen pada `translate` dihitung terhadap lebar GAMBAR itu sendiri — jadi
satu angka benar di lebar layar berapa pun. Aman dari aturan #43:
.hero-flexi ber-`overflow: hidden`, dan gambar ini tidak membungkus
elemen ber-position fixed (aturan #60). Kalau fotonya diganti, ukur ulang. */
@media (max-width: 1024px) {
.hero-flexi--bib .hero-flexi__product { translate: -10.8% 0; }
.hero-flexi--pb .hero-flexi__product { translate: 6.3% 0; }
}
/* ---------- Intro ---------- */
.flexi-intro__gambar { height: auto; }
/* Bag in Box — dump: teks berakhir ~y 822, tombol y 848 -> 26px. */
.flexi-intro__btn { margin-top: var(--sp-6); }
/* Bag in Box: sketsa 460x368 di x=775, teks & tombol (697..902) terpusat
terhadapnya (616..984) — pas dengan align-items:center .flexi-intro.
⚠️ Kolom teks 600px, bukan 546px (aturan #28): di 546px Poppins memecah
paragrafnya 3 + 4 baris, desain 2 + 3. Disapu per 5px — tercapai di 600px.
Sketsa tetap di x=775; yang dikorbankan celahnya (80 -> 55px). */
@media (min-width: 1024.02px) {
.flexi-intro--bib {
grid-template-columns: minmax(0, 600fr) minmax(0, 545fr);
gap: 55px;
}
.flexi-intro--bib .flexi-intro__gambar { width: 84.4%; }
}
/* Sketsa berakhir y=984, judul "Produk yang Cocok" y=1054 -> 70px. */
.flexi-intro-section--bib { padding-bottom: 70px; }
/* Paper IBC: teks di x=112 mulai y=756; gambar (isi 677x352) di
x 647..1324, y 646..998 — melewati tepi kanan container 4px. Teks TIDAK
terpusat terhadap gambar: ia mulai 110px di bawah tepi atas gambar.
⚠️ Kolom teks 600px, bukan 546px (aturan #28): di 546px Poppins memecah
paragrafnya 5 baris, desain 4 — tombol ikut turun 24px. 4 baris tercapai
di 595px. Kolomnya jadi MENUMPANG gambar 73px (x 647..720), dan itu aman:
diukur dari kanal alpha berkasnya, zona itu TRANSPARAN PENUH di sepanjang
baris teks (y 756..856); bayangan palet baru mulai di bawahnya, jauh dari
tombol (x 120..304). Kolom 600 + 600, gambar 677/600 = 112,83%, geser
-73/600. */
@media (min-width: 1024.02px) {
.flexi-intro--ibc {
grid-template-columns: minmax(0, 600fr) minmax(0, 600fr);
gap: 0;
align-items: start;
}
.flexi-intro--ibc > :first-child { margin-top: 110px; }
.flexi-intro--ibc .flexi-intro__gambar {
width: 112.83%;
max-width: none;
margin-left: -12.17%;
}
}
/* Paper IBC: teks 4 baris berakhir ~y 856, tombol y 889 -> 33px. */
.flexi-intro--ibc .flexi-intro__btn { margin-top: var(--sp-8); }
/* Paper IBC: gambar berakhir y=998, judul "Produk yang Cocok" y=1084 -> 86px. */
.flexi-intro-section--ibc { padding-bottom: 86px; }
/* Pollination Bag: teks 546px di x=112 dan foto 585x238 (bersudut 20px)
di x=742, KEDUANYA mulai y=740 — rata atas. Kolom 546 + gap 76 + 578 =
1200; foto 585/578 = 101,21% (melewati tepi kanan container 7px, sama
dengan dump). Foto berakhir y=978, judul "Pengaplikasian Produk" y=1054
-> 76px. */
@media (min-width: 1024.02px) {
.flexi-intro--pb {
grid-template-columns: minmax(0, 546fr) minmax(0, 578fr);
gap: 76px;
align-items: start;
}
.flexi-intro--pb .flexi-intro__gambar {
width: 101.21%;
max-width: none;
}
}
.flexi-intro--pb .flexi-intro__gambar { border-radius: var(--r-md); }
.flexi-intro-section--pb { padding-bottom: 76px; }
/* (0,2,0) supaya menang atas aturan lebar per halaman di atas. */
@media (max-width: 1024px) {
.flexi-intro .flexi-intro__gambar { width: 100%; max-width: 460px; margin-inline: auto; }
.flexi-intro--ibc .flexi-intro__gambar { max-width: 677px; }
.flexi-intro--pb .flexi-intro__gambar { max-width: 585px; }
}
/* ---------- Icon rail "Produk yang Cocok" ----------
Lingkaran 97px berjarak 182px di kedua dump. Bag in Box 7 item (pusat
174,5 ... 1266,5) -> kolom 108px + gap 74px tepat di container 1200px.
Gap ditulis PERSEN supaya ikut menyusut bersama container; rumus garis
penghubung .icon-rail memakai var(--rail-gap) juga.
minmax(0, 1fr): label lebih lebar (desain 128px) daripada kolom 108px.
Tanpa minmax, min-content label memaksa kolom melebar (aturan #14). */
.icon-rail--rapat {
--rail-gap: 6.1667%;
grid-auto-columns: minmax(0, 1fr);
}
/* 6 item (Paper IBC): jaraknya TETAP 182px, jadi rail-nya lebih sempit dari
container — 6 x 182 - 74 = 1018px (84,833% dari 1200), terpusat. Gap
persen dihitung terhadap lebar rail itu sendiri: 74/1018 = 7,269%. */
.icon-rail--rapat.icon-rail--n6 {
--rail-gap: 7.269%;
max-width: 84.833%;
margin-inline: auto;
}
/* 3 item (Pollination Bag): 3 x 182 - 74 = 472px (39,333% dari 1200),
terpusat — lingkaran di dump x 490 / 672 / 854. Gap 74/472 = 15,678%. */
.icon-rail--rapat.icon-rail--n3 {
--rail-gap: 15.678%;
max-width: 39.333%;
margin-inline: auto;
}
/* width: max-content WAJIB: di flex column ber-align center, lebar label
kalau tidak ditentukan dibatasi lebar kolom (108px) dan "Anggur Merah"
pecah dua baris, desain satu. Batasnya 150px atau 168,5% kolom
(= 182/108), mana yang lebih kecil — di layar sempit label tidak pernah
menabrak tetangganya. 150px, bukan 146px (label terlebar di dump, "Cairan
Kimia tidak Berbahaya"): di 146px Poppins memecahnya 3 baris, desain 2.
"Pembersih Tangan" (Bag in Box) butuh 170px untuk satu baris, jadi tetap
2 baris seperti desainnya. */
.icon-rail--rapat .icon-rail__label {
width: max-content;
max-width: min(150px, 168.5%);
}
.icon-rail__item:nth-child(7) { --i: 6; }
/* Dump: judul berakhir 25px sebelum garis rail di kedua halaman (bawaan
.section-title + .icon-rail 48px). */
.section-title + .icon-rail--rapat { margin-top: 25px; }
/* Di bawah 1100px 6-7 lingkaran 97px tidak muat sebaris. Dibungkus 4 per
baris, baris terakhir terpusat; garis penghubung dilepas karena tidak
masuk akal lintas baris (sama seperti .icon-rail di <=768px). */
@media (max-width: 1100px) {
.icon-rail--rapat,
.icon-rail--rapat.icon-rail--n6,
.icon-rail--rapat.icon-rail--n3 {
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: var(--sp-8);
column-gap: 0;
max-width: none;
}
.icon-rail--rapat::before,
.icon-rail--rapat .icon-rail__item::before { display: none; }
/* ⚠️ min-width: 0 + batas label dalam PX, bukan persen. Persen pada label
dihitung terhadap lebar item, dan saat flexbox menghitung lebar MINIMUM
item persen itu siklik sehingga diabaikan — label "Cairan Kimia tidak
Berbahaya" lalu memaksa itemnya 240px (> 50%) dan di HP setiap ikon
sesudah baris pertama jatuh satu per baris. Kolom tersempit di sini
160px (50% dari 320px), jadi 150px selalu muat. */
.icon-rail--rapat .icon-rail__item {
flex: 0 0 25%;
min-width: 0;
padding-top: 0;
}
.icon-rail--rapat .icon-rail__label { max-width: 150px; }
}
@media (max-width: 600px) {
.icon-rail--rapat .icon-rail__item { flex-basis: 50%; }
/* Aturan rentang bawaan .icon-rail di <=768px (item terakhir ganjil
dibentangkan 2 kolom) milik GRID — di sini flex & justify-content:center
sudah memusatkannya. */
.icon-rail--rapat .icon-rail__item:last-child:nth-child(odd) { grid-column: auto; }
}
/* ---------- Band teks ----------
25/31 putih, overlay hitam 40% (Rectangle 9) di kedua dump. */
.cta-band--fp .cta-band__text { font-size: var(--fs-hero-sub); }
.cta-band--fp::after { background: rgba(0, 0, 0, 0.4); }
/* Paper IBC menebalkan sebagian kalimat ("dengan kapasitas muat hingga
1100L"). Ditulis eksplisit: bawaan peramban "bolder" bisa jatuh ke
bobot yang tidak dimuat. */
.cta-band__text :is(b, strong) { font-weight: var(--fw-bold); }
/* ⚠️ Aturan #80: .cta-band adalah grid, dan penanda section setinggi NOL
(.anaya-sec dari anaya_tandai_section) menjadi baris KEDUA-nya. Dengan
`place-items: center` saja sisa ruang band dibagi ke dua baris, jadi teks
turun ke paruh bawah (terukur 142px dari tepi atas, desain 93px).
`align-content: start` memadatkan barisnya ke atas, lalu padding atas
menaruh teks persis di angka dump. Kedua desain memang TIDAK terpusat. */
.cta-band--fp { align-content: start; }
/* Bag in Box: band y 1384, teks y 1477 -> 93px.
⚠️ 1040px, bukan 938px (aturan #28): di 938px Poppins memecah kalimatnya
jadi 3 baris, desain 2. Disapu per 5px — 2 baris tercapai di 1035px. */
.cta-band--bib { padding-top: 93px; }
.cta-band--bib .cta-band__text { max-width: 1040px; }
/* Paper IBC: band y 1414, teks y 1517 -> 103px. Lebar 909px PERSIS dump —
disapu, Poppins sudah 2 baris mulai 890px, jadi tidak perlu dilebarkan. */
.cta-band--ibc { padding-top: 103px; }
.cta-band--ibc .cta-band__text { max-width: 909px; }
/* Pollination Bag: band y 1384, teks y 1477 -> 93px (sama dengan Bag in
Box). ⚠️ 1040px, bukan 938px (aturan #28): di 938px Poppins memecahnya
4 baris, desain 3 — tercapai mulai 1035px, sama persis dengan Bag in Box. */
.cta-band--pb { padding-top: 93px; }
.cta-band--pb .cta-band__text { max-width: 1040px; }
/* Flexitank: band y 1384, teks y 1477 -> 93px, angka yang sama dengan
Flexipack. Kena aturan #80 yang sama (terukur 119px sebelum diperbaiki).
⚠️ Lebar 881px dari dump DIPERTAHANKAN walau Poppins memecahnya 3 baris
(desain 2): 2 baris baru tercapai di 1185px, +35% — hampir selebar
container. Penyimpangan terkecil (aturan #28) di sini adalah menerima satu
baris lebih; tinggi band tetap 284px karena isinya masih di bawah itu. */
.cta-band--ft {
align-content: start;
padding-top: 93px;
}
@media (max-width: 900px) {
.cta-band--fp,
.cta-band--ft {
align-content: center;
padding-top: var(--sp-12);
}
}
/* Selama foto band belum diisi: latar gelap rata, supaya teks putih tetap
terbaca. Warnanya dari rerata foto desain Bag in Box (cipratan cokelat). */
.cta-band--polos { background-color: #2a221c; }
/* ---------- "Kenapa …?" ----------
Foto kiri, judul + poin bertanda chevron kanan; judul & penanda selalu
mulai x=623 di kedua dump. */
.flexi-kenapa {
display: grid;
align-items: center;
}
.flexi-kenapa__foto {
max-width: none;
height: auto;
}
/* Bag in Box: isi foto (456x516) mulai x=98, 22px DI LUAR tepi kiri
container -> kolom 434 : 697 + gap 69 = 1200, foto 105,07% geser -5,07%.
Atas-bawah: band berakhir 1668, foto mulai 1720 (52px); foto berakhir
2237, garis pemisah 2332 (95px). Teks terpusat terhadap foto. */
.flexi-kenapa-section--bib { padding-block: 52px 95px; }
.flexi-kenapa--bib {
grid-template-columns: minmax(0, 434fr) minmax(0, 697fr);
column-gap: 69px;
}
.flexi-kenapa--bib .flexi-kenapa__foto {
width: 105.07%;
margin-left: -5.07%;
}
/* Paper IBC: foto (471x438, persegi tanpa sudut membulat) di x=113, 7px di
luar container -> kolom 464 : 697 + gap 39 = 1200. Judul mulai y=1774,
foto y=1779 — rata ATAS, bukan terpusat (teksnya lebih panjang dari
foto). Band berakhir 1698 -> 76px; poin terakhir berakhir ~2249, garis
pemisah 2332 -> 83px. */
.flexi-kenapa-section--ibc { padding-block: 76px 83px; }
.flexi-kenapa--ibc {
grid-template-columns: minmax(0, 464fr) minmax(0, 697fr);
column-gap: 39px;
align-items: start;
}
.flexi-kenapa--ibc .flexi-kenapa__foto {
width: 101.51%;
margin-left: -1.51%;
margin-top: 5px;
}
/* Pollination Bag: foto 471x438 di x=113 — kolom sama dengan Paper IBC.
Judul 1 baris y=1744, foto y=1751 (rata atas, foto turun 7px). Band
berakhir 1668 -> 76px. Foto berakhir 2189, garis pemisah tetap y=2332
seperti dua halaman lain -> 143px. */
.flexi-kenapa-section--pb { padding-block: 76px 143px; }
.flexi-kenapa--pb {
grid-template-columns: minmax(0, 464fr) minmax(0, 697fr);
column-gap: 39px;
align-items: start;
}
.flexi-kenapa--pb .flexi-kenapa__foto {
width: 101.51%;
margin-left: -1.51%;
margin-top: 7px;
}
.flexi-kenapa__judul {
font-size: var(--fs-hero);
font-weight: var(--fw-extrabold);
line-height: 1.17;
color: var(--c-primary);
}
/* Judul -> poin pertama 25px (Bag in Box) / 27px (Paper IBC); antar-poin
(3 baris = 75px) rata-rata 26px di kedua dump. */
.flexi-kenapa__poin {
margin-top: 25px;
gap: 26px;
}
/* Penanda x 623 (lebar 20,16), teks x 660 -> celah 17px (aturan #70). */
.flexi-kenapa__poin > li { gap: 17px; }
.flexi-kenapa__poin-judul {
display: block;
font-weight: var(--fw-bold);
}
@media (max-width: 900px) {
.flexi-kenapa-section { padding-block: var(--section-y); }
.flexi-kenapa {
grid-template-columns: 1fr;
row-gap: var(--sp-8);
}
/* (0,2,0) supaya menang atas aturan geometri per halaman di atas. */
.flexi-kenapa .flexi-kenapa__foto {
width: 100%;
max-width: 471px;
margin: 0 auto;
}
.flexi-kenapa__poin > li { gap: var(--sp-4); }
}
/* Klaim kapasitas — 24px, rata tengah, satu blok teks kaya. */
.flexi-claim {
max-width: 828px;
margin-inline: auto;
text-align: center;
font-size: var(--fs-product);
line-height: var(--lh-snug);
}
/* Band sertifikasi: latar abu #f4f4f4 selebar viewport, foto kontainer
menggantung keluar dari band (dump: band 375px, foto 513px). */
/* Dump (Rectangle 128): band 1440x375. Fotonya (641x513) mulai 10px di
bawah tepi atas band lalu MENGGANTUNG 148px ke bawah — bukan menggantung
simetris atas-bawah seperti sebelumnya (margin-block -32px), yang bikin
band jadi 506px, 131px lebih tinggi dari desain. */
.section.cert-band {
background: var(--c-surface);
min-height: 375px;
align-content: center;
/* padding-block section (0/80) ikut menambah tinggi band di luar 375px
-> dinolkan, tingginya murni dari min-height + konten yang di-center. */
padding-block: 0;
/* Dump: band berakhir y=3205, garis pemisah berikutnya y=3396 -> 191px.
Ruang ini WAJIB: fotonya menggantung 148px ke bawah band (lihat
.cert-band__photo), jadi tanpa jarak ini foto menembus garis pemisah
dan menabrak teks CTA di bawahnya. Sisa 43px jadi kelonggarannya. */
margin-bottom: 191px;
}
.cert-band__inner {
display: grid;
grid-template-columns: minmax(0, 641fr) minmax(0, 573fr);
gap: var(--sp-10);
align-items: center;
}
.cert-band__photo {
width: 100%;
height: auto;
/* Menggantung ke bawah saja (lihat catatan di .section.cert-band). */
margin-top: 10px;
margin-bottom: -148px;
}
.cert-band__logos {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-8) var(--sp-6);
align-items: center;
margin-top: var(--sp-8);
}
.cert-band__logos img {
width: 100%;
max-height: 86px;
object-fit: contain;
}
/* ------------------------------------------------------------
DIAGRAM BERANOTASI (Flexitank — Material & Spesifikasi)
Bingkai memakai sistem koordinat dump: 1214 x 628 px. Garis &
titik digambar sebagai SVG di atas foto supaya koordinatnya
tetap presisi saat lebar berubah; labelnya HTML biasa agar
tipografinya ikut design system.
------------------------------------------------------------ */
.flexi-diagram {
position: relative;
aspect-ratio: 1214 / 628;
font-size: var(--fs-body-sm);
}
/* Ukuran huruf label IKUT MENYUSUT bersama diagramnya.
Posisi tiap label dinyatakan persen (ikut menyusut) sementara ukuran
hurufnya tetap px, jadi keduanya bergerak BERLAWANAN saat layar menyempit:
ruang antar-label berkurang, teksnya justru bertambah baris. Terukur pada
pasangan terapat (BAG -> CORRUGATED PAPER ROLL): 135px di 1366px, 54px di
1200px, 9px di 1100px, lalu MINUS 13px di 1000px — bertumpuk, bukan
sekadar rapat.
Dengan huruf yang ikut skala, callout tetap sebangun dengan desain di
lebar berapa pun; tata letak, posisi, dan gaya munculnya tidak berubah
sama sekali.
Rumusnya bukan kira-kira: lebar diagram = lebar viewport dikurangi dua
gutter (80px masing-masing di rentang ini), dibatasi 1200px oleh
.container. Jadi 16px x lebar/1200 = (100vw - 160px) / 75. Di >=1360px
hasilnya >=16px sehingga dipatok balik ke nilai desain — lebar desain
TIDAK bergeser sedikit pun. Batas bawah 12px supaya tetap terbaca.
Hanya >900px: di bawah itu label sudah jadi daftar dengan ruang sendiri,
dan ukurannya harus tetap normal. */
@media (min-width: 900.02px) {
.flexi-diagram {
font-size: clamp(12px, calc((100vw - 160px) / 75), var(--fs-body-sm));
}
}
.flexi-diagram__img {
position: absolute;
left: 10.87%;
top: 3.98%;
width: 76.36%;
height: 85.35%;
object-fit: contain;
}
.flexi-diagram__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.flexi-diagram__line {
fill: none;
stroke: var(--c-ink);
stroke-width: 1;
}
.flexi-diagram__dot { fill: var(--c-ink); }
.flexi-diagram__label {
position: absolute;
line-height: var(--lh-snug);
}
/* Label yang duduk di KIRI titiknya (Airvent) teksnya rata kanan supaya
ujung teks menempel ke titik. Dump: kotak judul & kotak isinya sama-sama
berakhir di x=708 (titik di 724,5) — sedangkan kalau rata kiri, teks
Poppins yang lebih pendek berhenti di 622 dan callout-nya terlihat
"berjauhan" dari titiknya. Label lain (BULK HEAD & yang di sisi kanan)
tetap rata kiri, sesuai dump. */
.flexi-diagram__label--ke-kanan { text-align: right; }
/* Tanpa text-transform: dump menulis judul callout kapital SEMUA kecuali
"3 inch VALVE" (kata "inch" huruf kecil). Kapitalisasi ditulis apa adanya
di markup supaya pengecualian itu tidak ikut dipaksa jadi kapital. */
.flexi-diagram__label b {
display: block;
font-weight: var(--fw-bold);
}
.flexi-diagram__label span { display: block; margin-top: var(--sp-1); }
/* --- Animasi diagram: SELURUH elemen muncul BERSAMAAN dalam 200ms.
(permintaan klien 2026-09-17)
Sebelumnya berupa kaskade searah jarum jam — tiap callout menunggu yang
sebelumnya tuntas, dan seluruh diagram baru selesai di **9,1 detik**
(terukur, sejak diagram masuk layar). Itu yang diminta dipercepat.
pathLength="1" di markup membuat semua garis punya panjang 1 satuan, jadi
satu nilai dasharray cukup untuk garis sepanjang apa pun.
⚠️ Empat variabel di bawah adalah SATU-SATUNYA tempat yang perlu disentuh
kalau iramanya diubah lagi — rumus `calc()`-nya tidak perlu diapa-apakan.
Mengembalikan kaskade lamanya: --fx-jeda 1450ms, --fx-garis 600ms,
--fx-awal 850ms, --fx-durasi tetap per-properti (600/250/380).
`--i` di markup SENGAJA dipertahankan walau sekarang selalu dikalikan 0.
Ia menyimpan urutan searah jarum jam (Airvent → Bag → Corrugated → Steel
Bars → 3 inch Valve → Bulk Head) yang juga menentukan susunan daftar di
<=900px; membuangnya berarti menulis ulang urutan itu kalau kaskadenya
dikembalikan. */
.flexi-diagram {
/* Jarak antar callout. 0 = keenamnya mulai berbarengan. */
--fx-jeda: 0ms;
/* Jatah menggambar garis sebelum titiknya muncul. 0 = bersamaan. */
--fx-garis: 0ms;
/* Jatah sebelum label muncul. 0 = bersamaan dengan garis & titik. */
--fx-awal: 0ms;
/* Durasi tiap animasi. Dicoba bertahap bersama klien pada 2026-09-17:
200ms (terbaca sebagai kedipan) -> 300ms -> 500ms yang dipakai. */
--fx-durasi: 500ms;
}
.flexi-diagram .flexi-diagram__line {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.flexi-diagram .flexi-diagram__dot { transform: scale(0); transform-origin: center; transform-box: fill-box; }
.flexi-diagram .flexi-diagram__label { opacity: 0; transform: translateY(8px); }
.flexi-diagram.is-visible .flexi-diagram__line {
stroke-dashoffset: 0;
transition: stroke-dashoffset var(--fx-durasi) ease-out;
transition-delay: calc(var(--i, 0) * var(--fx-jeda));
}
.flexi-diagram.is-visible .flexi-diagram__dot {
transform: scale(1);
/* Lengkung pegas dipertahankan — pada 200ms ia terbaca sebagai "pop"
singkat, bukan pantulan yang memperlambat. */
transition: transform var(--fx-durasi) cubic-bezier(0.34, 1.4, 0.64, 1);
transition-delay: calc(var(--i, 0) * var(--fx-jeda) + var(--fx-garis));
}
.flexi-diagram.is-visible .flexi-diagram__label {
opacity: 1;
transform: none;
transition: opacity var(--fx-durasi) ease-out, transform var(--fx-durasi) ease-out;
transition-delay: calc(var(--i, 0) * var(--fx-jeda) + var(--fx-awal));
}
@media (prefers-reduced-motion: reduce) {
.flexi-diagram .flexi-diagram__line { stroke-dashoffset: 0; }
.flexi-diagram .flexi-diagram__dot { transform: none; }
.flexi-diagram .flexi-diagram__label { opacity: 1; transform: none; }
.flexi-diagram.is-visible :is(.flexi-diagram__line, .flexi-diagram__dot, .flexi-diagram__label) { transition: none; }
}
/* Di layar sempit garis penunjuk jadi tidak terbaca — diagram tampil
sebagai foto biasa, labelnya turun jadi daftar di bawahnya. */
@media (max-width: 900px) {
.flexi-diagram {
aspect-ratio: auto;
/*
⚠️ Blok ini dulu menyetel irama kaskade tersendiri untuk layar sempit
(garis penunjuk disembunyikan di sini, jadi jatah waktunya berbeda).
Sejak kaskadenya DIMATIKAN seluruhnya atas permintaan klien
2026-09-17, tidak ada lagi yang perlu dibedakan: nilai dari blok
utama (--fx-jeda 0, --fx-garis 0, --fx-awal 0, --fx-durasi 200ms)
sudah benar di semua lebar, dan keenam label memang dimaksudkan
muncul berbarengan.
Kalau kaskadenya kelak dikembalikan, blok ini perlu hidup lagi:
di sini `--fx-awal` HARUS 0 walau desktop memakai 850ms, karena
850ms itu jatah menggambar garis — dan garisnya tidak ada di sini,
jadi yang tersisa cuma layar diam sebelum label pertama.
*/
}
.flexi-diagram__img { position: static; width: 100%; height: auto; }
.flexi-diagram__svg { display: none; }
.flexi-diagram__labels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--sp-6);
margin-top: var(--sp-8);
}
/* width:auto melepas lebar kotak yang dihitung untuk versi desktop;
text-align:left melepas .flexi-diagram__label--ke-kanan — di susunan
bertumpuk semua label sebaiknya rata kiri seperti daftar biasa. */
.flexi-diagram__label {
position: static !important;
width: auto !important;
text-align: left;
}
}
@media (max-width: 1024px) {
.flexi-intro { grid-template-columns: 1fr; gap: var(--sp-10); }
.cert-band__inner { grid-template-columns: 1fr; }
.cert-band__logos { grid-template-columns: repeat(2, 1fr); }
/* 7 logo di 2 kolom menyisakan satu sendirian di kolom kiri baris
terakhir. Dibentangkan supaya jatuh di tengah (sama seperti
.icon-rail__item, dan hanya berlaku di media query ini). */
.cert-band__logos > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Kolom jadi menumpuk -> semua trik overlap versi desktop DILEPAS.
Foto yang menggantung 148px ke bawah (dan margin-bottom 191px di band
untuk menampungnya) di layar sempit malah menabrak judul "Sertifikasi"
& barisan logo, lalu menyisakan ruang kosong besar sebelum garis
pemisah. Tinggi tetap 375px juga tidak relevan lagi di susunan
vertikal. */
.section.cert-band {
min-height: auto;
padding-block: var(--section-y);
margin-bottom: 0;
}
.cert-band__photo { margin-top: 0; margin-bottom: 0; }
}
/* ------------------------------------------------------------
PESAN HASIL FORMULIR (Fase 7)
Desain Figma tidak pernah menggambarkan keadaan "berhasil terkirim" —
komponen ini tambahan yang dibutuhkan supaya pengunjung tahu kiriman
mereka sampai. Sengaja hanya memakai token yang sudah ada, tanpa
memperkenalkan warna baru ke sistem.
------------------------------------------------------------ */
.form-notice {
margin-bottom: var(--sp-6);
padding: var(--sp-4) var(--sp-5);
border-radius: var(--r-sm);
border-left: 4px solid;
background: var(--c-surface);
font-size: var(--fs-body-sm);
line-height: var(--lh-snug);
}
.form-notice--ok { border-left-color: var(--c-whatsapp); }
.form-notice--galat { border-left-color: var(--c-danger); }
/* Di kartu form biru (Blog Detail) latar abu tidak terbaca — dibalik jadi
putih tembus supaya tetap kontras di atas biru. */
.form-card--primary .form-notice {
background: rgba(255, 255, 255, 0.92);
color: var(--c-ink);
}
/* ------------------------------------------------------------
KEADAAN KOSONG (arsip tanpa isi)
Dipakai arsip Blog saat bahasa yang dibuka belum punya artikel.
Sebelumnya cuma satu judul di atas halaman putih — jalan buntu.
------------------------------------------------------------ */
.empty-state {
max-width: 620px;
margin-inline: auto;
padding-block: var(--sp-10);
text-align: center;
}
.empty-state .section-lead { margin-top: var(--sp-4); }
.empty-state__aksi {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
justify-content: center;
margin-top: var(--sp-8);
}
/* ------------------------------------------------------------
TOMBOL "UBAH ISI BAGIAN INI"
------------------------------------------------------------
Hanya tampil untuk pengguna yang boleh menyunting halaman ini —
pengunjung tidak pernah melihatnya. Ditempelkan ke section
terdekat lewat jangkar yang mendahuluinya.
`position: sticky` DISENGAJA tidak dipakai: tombolnya harus
menandai SATU bagian, dan yang menempel di layar justru
kehilangan kaitannya dengan bagian mana yang dimaksud.
------------------------------------------------------------ */
/* Setinggi NOL — tidak boleh menggeser tata letak sedikit pun. */
.anaya-sec {
position: relative;
height: 0;
}
.anaya-jangkar {
position: absolute;
/* Header lengket setinggi ~96px menutupi tujuan lompatan kalau
jangkarnya tepat di tepi atas section. */
top: -110px;
}
.anaya-ubah-bagian {
position: absolute;
top: 12px;
left: var(--gutter);
z-index: 40;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 6px 14px 6px 10px;
border-radius: var(--r-pill);
background: var(--c-primary);
color: var(--c-white);
font-size: 12px;
font-weight: var(--fw-medium);
line-height: 1.4;
text-decoration: none;
box-shadow: var(--shadow-card);
/* Redup sampai disentuh: ini alat bantu penyunting, bukan bagian
dari desain halaman, jadi tidak boleh ikut menarik perhatian
saat sekadar membaca. */
opacity: 0.35;
transition: opacity var(--t-fast);
}
.anaya-ubah-bagian:hover,
.anaya-ubah-bagian:focus-visible {
opacity: 1;
color: var(--c-white);
}
.anaya-ubah-bagian svg { flex: none; }
/* ------------------------------------------------------------
ALAT BANTU HALAMAN PRODUK — pencarian + baris kategori
yang MENEMPEL saat digulir (permintaan klien 2026-09-17).
------------------------------------------------------------ */
/* ⚠️ Berlaku di SEMUA lebar, bukan hanya saat sticky. Pembungkus
`.produk-alat` memutus `.section + .section { padding-top: 0 }` yang
selama ini menolkan jarak atas section sesudahnya (aturan #39), jadi
tanpa baris ini halaman Produk bertambah 80px di setiap lebar. */
.produk-alat + .section { padding-top: 0; }
/*
* ⚠️ Jarak 80px dipecah jadi MARGIN 56 + PADDING 24, dan pembagian itu bukan
* kosmetik — ia satu-satunya cara memperkecil blok yang menempel tanpa
* mengubah tinggi halaman.
*
* Versi pertama merampingkan PADDING saat blok menempel (kelas `.is-stuck`).
* Itu gagal dengan cara yang tidak terduga: elemen `position: sticky` TETAP
* berada di alur dokumen, jadi mengecilkan paddingnya mengecilkan tinggi
* dokumen — terukur 3188px -> 3044px begitu blok menempel — dan posisi gulir
* ikut tersentak (diminta 400, mendarat di 376). Halaman melompat di bawah
* tangan pengguna, dan `verifikasi-wp.py` melaporkannya sebagai Produk -89px
* (dari -39px) karena ia mengukur sesudah menggulir.
*
* MARGIN tidak dihitung sebagai tinggi elemen, jadi ia tidak pernah ikut
* menempel — blok yang menempel tinggal 356px sementara jarak visualnya
* tetap 80px di kedua sisi, sama persis seperti sebelum fitur ini ada.
*/
.produk-alat { margin-block: 56px; }
.produk-alat > .section:first-child { padding-top: var(--sp-6); }
.produk-alat > .section:last-child { padding-bottom: var(--sp-6); }
/* Penanda tak terlihat setinggi NOL tepat di atas blok, disisipkan JS.
Dipakai IntersectionObserver untuk mengetahui kapan blok mulai menempel
— lihat initProdukAlat() di main.js. Tidak boleh punya tinggi, margin,
atau padding: ia berada di tengah alur dokumen. */
.produk-alat__sentinel {
height: 0;
margin: 0;
padding: 0;
pointer-events: none;
}
/*
* ⚠️ DUA RENTANG: >=1200px DAN <=640px. Yang dikecualikan justru TENGAHNYA,
* dan itu diukur bukan ditebak.
*
* Tinggi baris kategori melonjak begitu kartunya membungkus jadi 3 kolom:
* 179px di 1200px, tapi 568px di 1024px dan 492px di 900px. Ditambah header
* 152px, versi sticky di 1024px mengunci 785px dari layar 900px —
* halamannya praktis tidak bisa dibaca lagi. Di rentang itu keduanya tetap
* mengalir normal.
*
* Mobile DAN tablet dulunya ikut dikecualikan karena alasan yang sama
* (kartu besar, baris kategori 419-568px). Angka itu berubah 2026-09-17
* saat kartu kategori di SELURUH rentang <=1024px diganti 5 tile kecil:
* baris kategori tinggal ~102-130px dan sidebar produk jadi dropdown 47px,
* jadi blok yang menempel cuma ~175-250px.
*
* Auto-hide di bawah ini berlaku di semua rentang, jadi ruang baca kembali
* penuh begitu pengunjung menggulir ke bawah.
*/
/*
* ⚠️ TANPA gerbang lebar — dan itu hasil dua kali penyempitan, bukan
* kelalaian.
*
* Mulanya `>=1200px` saja, karena baris kategori melonjak 179 -> 568px
* begitu kartunya membungkus 3 kolom: versi sticky di 1024px mengunci
* 785px dari layar 900px. Lalu `<=640px` ikut masuk saat kartu mobile jadi
* 5 tile kecil (102px).
*
* 2026-09-17 kartu tile itu diperluas ke SELURUH rentang <=1024px, jadi
* tidak ada lagi lebar yang bermasalah: blok yang menempel 235px di HP,
* ~314px di tablet, 355px di desktop. Celah 1025..1199 yang tersisa justru
* persis lebar iPad landscape (1194px) — persis perangkat yang dipakai
* klien saat melaporkannya.
*
* Ruang baca dijaga auto-hide di bawah, bukan oleh gerbang lebar.
*/
.produk-alat {
position: sticky;
/* Menempel TEPAT di bawah navbar melayang. `--header-h` dipakai bersama
scroll-padding-top di base.css, jadi jangkar dan blok ini tidak bisa
lepas sinkron. */
top: var(--header-h);
/* Di atas isi produk & sidebar, DI BAWAH navbar — kalau tidak, ia lewat
di depan dropdown navbar. */
z-index: 20;
/* WAJIB: tanpa latar, isi produk terbaca menembus di belakang kartu
kategori. Putih, sama dengan latar body. */
background: #fff;
}
/*
* Satu-satunya hal yang berubah saat blok MENEMPEL: bayangan tipis,
* supaya ia terbaca terpisah dari konten yang lewat di baliknya.
* ⚠️ `box-shadow`, BUKAN `border-bottom` — border menambah tinggi elemen
* dan itu akan menyentak tinggi dokumen persis seperti padding tadi.
*/
.produk-alat.is-stuck {
box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .18);
}
/*
* AUTO-HIDE — jalan keluar dari tabrakan "alat mudah diakses" vs "ruang
* baca cukup". Terukur sebelum ini: blok yang menempel permanen menyisakan
* 243px ruang baca di laptop 1440x750 dan **193px** di 1280x700 — isi
* produknya praktis tidak terbaca.
*
* Sekarang blok menyingkir saat pengguna menggulir ke BAWAH (sedang
* membaca) dan turun lagi begitu menggulir sedikit ke ATAS (sedang mencari
* navigasi). Ruang baca kembali penuh: 748px / 598px.
*
* ⚠️ `transform`, BUKAN mengubah tinggi/padding: transform tidak
* mempengaruhi alur dokumen sama sekali, jadi tinggi halaman tetap dan
* gulirnya tidak menyentak (aturan #76).
* ⚠️ Aman dari aturan #60 — `.produk-alat` tidak memuat satu pun keturunan
* `position: fixed` (yang ada di tema cuma `.header--overlay` dan drawer
* `.nav`, keduanya di header).
*/
.produk-alat {
transition: transform var(--t-base), box-shadow var(--t-base);
}
.produk-alat.is-stuck.is-sembunyi {
transform: translateY(-100%);
box-shadow: none;
}
/* Hormati preferensi sistem: yang hilang cuma animasinya, bukan
perilakunya — blok tetap menyingkir, hanya tanpa transisi. */
@media (prefers-reduced-motion: reduce) {
.produk-alat { transition: none; }
}
/*
* SIDEBAR DAFTAR PRODUK ikut menempel — dan ini yang paling murah:
* ia berada di KOLOM KIRI, jadi memakan 0 ruang vertikal. Pindah antar
* produk tetap mungkin kapan saja meski blok alat sedang menyingkir.
* `.product-layout` sudah `align-items: start`, jadi sticky-nya bekerja
* tanpa perubahan lain.
*/
.product-nav {
position: sticky;
top: calc(var(--header-h) + var(--sp-4));
/* Tingginya tidak boleh melebihi sisa layar, kalau tidak ujung daftarnya
terpotong dan tidak bisa dijangkau. Scroll internal sudah ada sejak
Fase 3 (`overflow-y: auto`). */
max-height: min(620px, calc(100vh - var(--header-h) - var(--sp-12)));
max-height: min(620px, calc(100dvh - var(--header-h) - var(--sp-12)));
}
/*
* ⚠️ `.reveal` DIMATIKAN di dalam blok yang menempel.
* Elemen ber-`.reveal` mulai dengan `opacity: 0` + `translateY(16px)`;
* pada elemen sticky itu berarti kotak pencarian menggantung 16px dari
* posisi seharusnya sampai observer menyalakannya — dan karena blok ini
* berada di atas layar sejak awal, animasinya tidak pernah terlihat
* sebagai animasi, cuma sebagai pergeseran.
*/
.produk-alat .reveal {
opacity: 1;
transform: none;
}
/*
* Menu sertifikat memakai bawaan peramban — tanpa JavaScript,
* jadi ia sudah bisa keyboard & pembaca layar dan tetap bekerja kalau JS
* mati. `position: relative` menjadikannya jangkar bagi daftarnya.
*/
.unduh-sert { position: relative; }
.unduh-sert > summary {
/* `list-style: none` + ::-webkit-details-marker: membuang segitiga
bawaan, yang kalau dibiarkan muncul DI DALAM tombol biru. */
list-style: none;
cursor: pointer;
}
.unduh-sert > summary::-webkit-details-marker { display: none; }
.unduh-sert > summary::marker { content: ''; }
/* Panah tombol ikut berputar saat menu terbuka — isyarat keadaan yang
tidak bergantung warna. */
.unduh-sert > summary .icon,
.unduh-sert > summary svg {
transition: transform var(--t-base);
}
.unduh-sert[open] > summary .icon,
.unduh-sert[open] > summary svg {
transform: rotate(90deg);
}
.unduh-sert__daftar {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 5;
min-width: 260px;
margin: 0;
padding: var(--sp-3) 0;
list-style: none;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
box-shadow: var(--shadow-card);
}
.unduh-sert__daftar a {
display: block;
padding: var(--sp-3) var(--sp-5);
color: var(--c-ink);
text-decoration: none;
}
.unduh-sert__daftar a:hover,
.unduh-sert__daftar a:focus-visible {
background: var(--c-surface);
color: var(--c-primary);
}
@media (max-width: 560px) {
/* Di layar sempit menu mengambang gampang keluar tepi — biarkan mengalir
di bawah tombolnya. */
.unduh-sert__daftar {
position: static;
min-width: 0;
margin-top: var(--sp-3);
}
}
/* ------------------------------------------------------------
LOKASI KANTOR (halaman Kontak) — peta Google Maps
Menggantikan kartu info kontak, 2026-09-17.
Rujukan tampilan klien: peta selebar container, rasio ~2:1
(1213x591 pada kanvas 1440), sudut membulat.
------------------------------------------------------------ */
/*
* Jarak judul -> peta, diukur dari PNG rujukan klien dengan sampel piksel
* (kanvas 1440): garis pemisah y 1226, TINTA judul 1274..1298, peta
* 1348..1910.
*
* ⚠️ Yang meleset bukan totalnya melainkan PEMBAGIANNYA. Sebelum ini
* garis->peta sudah 118px (desain 122), tapi judulnya duduk 85px dari garis
* dan cuma 10px dari peta — desain menuntut 48px dan 50px. Judul yang
* menempel ke petanya itu yang dilaporkan klien.
*
* 43px, bukan 48: kotak baris judul mulai 5px DI ATAS tintanya
* (line-height 37,5 vs font 30), dan padding mengatur kotak, bukan tinta.
*/
.lokasi { padding-top: 43px; }
/* 40px, bukan 50: tinta judul berakhir 10px sebelum dasar kotak barisnya. */
.lokasi .title-lg { margin-bottom: 40px; }
.lokasi-peta {
/* Dump rujukan 1214x562 (diukur piksel, bukan dikira-kira) — rasio 2,160.
Sempat ditulis 1213/591 dari pembacaan kasar, dan itu membuat petanya
585px alih-alih 556px di container 1200.
Dipatok supaya tinggi peta tidak berubah-ubah mengikuti apa pun —
iframe tidak punya tinggi intrinsik yang berguna. */
aspect-ratio: 1214 / 562;
border-radius: var(--r-md);
/* `overflow: hidden` WAJIB: sudut membulat pada pembungkus tidak memotong
iframe di dalamnya, jadi tanpa ini petanya tetap bersudut siku. */
overflow: hidden;
/* Latar abu saat peta belum termuat (lazy) — kotak putih kosong terbaca
seperti bagian yang rusak. */
background: var(--c-surface);
}
.lokasi-peta iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
@media (max-width: 768px) {
/* Di layar sempit rasio 2:1 membuat petanya terlalu pendek untuk
dikenali — jalan di sekitarnya tidak terbaca. Dibuat lebih tinggi. */
.lokasi-peta { aspect-ratio: 4 / 3; }
}
/* ------------------------------------------------------------
MOBILE: kartu kategori menumpang band "Produk Kami"
------------------------------------------------------------ */
/*
* ⚠️ Blok ini WAJIB berada di AKHIR berkas, bukan di media query mobile
* bersama aturan kartu kategori lainnya.
*
* Aturan aslinya — `.section-lead + .cat-grid` dan `.section.section--produk`
* — punya spesifisitas yang SAMA (0,2,0) dan ditulis BELAKANGAN di berkas
* ini. Media query tidak menambah spesifisitas sedikit pun, jadi override
* yang ditaruh lebih awal kalah oleh urutan muat dan tidak berefek apa pun:
* terukur jaraknya tetap 64px dan band tetap 284px, tanpa satu pun gejala.
*
* Yang diatur di sini (dump mobile 412px): kartu kategori MENJOROK NAIK ke
* dalam band berfoto, bukan mendarat tepat di batas bawahnya.
*/
@media (max-width: 640px) {
/* Dump: paragraf berakhir y 2039, kartu mulai 2055 -> 16px.
Sebelumnya 64px (--sp-16), yang menaruh kartu persis di batas band. */
.section-lead + .cat-grid { margin-top: var(--sp-4); }
/*
* ⚠️ 269px, bukan 228px seperti dump. Paragraf "Produk Kami" di Poppins
* setinggi 134px sementara dump 106px (+28px), jadi kartu mulai 236px dari
* atas section — sudah lebih rendah dari band 228px, dan dengan angka dump
* apa adanya kartunya justru jatuh DI BAWAH band alih-alih menumpang.
* 269 = 236 (posisi kartu sesungguhnya) + 33 (jumlah menjorok di dump).
* Perluasan aturan #28: yang digeser satu angka geometri, bukan hurufnya.
*/
.section.section--produk { --band-h: 269px; }
}
/* ------------------------------------------------------------
HERO HOME — versi MOBILE (dump Home 412px, 2026-09-17)
------------------------------------------------------------ */
/*
* ⚠️ Blok ini WAJIB di AKHIR berkas: aturan yang ditimpanya
* (`.hero-slider__slide`, `.hero-slider__dots`, `.hero__title`,
* `.hero__subtitle`) punya spesifisitas yang sama dan ditulis lebih awal —
* media query tidak menambah spesifisitas, jadi yang menang urutan muat.
* Pelajaran yang sama sudah memakan satu putaran di band "Produk Kami".
*
* Dump hero mobile (hero 412x520):
* judul 342x65 di y 209, 26px/32, w800, rata tengah
* subjudul 328x25 di y 281, 20px/25
* tombol 298x54 di y 329
* dots 61x21 di y 423 -> 76px dari dasar hero
*/
@media (max-width: 640px) {
/*
* Posisi konten hero ditentukan padding SLIDE, bukan padding hero —
* slide-lah yang membungkus judul/subjudul/tombol. 105px membawa judul
* dari y 224 ke y 209 seperti dump.
*/
/*
* ⚠️ `align-content: start` WAJIB ikut. Tanpa itu slide memusatkan
* kontennya secara vertikal, sehingga padding-top bukan lagi posisi judul
* melainkan cuma salah satu suku dalam perhitungan pusat — mengubahnya 8px
* menggeser judul 17px, dan setiap perubahan tinggi konten (mis. subjudul
* yang jatuh ke dua baris di layar sempit) menggeser semuanya lagi.
* Dengan `start`, padding-top = posisi judul, persis seperti dump.
*/
.hero-slider__slide {
align-content: start;
padding-top: 209px;
}
/* Dump: 26px/32 dan 20px/25. Sebelumnya 24/30 dan 18/22,5 — token
`--fs-hero` & `--fs-hero-sub` dipakai bersama halaman lain, jadi
nilainya ditulis langsung di sini alih-alih menggeser tokennya. */
.hero--home .hero__title {
font-size: 26px;
line-height: 32px;
/*
* ⚠️ Dilebarkan melewati container, sama seperti subjudul di bawah.
* Font 26px dari dump SUDAH cukup untuk dua baris — yang kurang cuma
* kotaknya. Di 390px container tema tinggal 325px dan judulnya jatuh ke
* TIGA baris; disapu per-lebar, 26px muat dua baris di >=375px asalkan
* kotaknya mencapai lebar layar dikurangi ~32px.
* `calc(100% + 34px)` memberi 378px di 412, 359 di 390, 347 di 375, dan
* 334 di 360 — semuanya di atas ambang, dan tidak pernah menyentuh tepi
* layar (paling mepet 13px di 360px).
* ⚠️ Relatif container, BUKAN `100vw`: vw termasuk batang gulir
* (aturan #62).
*/
width: calc(100% + 34px);
margin-inline: -17px;
/*
* ⚠️ Dipatok DUA BARIS supaya tombol & dots tidak melompat antar slide.
* Judul tiap slide beda panjang — "Flexitank for Bulk Liquids" muat satu
* baris sementara sisanya dua, dan tanpa ini tombol slide itu naik 32px
* sehingga carousel terlihat tersentak setiap kali berganti. Dengan
* `min-height` judul pendek tetap memakan jatah dua baris.
* Judul TIGA baris (naskah panjang di layar sempit) tetap melar apa
* adanya — ini lantai, bukan langit-langit.
*/
min-height: 64px;
}
.hero--home .hero__subtitle {
font-size: 20px;
line-height: 25px;
/*
* ⚠️ Melebar 14px ke tiap sisi supaya tetap SATU baris seperti dump.
* "untuk industri minyak, gas dan kimia." butuh 372px di Poppins 20px,
* sementara container di 412px cuma 344px — disapu 330..372px, satu
* baris baru tercapai di 372. Dua baris menambah 25px dan mendorong
* tombol serta dots keluar dari posisi dump. Perluasan aturan #28: yang
* digeser lebar kotaknya, bukan ukuran hurufnya.
*
* ⚠️ `calc(100% + 28px)`, BUKAN `100vw` — vw termasuk batang gulir dan
* sudah memakan korban di aturan #62. Relatif container, ia ikut
* menyusut di layar lebih sempit: di 360px jadi 328px (16px dari tepi
* layar, tidak meluber) dan teksnya memang kembali dua baris di sana.
*/
width: calc(100% + 34px);
margin-inline: -17px;
/*
* ⚠️ Font subjudul MENYESUAIKAN lebar layar, tidak bisa dipatok 20px.
* Berbeda dari judul, melebarkan kotaknya saja tidak cukup: disapu
* per-lebar, satu baris menuntut <=20px di 412px tapi <=19px di 390 dan
* <=18px di 375 — artboard dump memang 412px, dan di bawahnya tidak ada
* lebar kotak yang menyelamatkannya tanpa menyentuh tepi layar.
* 4,86vw menghasilkan 20,0px tepat di 412 (nilai dump) dan turun mulus
* ke 18px di 375. Ini penyimpangan yang diizinkan aturan #28 — huruf
* baru dikecilkan SESUDAH lebar kotaknya dimaksimalkan, dan hanya di
* lebar yang memang lebih sempit dari artboard.
*/
font-size: clamp(18px, 4.86vw, 20px);
}
/* Dump: teks berakhir y 306 (281 + 25), tombol mulai 329 -> 23px.
Selisih KOORDINAT ATAS, bukan tinggi kotak (aturan #67). */
.hero--home .hero__actions { margin-top: 23px; }
/* Dump: dots di y 423 dari hero 520px -> 76px dari dasar (sebelumnya 32px,
yang menaruhnya 44px terlalu rendah). */
.hero-slider__dots { bottom: 76px; }
}
/*
* ⚠️ Layar lebih sempit dari artboard dump (412px).
*
* Padding hero TIDAK lagi perlu dikecilkan di sini. Sebelum judul & subjudul
* dilebarkan, di 360..411px judul jatuh ke tiga baris dan subjudul ke dua,
* sehingga tombol berakhir y 440 dan menimpa dots di 423 — waktu itu
* ditambal dengan padding-top 150px. Sesudah kotak teksnya dilebarkan ke
* lebar layar, judul kembali dua baris dan subjudul satu baris mulai 375px,
* jadi kontennya sependek di 412px dan padding 209px dari dump berlaku apa
* adanya.
*
* Yang tersisa lebar di BAWAH 375px, di mana judul memang masih tiga baris
* (butuh 25px, sementara dump 26px) dan di 320px subjudul ikut jadi dua.
* Terukur di 320px tombol berakhir y 440 sementara dots duduk di 423 —
* bertabrakan. Paddingnya dikecilkan hanya di sana; dots TIDAK digeser karena
* posisinya datang dari dump dan sama di semua lebar.
*
* ⚠️ Ambangnya 374px, yaitu satu piksel di bawah lebar terkecil yang sudah
* sempurna (375px). Di 375px ke atas padding 209px dari dump berlaku apa
* adanya dan tidak boleh ikut dikecilkan.
*/
@media (max-width: 374px) {
.hero-slider__slide { padding-top: 184px; }
}
/* ============================================================
HALAMAN PRODUK — MOBILE (dump Figma 412x4015 + Product.png @2x)
------------------------------------------------------------
Ditulis di AKHIR berkas dengan sengaja: media query tidak menambah
spesifisitas sama sekali, jadi aturan di sini hanya menang kalau ia
datang SESUDAH aturan yang ditimpanya. Sudah dua kali blok mobile
ditaruh lebih awal dan tidak berefek apa pun.
============================================================ */
@media (max-width: 640px) {
/* --- Header: pita 109px (lihat --header-h di tokens.css) --- */
.header__inner { padding-block: 25px 40px; }
/*
* --- Hero polos: 237px, bukan 329px ---
* Dump: Rectangle 102 = 412x237 mulai y=109 (tepat di bawah header).
* `.hero--home` TIDAK ikut — ia punya angkanya sendiri (520px) dan
* sudah disamakan ke dump Home.
*/
.hero:not(.hero--home) {
min-height: 237px;
padding-block: var(--sp-12);
}
/* Dump: judul 342x65 = dua baris 25/31. Token --fs-hero turun ke 24px di
<=768px; dump mobile menuntut 25px. */
.hero:not(.hero--home) .hero__title { font-size: 25px; }
/*
* --- Kolom pencarian: tinggi 47px ---
* Ditulis sebagai `height`, bukan dihitung dari padding + line-height:
* tinggi input bergantung pada font yang sedang terpakai, dan Poppins
* memberi angka berbeda dari Google Sans Flex. Satu nilai pasti lebih
* murah daripada mengejar padding yang benar di dua font.
*/
.searchbar__input {
height: 47px;
padding-block: 0;
padding-left: var(--sp-5);
font-size: 15px;
}
/* Dump: search berakhir y=419, kartu kategori mulai y=446. */
.searchbar { margin-bottom: 27px; }
}
/* ------------------------------------------------------------
Baris kategori: 5 tile sebaris, label DI BAWAH tile.
Dump mobile: tile di x 35/106/176/247/317 (lebar 60), label y=516
(11/15), tile y=446 — jarak tile->label 10px, isi baris 342px.
⚠️ Berlaku sampai 1024px, BUKAN cuma 640px. Di rentang 641..1024 kartu
versi desktop membungkus jadi 3+2 kolom dan tingginya melonjak
419-568px — satu layar tablet nyaris habis sebelum produknya terlihat.
Batasnya 1024px karena di situ pula `.product-layout` berhenti jadi satu
kolom: di atasnya sidebar & kartu 5-sebaris versi desktop memang sudah
pas.
------------------------------------------------------------ */
@media (max-width: 1024px) {
.cat-row {
flex-wrap: nowrap;
align-items: start; /* tile rata atas walau label 1 vs 2 baris */
/* 5x60 + 4x10,5 = 342 (persis lebar isi di 412px); melar mengikuti
container di tablet, dibatasi 18px supaya tidak menganga. */
gap: clamp(10.5px, 3%, 18px);
justify-content: center;
max-width: none;
}
/* Menimpa `flex: 0 1 calc(...)` dari blok <=1024 & <=560 — keduanya
membungkus baris jadi beberapa baris, yang justru dibuang di sini.
⚠️ `max-width` menahan tile supaya tidak ikut melar jadi ~125px di
tablet: proporsi mobile (tile 17,5% lebar isi) menghasilkan kotak yang
kelewat besar begitu containernya 696px, dan ikonnya ikut membengkak. */
.cat-row > * { flex: 1 1 0; max-width: 110px; min-width: 0; }
/* ⚠️ `min-width: 0` + pemenggalan kata WAJIB berpasangan (2026-10-09).
Item flex tidak menyusut di bawah lebar KATA terpanjang labelnya, dan
tile-nya `aspect-ratio: 1` selebar item — jadi "Pharmaceutical" di situs
Inggris membuat tile-nya 88px sementara keempat lainnya 48px (390px).
min-width:0 mengembalikan kelimanya ke lebar yang sama; labelnya lalu
dipenggal ("Pharma-ceutical", butuh lang="en" di , dipasang
Polylang).
⚠️ SENGAJA tanpa overflow-wrap:anywhere: di peramban tanpa kamus
pemenggalan ia memotong di huruf mana saja ("Pharmac/eutical").
Tanpa itu labelnya tetap SATU baris dan — karena ia item flex kolom
ber-align-items:center — terpusat di bawah tile, menjorok sama rata
ke celah kiri-kanan (~9px di 390px). Tile-nya sendiri tetap sama besar. */
.cat-row .card-cat--stacked {
hyphens: auto;
}
/* Kartu berhenti menjadi kotak: ia cuma pembungkus tile + label.
:hover ikut ditulis karena `.card-cat:hover` berspesifisitas sama
(0,2,0) — yang menentukan urutan, dan blok ini memang paling akhir. */
.cat-row .card-cat--stacked,
.cat-row .card-cat--stacked:hover {
aspect-ratio: auto;
min-height: 0;
padding: 0;
gap: 10px;
background: none;
box-shadow: none;
color: var(--c-ink);
/* 11px dari dump di 412px, naik pelan ke 13px di tablet — 11px pada
layar 834px terbaca kelewat kecil dibanding sekitarnya. */
font-size: clamp(11px, 1.6vw, 13px);
line-height: 1.36;
}
.cat-row .card-cat__kotak {
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 1;
background: var(--c-white);
border-radius: 10px;
/* Dump: 0px 4px 15px rgba(0,0,0,0.2) — bayangan tile sendiri, BUKAN
--shadow-card maupun bayangan kartu desktop (2 5 20 / .25). */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* Ukuran ikon dinyatakan RELATIF terhadap tile (34/60 = 57%), bukan px:
satu nilai melayani 60px di HP dan 110px di tablet tanpa angka kedua
yang harus dijaga sinkron. */
.cat-row .card-cat .icon {
width: 57%;
height: auto;
aspect-ratio: 1;
}
/* Kategori aktif: yang membiru TILE-nya, labelnya tetap hitam seperti
yang lain — di rujukan kelima label berwarna sama. */
.cat-row .card-cat.is-active .card-cat__kotak { background: var(--c-primary); }
.cat-row .card-cat.is-active .icon { color: var(--c-white); }
}
/* ------------------------------------------------------------
Dropdown produk — menggantikan sidebar daftar produk di <=1024px.
Dump Rectangle 109: pill 342x47, #D9D9D9, radius pill, teks 18px di
x=55 (= padding kiri 20px), chevron gelap di kanan.
⚠️ ``, BUKAN `