/* ptsepp.co.id — stylesheet tunggal.

   Sumber semua nilai: design-system.md.
   Blok di bawah disalin apa adanya dari design-system.md bagian 10 —
   kalau ada perubahan, ubah di sana dulu, baru salin ke sini.
   Jangan pernah menulis nilai hex mentah di luar blok :root.

   Dua baris terakhir mematikan transition dan animation secara global.
   Itu disengaja, sesuai aturan keras nomor 7 di CLAUDE.md. Jangan menulis
   @keyframes, transition, atau transform pada state hover di file ini.

   Berikutnya (progress.md > Fase 1 > Fondasi):
   - reset + tipografi dasar
   - container grid + utility
*/

:root{
  --c-brand:#005EB8; --c-brand-hover:#004A94; --c-brand-dark:#003A70;
  --c-brand-deep:#002347; --c-brand-tint:#E8F1FA; --c-brand-line:#B8D4EC;
  --c-ink:#0F172A; --c-body:#334155; --c-muted:#64748B;
  --c-line:#D9E1EC; --c-surface:#F5F8FB; --c-white:#FFFFFF;
  --c-success:#16A34A; --c-error:#DC2626;

  --f-head:"Montserrat",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;

  --s-section:96px; --s-block:48px; --s-gap:32px; --s-gutter:24px;
  --w-container:1200px; --w-narrow:760px;

  /* Pasangan RGB untuk dua warna yang perlu dipakai semi transparan pada
     scrim dan garis rambut hero. CSS tidak bisa menurunkan alpha dari sebuah
     hex yang sudah tersimpan di custom property, jadi tripletnya disimpan
     terpisah. Nilainya wajib mengikuti --c-brand-dark (#003A70) dan
     --c-white (#FFFFFF); kalau salah satu diubah, ubah juga di sini. */
  --c-brand-dark-rgb:0 58 112;
  --c-brand-deep-rgb:0 35 71;
  --c-line-rgb:217 225 236;
  --c-white-rgb:255 255 255;

  /* Tinggi header sticky, dipakai hero untuk menghitung sisa viewport.
     Nilainya terikat ke .site-header: lambang 56px + padding-block 12px dua
     sisi + border-bottom 1px. Kalau salah satu angka itu diubah, perbarui
     token ini, kalau tidak hero akan meleset dari batas lipatan layar. */
  --h-header:81px;

  --r-sm:2px; --r-md:4px; --r-lg:8px;
  --sh-sm:0 1px 2px rgba(15,23,42,.05);
}
@media (max-width:1024px){:root{--s-section:72px;--s-block:40px;--s-gap:24px}}
@media (max-width:767px){:root{--s-section:56px;--s-block:32px;--s-gap:20px;--s-gutter:20px;
  /* Lambang turun ke 48px di bawah 768px, jadi 48 + 24 + 1. */
  --h-header:73px}}

*,*::before,*::after{transition:none!important;animation:none!important}
html{scroll-behavior:auto}


/* ============================================================
   TOKEN TIPOGRAFI
   Diturunkan dari tabel skala di design-system.md bagian 2.
   Tidak ikut blok bagian 10 karena di sana memang belum ditulis.

   Tiap token memakai shorthand font: weight size/line-height family.
   Letter-spacing terpisah karena tidak bisa masuk shorthand.
   Ukuran mobile dipindah lewat override di bawah, bukan clamp(),
   supaya cocok dengan kolom Desktop / Mobile di Elementor.
   ============================================================ */

:root{
  --t-display:700 52px/1.1 var(--f-head);
  --t-h1:700 42px/1.15 var(--f-head);
  --t-h2:700 32px/1.22 var(--f-head);
  --t-h3:600 23px/1.3 var(--f-head);
  --t-h4:600 19px/1.4 var(--f-head);
  --t-lead:400 19px/1.7 var(--f-body);
  --t-body:400 16px/1.7 var(--f-body);
  --t-small:400 14px/1.6 var(--f-body);
  --t-eyebrow:600 13px/1.4 var(--f-body);
  --t-mono:500 15px/1.5 var(--f-mono);

  --ls-display:-.02em;
  --ls-h1:-.015em;
  --ls-h2:-.01em;
  --ls-eyebrow:.09em;

  --ring:rgba(0,94,184,.35);
  --ring-field:rgba(0,94,184,.15);
  --measure:65ch;
}

@media (max-width:767px){
  :root{
    --t-display:700 32px/1.1 var(--f-head);
    --t-h1:700 29px/1.15 var(--f-head);
    --t-h2:700 25px/1.22 var(--f-head);
    --t-h3:600 20px/1.3 var(--f-head);
    --t-h4:600 18px/1.4 var(--f-head);
    --t-lead:400 17px/1.7 var(--f-body);
    --t-small:400 14px/1.6 var(--f-body);
    --t-eyebrow:600 12px/1.4 var(--f-body);
    --t-mono:500 14px/1.5 var(--f-mono);
  }
}


/* ============================================================
   RESET
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font:var(--t-body);
  color:var(--c-body);
  background:var(--c-white);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}

ul[class],ol[class]{margin:0;padding:0;list-style:none}

img,svg,video,canvas{display:block;max-width:100%;height:auto}

input,button,textarea,select{font:inherit;color:inherit}

button{cursor:pointer;background:none;border:0}

table{border-collapse:collapse;width:100%}

:focus-visible{outline:3px solid var(--ring);outline-offset:2px}


/* ============================================================
   TIPOGRAFI DASAR
   ============================================================ */

h1,h2,h3,h4{color:var(--c-ink)}

h1{font:var(--t-h1);letter-spacing:var(--ls-h1)}
h2{font:var(--t-h2);letter-spacing:var(--ls-h2)}
h3{font:var(--t-h3)}
h4{font:var(--t-h4)}

a{color:var(--c-brand);text-decoration:none}
a:hover{color:var(--c-brand-hover);text-decoration:underline}

/* Tautan di dalam section berlatar biru gelap. Warna --c-brand di atas
   --c-brand-dark hanya mencapai kontras 1,7:1, praktis tidak terbaca.
   Garis bawah dipasang tetap, bukan hanya saat hover, karena tautan putih di
   antara teks putih tidak punya penanda lain. design-system.md bagian 9
   melarang menyampaikan informasi hanya lewat warna.
   Tombol dikecualikan agar .btn-ondark tetap memakai warnanya sendiri. */
.bg-dark a:not(.btn),.page-hero a:not(.btn){
  color:var(--c-white);
  text-decoration:underline;
}
.bg-dark a:not(.btn):hover,.page-hero a:not(.btn):hover{color:var(--c-brand-tint)}

strong,b{font-weight:600}

code,kbd,samp{font:var(--t-mono)}


/* Kelas bantu tipografi */

.display{font:var(--t-display);letter-spacing:var(--ls-display);color:var(--c-ink)}

.lead{font:var(--t-lead)}

.small{font:var(--t-small);color:var(--c-muted)}

.eyebrow{
  font:var(--t-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-brand);
}

/* Kode teknis: nama produk, kode, nomor CAS. design-system.md bagian 0 */
.mono{font:var(--t-mono)}

/* Panjang baris teks isi maksimal 72 karakter. design-system.md bagian 2 */
.measure{max-width:var(--measure)}


/* ============================================================
   LAYOUT
   Container dan spacing dari design-system.md bagian 4.
   Pola kolom grid dari bagian 8, kecuali logo mitra yang
   6 / 3 / 2 kolom sesuai bagian 6.
   ============================================================ */

.container{
  width:100%;
  max-width:var(--w-container);
  margin-inline:auto;
  padding-inline:var(--s-gutter);
}

/* Container sempit untuk teks panjang */
.container-narrow{max-width:var(--w-narrow)}

.section{padding-block:var(--s-section)}

/* Jarak antar blok di dalam satu section.
   Sengaja tidak memakai .block+.block, karena selector itu hanya cocok kalau
   elemen sebelumnya juga berkelas .block. Blok yang mengikuti grid atau
   paragraf biasa jadi tidak mendapat jarak sama sekali. */
.block{margin-top:var(--s-block)}
.block:first-child{margin-top:0}

/* Jarak antar paragraf berurutan. Reset menghapus margin bawaan p,
   jadi jarak prosa harus dikembalikan di sini. */
p+p{margin-top:16px}
li>p+p{margin-top:12px}

/* Judul ke paragraf di bawahnya. Berlaku di mana pun, bukan hanya di kartu. */
h2+p,h3+p,h4+p{margin-top:12px}

.section-head{margin-bottom:var(--s-block)}


/* Latar section. Dipakai selang-seling agar biru tidak memenuhi halaman,
   lihat rasio 60 / 30 / 10 di design-system.md bagian 1. */

.bg-surface{background:var(--c-surface)}
.bg-tint{background:var(--c-brand-tint)}
.bg-dark{background:var(--c-brand-dark)}
.bg-deep{background:var(--c-brand-deep)}

/* Teks di atas biru selalu putih. design-system.md bagian 1 */
.bg-dark,.bg-deep,.page-hero,
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4,
.bg-deep h1,.bg-deep h2,.bg-deep h3,.bg-deep h4,
.page-hero h1{color:var(--c-white)}

.bg-dark .eyebrow,.bg-deep .eyebrow,.page-hero .eyebrow{color:var(--c-white)}


/* ============================================================
   GRID
   ============================================================ */

.grid{display:grid;gap:var(--s-gap)}

.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-6{grid-template-columns:repeat(6,1fr)}

@media (max-width:1024px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-6{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:767px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid-6{grid-template-columns:repeat(2,1fr)}
}


/* ============================================================
   UTILITY
   ============================================================ */

/* Garis rambu, penanda judul section.
   Disalin apa adanya dari design-system.md bagian 5. */
.rule::before{
  content:"";display:block;width:40px;height:3px;
  background:var(--c-brand);margin-bottom:16px;
}

.bg-dark .rule::before,.bg-deep .rule::before{background:var(--c-white)}

/* Rata tengah hanya untuk judul section pendek. design-system.md bagian 0 */
.center{text-align:center}
.center.rule::before{margin-inline:auto}

/* Tabel spesifikasi di mobile dibungkus ini, jangan diubah jadi kartu.
   design-system.md bagian 6 */
.table-scroll{overflow-x:auto}

/* Teks khusus pembaca layar */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ============================================================
   TOMBOL
   design-system.md bagian 6. Perubahan hover hanya warna,
   tanpa translateY, tanpa scale, tanpa perubahan bayangan.
   ============================================================ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:600 16px/1 var(--f-body);
  min-height:48px;
  padding:14px 28px;
  border:0;
  border-radius:var(--r-md);
  text-decoration:none;
  text-align:center;
}
.btn:hover{text-decoration:none}

.btn-primary{background:var(--c-brand);color:var(--c-white)}
.btn-primary:hover{background:var(--c-brand-hover);color:var(--c-white)}

.btn-secondary{
  background:transparent;
  border:1.5px solid var(--c-brand);
  color:var(--c-brand);
}
.btn-secondary:hover{background:var(--c-brand-tint);color:var(--c-brand)}

.btn-ondark{background:var(--c-white);color:var(--c-brand-dark)}
.btn-ondark:hover{background:var(--c-brand-tint);color:var(--c-brand-dark)}
.btn-ondark:focus-visible{outline-color:var(--c-white)}

/* Tombol utama di atas latar foto gelap.
   Isian --c-brand sendirian tidak cukup: diukur di atas scrim CTA, biru brand
   hanya mencapai 1,79:1 terhadap latarnya, jauh di bawah 3:1 yang disyaratkan
   untuk batas komponen. Penyebabnya biru brand memang gelap, sehingga di latar
   gelap mana pun ia melebur. Garis putih 1,5px yang memberi batas itu: putih
   terhadap isian biru 6,38:1 dan terhadap latar 11:1. Jadi tombol tetap biru
   brand, bukan putih, tanpa menabrak latar. */
.btn-onphoto{
  background:var(--c-brand);
  color:var(--c-white);
  border:1.5px solid var(--c-white);
}
.btn-onphoto:hover{background:var(--c-brand-hover);color:var(--c-white)}
.btn-onphoto:focus-visible{outline-color:var(--c-white)}


/* ============================================================
   HEADER
   elementor-map.md bagian Header (Theme Builder).
   ============================================================ */

.skip-link{
  position:absolute;left:var(--s-gutter);z-index:20;
  background:var(--c-brand);color:var(--c-white);
  padding:12px 16px;
  top:-100px;
}
.skip-link:focus{top:0;color:var(--c-white)}

.site-header{
  position:sticky;top:0;z-index:10;
  background:var(--c-white);
  border-bottom:1px solid var(--c-line);
}

/* Ditambahkan oleh main.js saat halaman digulir. Perubahannya seketika
   karena transition sudah dimatikan global. */
.site-header.is-stuck{box-shadow:var(--sh-sm)}

.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-gap);
  /* 12px, bukan 16px, supaya tinggi header tetap 81px setelah lambang
     dibesarkan jadi 56px. Tinggi header ikut menentukan sisa ruang hero di
     viewport pendek, lihat media query tinggi di bagian hero. */
  padding-block:12px;
}

/* Lambang plus nama perusahaan sebagai satu kesatuan. Nama dipaksa pecah dua
   baris lewat max-width supaya lebar lockup tetap sekitar 210px di semua
   breakpoint, termasuk saat tombol menu muncul di mobile. */
.site-header__logo{
  display:flex;align-items:center;gap:14px;
  line-height:0;text-decoration:none;
  /* Jangan pernah dipepet oleh menu. Tanpa ini nama ikut menyempit dan pecah
     tiga baris, yang membuat tinggi header ikut bertambah. */
  flex:none;
}

/* Di 768px sampai 1024px menu masih tampil penuh dan hanya menyisakan sekitar
   155px untuk logo, tidak cukup untuk lambang plus nama. Di rentang itu nama
   disembunyikan, lambangnya saja yang tampil. Di bawah 768px nama muncul lagi
   karena menu sudah berubah jadi satu tombol. */
@media (min-width:768px) and (max-width:1024px){
  .site-header__name{display:none}
}
/* a:hover global memasang garis bawah dan menang spesifisitas atas kelas ini,
   jadi harus dimatikan di state hover-nya sendiri. */
.site-header__logo:hover{text-decoration:none}
.site-header__logo img{height:56px;width:auto;flex:none}

.site-header__name{
  font:600 15px/1.3 var(--f-head);
  letter-spacing:-.005em;
  color:var(--c-brand-dark);
  max-width:15ch;
}

/* Di mobile lambang turun ke 48px supaya tinggi header kembali 73px seperti
   sebelum logo dibesarkan. Tinggi header ikut memakan jatah hero, dan di
   layar pendek seperti iPhone SE tombol hero hanya menyisakan beberapa piksel
   sebelum garis lipatan. */
@media (max-width:767px){
  .site-header__logo img{height:48px}
  .site-header__name{font-size:14px}
}

.site-nav{display:flex;align-items:center;gap:var(--s-gap)}

.site-nav__list{
  display:flex;align-items:center;gap:var(--s-gap);
  margin:0;padding:0;list-style:none;
}

.site-nav__list a{
  font:500 16px/1.4 var(--f-body);
  color:var(--c-ink);
  text-decoration:none;
}
.site-nav__list a:hover{color:var(--c-brand);text-decoration:none}

/* Halaman yang sedang dibuka. Ditandai garis, bukan warna saja,
   sesuai design-system.md bagian 9. */
.site-nav__list a[aria-current="page"]{
  color:var(--c-brand);
  border-bottom:2px solid var(--c-brand);
  padding-bottom:4px;
}

.nav-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:44px;height:44px;
  color:var(--c-brand);
  font-size:20px;
  border-radius:var(--r-sm);
}

@media (max-width:767px){
  .nav-toggle{display:inline-flex}

  .site-nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;
    gap:var(--s-gutter);
    background:var(--c-white);
    border-bottom:1px solid var(--c-line);
    box-shadow:var(--sh-sm);
    padding:var(--s-gutter);
  }
  .site-nav.is-open{display:flex}

  .site-nav__list{flex-direction:column;align-items:stretch;gap:0}

  .site-nav__list a{
    display:block;
    padding-block:12px;
    border-bottom:1px solid var(--c-line);
  }
  .site-nav__list a[aria-current="page"]{border-bottom-color:var(--c-brand)}
}


/* ============================================================
   FOOTER
   elementor-map.md bagian Footer (Theme Builder).
   Dilarang memuat tombol WhatsApp, widget chat, embed peta,
   dan form newsletter. content.md bagian Footer.
   ============================================================ */

.site-footer{padding-block:var(--s-section)}

/* Scrim footer. Paling pekat di situs ini karena di sinilah alamat dan nomor
   telepon berada. Sedikit lebih terbuka di bawah supaya baris hak cipta tidak
   duduk di atas bidang mati. */
.site-footer.section-photo::after{
  background:linear-gradient(180deg,
    rgb(var(--c-brand-deep-rgb)/.90) 0%,
    rgb(var(--c-brand-deep-rgb)/.84) 55%,
    rgb(var(--c-brand-deep-rgb)/.88) 100%);
}

/* Judul kolom footer. Sebelumnya sr-only, hanya terbaca pembaca layar,
   sehingga secara visual footer tampil sebagai empat blok teks tanpa kepala.
   Teksnya tidak diarang baru: Menu, Lokasi, dan Kontak sudah ada di markup. */
.footer-label{
  font:var(--t-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:rgb(var(--c-white-rgb)/.72);
  margin-bottom:18px;
}

/* Garis kepala dipasang di atas kolom, bukan di bawah judulnya.
   Dipasang di bawah judul, garis kolom pertama ikut turun satu baris karena
   nama perusahaan pecah jadi dua baris, sehingga keempat garis tidak sejajar.
   Di atas kolom, keempatnya rata berapa pun panjang judulnya. */
.footer-grid > *{
  border-top:1px solid rgb(var(--c-white-rgb)/.22);
  padding-top:20px;
}

/* Kolom footer tidak sama lebar.
   Sebelumnya memakai .grid-4 yang membagi rata empat kolom, padahal isinya
   jauh berbeda: menu hanya lima kata pendek sementara kolom lokasi memuat dua
   alamat panjang. Hasilnya menu menyisakan ruang kosong lebar sedangkan alamat
   pecah sampai lima baris. Lebar kini mengikuti panjang isi. */
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.62fr) minmax(0,1.35fr) minmax(0,.98fr);
  gap:var(--s-gap);
}
@media (max-width:1024px){
  .footer-grid{grid-template-columns:repeat(2,1fr);row-gap:var(--s-block)}
}
@media (max-width:767px){
  .footer-grid{grid-template-columns:1fr}
}

.site-footer a{color:var(--c-white);text-decoration:none}
.site-footer a:hover{color:var(--c-brand-tint);text-decoration:underline}

.footer-brand__name{
  font:700 19px/1.4 var(--f-head);
  color:var(--c-white);
  margin-bottom:18px;
}

.footer-brand__tagline{max-width:var(--measure)}

.footer-menu{margin:0;padding:0;list-style:none}
.footer-menu li+li{margin-top:12px}

/* Daftar info kontak. Ikon dan teks sejajar di baris yang sama. */
.footer-contact{margin:0;padding:0;list-style:none}
.footer-contact li{display:flex;gap:12px;align-items:flex-start}
.footer-contact li+li{margin-top:12px}

/* Ikon di footer memakai putih, bukan --c-brand. Di atas --c-brand-deep
   biru brand nyaris tidak terbaca. Lihat catatan benturan aturan di
   progress.md log keputusan. */
.footer-contact i{
  color:var(--c-white);
  font-size:20px;
  line-height:1.7;
  flex:none;
  width:20px;
  text-align:center;
}

.site-footer__bottom{
  margin-top:var(--s-block);
  padding-top:var(--s-block);
  /* Dulu --c-brand-dark, yang hampir sewarna dengan latar footer dan makin
     tidak terbaca setelah latar foto dipasang. Putih beralpha rendah tetap
     terlihat di atas tekstur apa pun. */
  border-top:1px solid rgb(var(--c-white-rgb)/.22);
}

/* .small biasanya --c-muted. Di atas --c-brand-deep warna itu tidak
   memenuhi kontras 4.5:1, jadi dikembalikan ke putih. */
.site-footer .small{color:var(--c-white)}


/* ============================================================
   SECTION HEAD
   Eyebrow, garis rambu, judul. design-system.md bagian 0.
   ============================================================ */

.section-head{margin-bottom:var(--s-block);max-width:var(--measure)}
.section-head .eyebrow{margin-bottom:8px}
.section-head p{margin-top:16px}

/* Judul section berdiri sendiri rata tengah, termasuk garis rambu dan
   subjudulnya. Keputusan klien 2026-09-16. Judul di dalam blok dua kolom
   (.about__text) tetap rata kiri karena menyatu dengan paragraf di bawahnya. */
.section-head{text-align:center;margin-inline:auto}
.section-head.rule::before{margin-inline:auto}
.about__text .section-head{text-align:left;margin-inline:0}
.about__text .section-head.rule::before{margin-inline:0}


/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  isolation:isolate;
  /* Gradasi tetap dipasang sebagai cadangan kalau gambar gagal dimuat. */
  background:linear-gradient(135deg,var(--c-brand-dark),var(--c-brand));
  color:var(--c-white);
  padding-block:var(--s-section);

  /* Hero mengisi sisa layar di bawah header, sehingga trust bar di bawahnya
     berada tepat di luar lipatan. Header sticky tidak mengambil ruang aliran,
     jadi tingginya dikurangi manual lewat --h-header.
     Baris vh dulu sebagai cadangan untuk peramban lama, svh menimpanya.
     Dipakai svh, bukan dvh: dvh ikut berubah saat bilah alamat ponsel muncul
     dan menyembunyikan diri, dan hero akan berubah tinggi saat digulir.
     Itu gerakan, yang dilarang brief.md poin 7. svh memakai viewport versi
     terkecil sehingga tingginya tetap. */
  min-height:calc(100vh - var(--h-header));
  min-height:calc(100svh - var(--h-header));

  /* Isi dipusatkan vertikal, bukan diregangkan. design-system.md bagian 0
     melarang "hero raksasa isinya 3 kata + banyak ruang kosong"; memusatkan
     blok yang sudah padat membuat sisa ruang terbagi rata di atas dan bawah,
     bukan menganga di satu sisi. */
  display:flex;
  flex-direction:column;
}

/* Blok teks mengambang di tengah sisa ruang, strip spesifikasi tetap menempel
   di bawah. Dipakai margin auto, bukan justify-content:center, karena kalau
   keduanya dipasang margin auto yang menang dan isi justru terdorong ke atas. */
.hero__inner{width:100%;margin-block:auto}

.hero__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:-2;
}

/* Vignette tepi kanan, rumah bagi label vertikal.
   Tanpa ini label duduk di bagian paling terang dari scrim dan kontrasnya
   hanya 3,20:1, di bawah syarat 4,5:1 pada design-system.md bagian 1.
   Dibatasi selebar pita label saja supaya foto di tengah tetap terbuka.
   Ikut dilepas di bawah 1025px, sama seperti labelnya. */
.hero::before{
  content:"";
  position:absolute;inset:0 0 0 auto;
  width:clamp(120px,14vw,220px);
  background:linear-gradient(90deg,
    rgb(var(--c-brand-dark-rgb)/0) 0%,
    rgb(var(--c-brand-dark-rgb)/.78) 100%);
  z-index:-1;
}
@media (max-width:1024px){
  .hero::before{display:none}
}

/* Scrim terarah, menggantikan overlay rata .65.
   Overlay rata menggelapkan foto secara seragam, termasuk bagian kanan yang
   tidak memuat teks, sehingga gudang di latar ikut pudar dan hero terbaca
   datar. Scrim ini pekat di sisi kiri tempat teks berada lalu menipis ke
   kanan, jadi foto fasilitas tetap terbaca sebagai foto.
   Kontras teks justru naik, bukan turun: sisi kiri kini .92 sampai .88,
   sebelumnya rata .65. Titik .60 diletakkan di 72%, di luar batas kanan
   kolom teks yang dibatasi 16ch oleh .hero h1.
   Bukan gradasi dekoratif yang dilarang design-system.md bagian 0: satu warna
   yang sama dengan alpha menurun, fungsinya keterbacaan, bukan hiasan. */
.hero::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgb(var(--c-brand-dark-rgb)/.92) 0%,
    rgb(var(--c-brand-dark-rgb)/.88) 42%,
    rgb(var(--c-brand-dark-rgb)/.60) 72%,
    rgb(var(--c-brand-dark-rgb)/.42) 100%);
  z-index:-1;
}

/* Di bawah 1025px kolom teks melebar sampai hampir penuh, jadi scrim
   diratakan. Nilai .78 ke .70 dipilih lewat pengukuran: pada 390px lebar,
   .78/.70 memberi 5,10:1 sedangkan .72/.64 sudah jatuh ke 4,35:1, di bawah
   syarat. Sengaja tidak dipasang lebih pekat walau lolos, sebab scrim yang
   terlalu tebal membuat foto gudang hilang dan hero kembali terbaca polos. */
@media (max-width:1024px){
  .hero::after{
    background:linear-gradient(90deg,
      rgb(var(--c-brand-dark-rgb)/.78) 0%,
      rgb(var(--c-brand-dark-rgb)/.70) 100%);
  }
}
/* Hero memakai skala display, bukan h1 biasa. Hero adalah satu satunya blok
   di situs yang berdiri sendiri satu layar penuh, jadi judulnya perlu bobot
   lebih daripada judul section yang selalu punya tetangga di atas dan bawah.
   Tetap satu h1 per halaman, yang berubah hanya ukurannya. */
.hero h1{
  color:var(--c-white);
  max-width:16ch;
  font:var(--t-display);
  letter-spacing:var(--ls-display);
}
.hero .eyebrow{color:var(--c-white);margin-bottom:16px}

/* Garis rambu, penanda khas nomor 1 di design-system.md bagian 0. Sebelumnya
   hanya muncul di judul section, sehingga hero justru satu satunya blok tanpa
   penanda milik situs ini. Putih, bukan --c-brand, mengikuti preseden
   .bg-dark .rule::before: biru brand di atas scrim pekat hanya mencapai
   kontras 1,7:1. */
.hero .rule::before{background:var(--c-white)}

.hero__lead{margin-top:24px;max-width:60ch;font:var(--t-lead)}
/* Grid dengan kolom 1fr dan lebar max-content: kedua tombol sama lebar,
   mengikuti tombol yang teksnya terpanjang. Mobile: bertumpuk, lebar penuh. */
.hero__actions{
  margin-top:var(--s-block);
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:16px;
  width:max-content;max-width:100%;
}
@media (max-width:767px){
  .hero__actions{grid-auto-flow:row;width:100%}
}

/* Ikon panah pada tombol primer. Bukan ikon metaforis melainkan penanda arah,
   jadi tidak masuk tabel ikon design-system.md bagian 3 dan tidak memakai
   --c-brand: warnanya mengikuti teks tombol, sama seperti preseden ikon putih
   di footer. Statis, tidak bergeser saat hover. */
.btn__arrow{margin-left:10px;font-size:13px}

/* Strip spesifikasi, menutup hero di sisi bawah.
   Mengulang tiga kelas produk yang sudah disebut di paragraf pendukung, tetapi
   sebagai daftar yang bisa dipindai, bukan kalimat. Pembacanya procurement
   yang mencari nama bahan, bukan narasi. Monospace adalah penanda khas nomor 3
   di design-system.md bagian 0. */
.hero__spec{
  width:100%;
  border-top:1px solid rgb(var(--c-white-rgb)/.28);
  padding-top:20px;
  margin-top:var(--s-block);
}
.hero__spec ul{
  display:flex;flex-wrap:wrap;
  gap:12px var(--s-gap);
  list-style:none;margin:0;padding:0;
}
.hero__spec li{
  font:var(--t-mono);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--c-white);
}

/* Label vertikal di tepi kanan. Mengisi sisi yang sengaja dibiarkan terang
   oleh scrim, tanpa menambah teks baru: isinya nama resmi perusahaan.
   Memakai writing-mode, bukan transform rotate, supaya tidak ada properti
   transform sama sekali di berkas ini, termasuk translate.
   Disembunyikan di bawah 1025px karena di sana scrim sudah rata dan tepi
   kanan dipakai isi hero. */
.hero__sidelabel{
  position:absolute;
  right:var(--s-gutter);
  /* Dipusatkan lewat margin auto di antara top dan bottom, bukan
     top:50% plus translate. translate termasuk properti transform
     individual, dan berkas ini dijaga bebas transform sepenuhnya. */
  top:0;bottom:0;
  height:fit-content;
  margin-block:auto;
  writing-mode:vertical-rl;
  font:var(--t-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgb(var(--c-white-rgb)/.88);
  margin:0;
  padding-block:var(--s-block);
  border-right:1px solid rgb(var(--c-white-rgb)/.28);
  padding-right:14px;
}
@media (max-width:1024px){
  .hero__sidelabel{display:none}
}

/* Di viewport pendek strip spesifikasi ikut memakan tinggi yang dibutuhkan
   tombol, jadi dilepas. Isinya tidak hilang dari halaman: ketiga nama itu
   tetap ada di paragraf pendukung tepat di atasnya. */
@media (max-height:660px){
  .hero__spec{display:none}
}

/* Viewport pendek. Sejak hero memakai min-height sebesar sisa layar, padding
   inilah yang menentukan apakah isi hero muat di dalam satu layar atau justru
   mendorong hero melewatinya. Pada 1366x768 padding 96px dua sisi membuat isi
   melebihi batas, dan trust bar ikut mengintip di atas lipatan.
   Yang dikurangi hanya padding dan jarak antar blok, bukan isinya, karena
   design-system.md bagian 0 justru meminta hero yang informatif.
   Memakai media query tinggi, bukan lebar, sebab yang menentukan bukan ukuran
   layar melainkan tinggi viewport yang tersedia. Laptop 1366x768 dan ponsel
   pendek sama sama terkena. */

@media (max-height:780px){
  .hero{padding-block:56px}
  .hero__lead{margin-top:18px}
  .hero__actions{margin-top:32px}
}

@media (max-height:660px){
  .hero{padding-block:36px}
  .hero__lead{margin-top:14px}
  .hero__actions{margin-top:24px}
}

@media (max-height:580px){
  .hero{padding-block:20px}
  .hero__lead{margin-top:12px}
  .hero__actions{margin-top:16px}
}


/* ============================================================
   PAGE HERO, halaman dalam
   ============================================================ */

/* Memakai gambar dan scrim yang sama dengan hero beranda, supaya satu
   keluarga. Hierarki di bawah beranda dijaga lewat tinggi yang lebih pendek
   (padding blok), bukan lewat hilangnya gambar.
   Scrimnya ikut diubah bersama hero beranda pada 2026-09-23. Kalau dibiarkan
   memakai overlay rata .65, halaman dalam justru berhenti senada dengan
   beranda, padahal itulah yang diminta klien pada 2026-09-16. */
.page-hero{
  position:relative;
  isolation:isolate;
  background:linear-gradient(135deg,var(--c-brand-dark),var(--c-brand));
  color:var(--c-white);
  padding-block:var(--s-block);
}
.page-hero__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:-2;
}
.page-hero::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgb(var(--c-brand-dark-rgb)/.92) 0%,
    rgb(var(--c-brand-dark-rgb)/.88) 42%,
    rgb(var(--c-brand-dark-rgb)/.60) 72%,
    rgb(var(--c-brand-dark-rgb)/.42) 100%);
  z-index:-1;
}
@media (max-width:1024px){
  .page-hero::after{
    background:linear-gradient(90deg,
      rgb(var(--c-brand-dark-rgb)/.78) 0%,
      rgb(var(--c-brand-dark-rgb)/.70) 100%);
  }
}
.page-hero h1{max-width:20ch}
.page-hero .eyebrow{margin-bottom:10px}
.page-hero p{margin-top:16px;max-width:var(--measure);font:var(--t-lead);color:var(--c-brand-tint)}


/* ============================================================
   TRUST BAR, angka statis
   ============================================================ */

/* Trust bar dibaca sebagai satu blok data, bukan empat benda yang mengambang.
   Tiga hal yang diperbaiki: pita diberi latar --c-surface supaya punya badan
   sendiri di antara dua section putih, tingginya dinaikkan dari --s-block ke
   --s-section supaya sebanding dengan angka --t-display di dalamnya, dan tiap
   sel dipisah garis tegak. Garis, bukan jarak, sesuai design-system.md bagian 0
   yang meminta pemisahan memakai garis 1px. */
.stats{
  background:var(--c-surface);
  border-block:1px solid var(--c-line);
  /* Tingginya sengaja di antara --s-block dan --s-section, bukan salah satunya.
     Pada --s-block pita ini terlalu tipis untuk menampung angka --t-display,
     pada --s-section ia berubah jadi section penuh dan merebut perhatian dari
     hero tepat di atasnya. Trust bar adalah pita penunjang, bukan section. */
  padding-block:60px;
}
@media (max-width:1024px){.stats{padding-block:52px}}
@media (max-width:767px){.stats{padding-block:40px}}

/* Jarak antar sel dipindahkan ke padding tiap sel supaya garis tegak jatuh
   tepat di tengah, bukan menempel di salah satu sisi. */
.stats .grid-4{gap:0}
.stat{padding-inline:var(--s-gap);border-left:1px solid var(--c-line)}
.stat:first-child{border-left:0}
/* Rata tengah dibolehkan di sini karena tiap sel hanya angka pendek plus
   label satu baris, bukan paragraf. design-system.md bagian 0. */
.stat{text-align:center}
/* FA7 memberi lebar tetap pada ikon, jadi display:block saja membuatnya
   nempel kiri. Dipusatkan lewat margin-inline. 36px, bukan 28px seperti ikon
   kartu, supaya seimbang dengan angka --t-display di bawahnya. */
.stat i{color:var(--c-brand);font-size:32px;display:block;margin-inline:auto;margin-bottom:12px}
.stat__num{font:var(--t-display);letter-spacing:var(--ls-display);color:var(--c-brand);display:block}
/* Label dinaikkan dari --c-muted ke --c-body dan diberi jarak lebih longgar.
   Abu muda di bawah angka setebal --t-display membuat pasangannya timpang:
   angkanya berteriak, keterangannya nyaris hilang. */
.stat__label{
  font:var(--t-small);
  color:var(--c-body);
  display:block;
  margin-top:8px;
  text-wrap:balance;
}

/* Mobile tetap 2 kolom, bukan 1, supaya empat angka tidak jadi tumpukan
   panjang. Override khusus .stats, grid-4 lain tetap mengikuti aturan umum. */
/* Di dua kolom, garis tegak hanya boleh muncul pada sel kanan, dan tiap baris
   dipisah garis mendatar. Tanpa aturan ini sel nomor 3 mewarisi garis kiri dan
   muncul menggantung di awal baris. */
@media (max-width:1024px){
  .stat:nth-child(odd){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--c-line);padding-top:var(--s-block)}
  .stat:nth-child(-n+2){padding-bottom:var(--s-block)}
}

@media (max-width:767px){
  .stats .grid-4{grid-template-columns:repeat(2,1fr)}
  .stat{padding-inline:12px}
}


/* ============================================================
   TENTANG SINGKAT, beranda, dan LATAR BELAKANG, halaman tentang
   ============================================================ */

/* Teks kiri, foto kanan. Foto dibatasi garis, bukan bayangan, dan diberi
   caption monospace supaya terbaca sebagai dokumentasi, bukan hiasan. */
.about{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:var(--s-block);align-items:center}
.about__text{max-width:var(--w-narrow)}
.about__text .section-head{margin-bottom:var(--s-gap)}
.about__figure img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--c-line);border-radius:var(--r-lg);
}
.about__figure figcaption{margin-top:12px;color:var(--c-muted)}

@media (max-width:1024px){
  .about{grid-template-columns:1fr}
}


/* ============================================================
   KARTU
   design-system.md bagian 6. Tanpa bayangan, tanpa gerak.
   ============================================================ */

/* ============================================================
   SECTION BERLATAR FOTO
   Pola sama dengan hero: gambar absolut plus scrim di atasnya.
   ============================================================ */

.section-photo{position:relative;isolation:isolate}
.section-photo__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:-2;
}
/* Scrim vertikal, pekat di tengah tempat kartu berdiri dan sedikit lebih
   terbuka di tepi atas dan bawah, supaya pita ini tidak terbaca sebagai balok
   biru rata. Nilai .94 di tengah bukan pilihan estetis melainkan syarat: di
   bawah itu foto gudang mulai terbaca sebagai foto kedua yang mengulang hero. */
.section-photo::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgb(var(--c-brand-deep-rgb)/.88) 0%,
    rgb(var(--c-brand-deep-rgb)/.94) 45%,
    rgb(var(--c-brand-deep-rgb)/.94) 62%,
    rgb(var(--c-brand-deep-rgb)/.88) 100%);
  z-index:-1;
}
.section-photo .section-head h2,
.section-photo .section-head .eyebrow{color:var(--c-white)}
.section-photo .rule::before{background:var(--c-white)}


.card{
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  padding:32px;
}

/* Umpan balik hover pada kartu.
   brief.md poin 7 dan design-system.md bagian 7 melarang kartu terangkat dan
   hover zoom, jadi yang berubah hanya warna, seketika, tanpa transition.
   Tiga hal berubah bersamaan supaya perubahannya terbaca jelas walau tanpa
   gerak: garis tepi menjadi biru brand, latar menjadi --c-brand-tint, dan
   pita tegak di sisi kiri muncul. Pita memakai inset box-shadow, bukan border,
   supaya lebar kartu tidak berubah satu piksel pun saat hover, yang akan
   terbaca sebagai gerakan. */
.card{box-shadow:inset 3px 0 0 0 transparent}
.card:hover{
  border-color:var(--c-brand);
  background:var(--c-brand-tint);
  box-shadow:inset 3px 0 0 0 var(--c-brand);
}
.card i{color:var(--c-brand);font-size:28px;display:block;margin-bottom:16px}
.card h3{margin-bottom:0}

@media (max-width:767px){.card{padding:24px}}

/* Mobile: seluruh isi kartu dan badge rata tengah. Pengecualian yang disetujui
   klien 2026-09-16 atas aturan rata kiri di design-system.md bagian 0, hanya
   berlaku saat kartu tersusun satu kolom. Ikon dipusatkan lewat margin karena
   FA7 memberi lebar tetap pada ikon, text-align saja tidak cukup. */
@media (max-width:767px){
  .card,.cert{text-align:center}
  .card i,.cert i{margin-inline:auto}
}


/* ============================================================
   BADGE SERTIFIKASI
   ============================================================ */

.cert{
  background:var(--c-brand-tint);
  border:1px solid var(--c-brand-line);
  border-radius:var(--r-md);
  padding:24px;
}
.cert i{color:var(--c-brand);font-size:28px;display:block;margin-bottom:16px}
.cert__code{font:var(--t-mono);color:var(--c-ink);display:block;margin-bottom:8px}


/* ============================================================
   GRID MITRA
   Grid statis, logo berwarna asli, tanpa hover. Bagian 6.
   ============================================================ */

.partner__item{
  display:flex;align-items:center;justify-content:center;
  min-height:96px;
  padding:16px;
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  background:var(--c-white);
  text-align:center;
  font:var(--t-small);
  color:var(--c-muted);
}

/* Logo tampil berwarna asli tanpa filter, sesuai keputusan klien 2026-09-16.
   Tanpa perubahan apa pun saat hover. */
.partner__item img{
  max-height:40px;
  max-width:100%;
  width:auto;height:auto;
  object-fit:contain;
}

/* Penyesuaian optis. Bagian 6 menetapkan tinggi seragam 40px, tetapi aturan itu
   mengasumsikan logo berbentuk wordmark memanjang. Logo yang mendekati persegi
   hanya selebar 30px pada tinggi 40px, sehingga bobotnya terlihat jauh lebih
   ringan daripada tetangganya. Dua logo berikut dinaikkan agar luas tampilnya
   setara, bukan tingginya. */
.partner__item img.logo-tegak{max-height:64px}
.partner__item img.logo-sedang{max-height:52px}

@media (max-width:767px){
  .partner__item img{max-height:32px}
  .partner__item img.logo-tegak{max-height:48px}
  .partner__item img.logo-sedang{max-height:40px}
}


/* ============================================================
   CTA BAND
   ============================================================ */

/* Gambar latar dengan overlay, pola sama dengan hero. Overlay .85, bukan .65,
   karena gambar cta-drum.webp punya dinding putih dan pintu terang di tengah:
   pada .65 kontras teks putih hanya 2,5:1, baru mencapai 4,5:1 pada .85.
   Diukur pada crop desktop, tablet, dan mobile. Kalau gambar diganti dengan
   yang lebih gelap, ukur ulang dan turunkan nilai ini. */
/* Section pembungkus berlatar putih. Warna terang inilah jeda yang memisahkan
   panel CTA dari footer; tanpa itu dua bidang biru berfoto bertemu langsung
   dan terbaca sebagai satu massa. */
.cta{
  position:relative;
  background:var(--c-white);
  padding-block:var(--s-section);
  text-align:center;
}

/* Panel CTA. Radius --r-lg, nilai yang design-system.md bagian 5 sediakan
   untuk gambar besar, sebab isi panel ini memang sebuah foto. */
.cta__panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:var(--r-lg);
  padding-block:var(--s-section);
  padding-inline:var(--s-gutter);
}
.cta__inner{max-width:var(--w-narrow);margin-inline:auto}

@media (max-width:767px){
  .cta__panel{padding-block:var(--s-block)}
}

.cta__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:-2;
}
/* Scrim radial menggantikan overlay rata .85.
   Isi CTA rata tengah, jadi yang perlu pekat adalah bagian tengah, bukan
   seluruh bidang. Elips gelap di tengah menjaga kontras teks, sementara tepi
   kiri dan kanan dibiarkan lebih terbuka sehingga deretan drum tetap terbaca.
   Inilah yang hilang pada overlay rata: seluruh foto ikut padam demi
   keterbacaan teks yang hanya menempati sepertiga tengah. */
.cta__panel::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse 72% 130% at 50% 50%,
    rgb(var(--c-brand-dark-rgb)/.94) 0%,
    rgb(var(--c-brand-dark-rgb)/.90) 45%,
    rgb(var(--c-brand-dark-rgb)/.74) 100%);
  z-index:-1;
}

/* Bingkai tepi atas dan bawah, mengunci pita CTA sebagai satu blok utuh
   dan menyembunyikan batas foto yang terpotong object-fit. */
.cta__panel::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgb(var(--c-brand-deep-rgb)/.85) 0%,
    rgb(var(--c-brand-deep-rgb)/0) 18%,
    rgb(var(--c-brand-deep-rgb)/0) 82%,
    rgb(var(--c-brand-deep-rgb)/.85) 100%);
  z-index:-1;
}
.cta h2{color:var(--c-white);max-width:24ch;margin-inline:auto}
.cta p{margin-top:16px;margin-inline:auto;max-width:56ch}
.cta .btn{margin-top:var(--s-block)}
.cta__alt{margin-top:16px;font:var(--t-small)}


/* ============================================================
   TABEL SPESIFIKASI
   design-system.md bagian 6. Di mobile dibungkus .table-scroll.
   ============================================================ */

/* Lebar minimum supaya .table-scroll benar benar menggulir di layar sempit.
   Tanpa ini table width:100% hanya meremas kolomnya, dan aturan bagian 6 yang
   meminta tabel digulir di mobile tidak pernah berlaku. */
.spec{font:var(--t-body);text-align:left;min-width:560px}
.spec th{
  background:var(--c-brand-tint);
  color:var(--c-ink);
  font-weight:600;
  padding:12px 16px;
  border-bottom:1px solid var(--c-brand-line);
  white-space:nowrap;
}
.spec td{padding:12px 16px;border-bottom:1px solid var(--c-line);vertical-align:top}
.spec .mono{color:var(--c-ink)}

/* Kolom foto kemasan. Hanya dipasang pada tabel yang sebagian besar barisnya
   sudah punya foto, supaya tidak ada tabel dengan kolom kosong seluruhnya. */
.spec td.pic{width:96px;padding:10px 16px;vertical-align:middle}

.spec td.pic img{
  display:block;
  width:72px;height:72px;
  /* Reset memberi img max-width 100 persen. Di dalam sel sempit itu membuat
     gambar ikut mengecil, jadi dilepas di sini. */
  max-width:none;
  object-fit:cover;
  /* Digeser ke atas karena label produk berada di sepertiga atas kemasan. */
  object-position:center 30%;
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  background:var(--c-white);
}

/* Baris yang fotonya belum ada. Dibuat terlihat disengaja, bukan sel bolong. */
.spec td.pic .belum{
  display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;
  border:1px dashed var(--c-line);
  border-radius:var(--r-md);
  background:var(--c-surface);
  color:var(--c-muted);
  font-size:20px;
}


/* ============================================================
   DAFTAR POIN DAN LANGKAH
   ============================================================ */

.points{margin:0;padding:0;list-style:none}
.points li{display:flex;gap:12px;align-items:flex-start}
.points li+li{margin-top:12px}
.points i{color:var(--c-brand);font-size:20px;line-height:1.7;flex:none}

.steps{margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{
  counter-increment:step;
  border-left:3px solid var(--c-brand);
  padding:0 0 0 20px;
}
.steps li+li{margin-top:24px}
.steps li::before{
  content:"Langkah " counter(step);
  display:block;
  font:var(--t-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-brand);
  margin-bottom:4px;
}


/* ============================================================
   FORM
   design-system.md bagian 6. Tanpa captcha.
   ============================================================ */

.field+.field{margin-top:24px}
.field label{display:block;font:600 14px/1.6 var(--f-body);color:var(--c-ink);margin-bottom:8px}
.field .req{color:var(--c-error)}

.field input,.field select,.field textarea{
  width:100%;
  min-height:48px;
  padding:12px 16px;
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  background:var(--c-white);
  color:var(--c-body);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--c-brand);
  box-shadow:0 0 0 3px var(--ring-field);
}
.field__help{font:var(--t-small);color:var(--c-muted);margin-top:8px}

/* Honeypot. Disembunyikan dari mata dan dari pembaca layar. */
.hp{position:absolute;left:-9999px}