/* =========================================================================
   iBorneo — situs profil
   Satu berkas gaya, tanpa framework dan tanpa berkas dari CDN.

   Urutan: token → dasar → susunan → komponen → bagian halaman → layar kecil
   ========================================================================= */

:root {
  /* Warna merek */
  --hutan-900: #0B221D;   /* latar gelap utama */
  --hutan-800: #12362D;
  --hutan-700: #17493C;
  --teal-600:  #10775E;   /* warna tindakan di latar terang */
  --teal-500:  #1F9E7E;
  --teal-300:  #3FBF9B;   /* warna tindakan di latar gelap */
  --amber-500: #E9A93B;   /* aksen penegas, bukan tombol */

  /* Diambil langsung dari berkas logo (sumber/iBorneo-logo-asli.jpg), supaya
     tulisan "iBorneo" di bilah atas sewarna dengan tandanya. */
  --merek-teal:  #267862;
  --merek-arang: #302F2B;

  /* Warna netral */
  --kertas:    #FAF7F1;
  --kartu:     #FFFFFF;
  --kartu-2:   #F4F0E7;
  --tinta:     #16211E;
  --tinta-2:   #3D4B47;
  --redup:     #5F6E69;
  --garis:     #E4DED2;
  --garis-tua: #CFC7B7;

  /* Warna makna — tidak ikut berganti kalau warna merek diganti */
  --berhasil:  #2E7D52;
  --bahaya:    #9B2C2C;

  /* Ukuran */
  --lebar:     1160px;
  --sela:      20px;
  --sudut:     14px;
  --sudut-s:   9px;

  /* Bayangan */
  --bayang-1: 0 1px 2px rgba(11, 34, 29, .05), 0 2px 8px rgba(11, 34, 29, .04);
  --bayang-2: 0 8px 28px rgba(11, 34, 29, .10);
  --bayang-3: 0 18px 48px rgba(11, 34, 29, .16);

  /* Huruf */
  --huruf: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Dasar ---------- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font-family: var(--huruf);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.018em; font-weight: 700; }
h1 { font-size: clamp(2.05rem, 5.2vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); }
h3 { font-size: 1.18rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--hutan-800); }

img, svg { max-width: 100%; }
ul { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.lewati {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--hutan-900); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.lewati:focus { left: 0; }

.ikon { width: 22px; height: 22px; flex: none; }
.ikon-kecil { width: 17px; height: 17px; }

/* ---------- Susunan ---------- */

.wrap { width: 100%; max-width: var(--lebar); margin: 0 auto; padding: 0 var(--sela); }

section { padding: clamp(56px, 8vw, 94px) 0; }
section.rapat { padding: clamp(40px, 5vw, 60px) 0; }

.kepala { max-width: 700px; margin-bottom: clamp(30px, 4vw, 48px); }
.kepala.tengah { margin-left: auto; margin-right: auto; text-align: center; }

.mata {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-600); margin: 0 0 14px;
}
.mata::before { content: ""; width: 24px; height: 2px; background: var(--amber-500); }
.kepala.tengah .mata::before { display: none; }

.lede { font-size: 1.1rem; color: var(--tinta-2); }
.redup { color: var(--redup); }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Tombol ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-weight: 650; font-size: .97rem; text-decoration: none;
  cursor: pointer; transition: transform .16s, box-shadow .16s, background .16s, color .16s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-kecil { padding: 9px 16px; font-size: .9rem; }

.btn-utama { background: var(--teal-600); color: #fff; box-shadow: var(--bayang-1); }
.btn-utama:hover { background: var(--hutan-700); color: #fff; box-shadow: var(--bayang-2); }

.btn-garis { background: transparent; color: var(--hutan-800); border-color: var(--garis-tua); }
.btn-garis:hover { background: #fff; border-color: var(--hutan-800); color: var(--hutan-800); }

.btn-terang { background: #fff; color: var(--hutan-900); }
.btn-terang:hover { background: var(--kartu-2); color: var(--hutan-900); }

.btn-garis-terang { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-garis-terang:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

.tombol-baris { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Bilah atas ---------- */

.bar {
  position: sticky; top: 0; z-index: 90;
  background: rgba(250, 247, 241, .88);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.bar.turun { border-bottom-color: var(--garis); box-shadow: var(--bayang-1); }

.bar-isi { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }

.merek { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }

/* Tanda logo berlatar tembus, jadi satu berkas ini dipakai di bilah atas yang
   krem maupun di kaki halaman yang hijau tua. Ukurannya dikunci lebar DAN
   tinggi (nisbah asli 144:141) supaya tata letak tidak melompat saat dimuat. */
.merek-tanda { width: 38px; height: 37px; flex: none; }

/* Huruf "i" hijau, "Borneo" arang — warnanya diambil langsung dari berkas logo. */
.merek-teks {
  font-size: 1.26rem; font-weight: 750; letter-spacing: -.02em;
  color: var(--merek-teal); display: block; line-height: 1.15;
}
.merek-teks b { color: var(--merek-arang); font-weight: 750; }

.merek-kaki { align-items: center; }
.merek-kaki .merek-tanda { width: 46px; height: 45px; }
.merek-kaki .merek-teks { color: var(--teal-300); }
.merek-kaki .merek-teks b { color: #fff; }
.merek-tagline {
  display: block; font-size: .67rem; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-top: 1px;
}

.bar-menu { display: flex; align-items: center; gap: 4px; }
.bar-menu > a {
  padding: 9px 13px; border-radius: 999px; text-decoration: none;
  color: var(--tinta-2); font-size: .96rem; font-weight: 550;
}
.bar-menu > a:hover { background: rgba(16, 119, 94, .09); color: var(--hutan-800); }
.bar-menu > a.aktif { color: var(--hutan-900); font-weight: 700; }
.bar-menu > a.btn { margin-left: 10px; color: #fff; }

.bar-tombol { display: none; }

/* ---------- Hero ---------- */

.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1100px 620px at 78% -8%, var(--hutan-700) 0%, var(--hutan-900) 62%);
  color: #fff; padding: clamp(60px, 9vw, 108px) 0 clamp(52px, 7vw, 88px);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 120px;
  background: linear-gradient(180deg, transparent, rgba(250,247,241,.06));
  pointer-events: none;
}
.hero-latar { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.hero-grid {
  position: relative; display: grid; gap: clamp(34px, 5vw, 56px);
  grid-template-columns: 1.08fr .92fr; align-items: center;
}
.hero .mata { color: var(--teal-300); }
.hero .mata::before { background: var(--amber-500); }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--amber-500); }
.hero-lede { font-size: clamp(1.03rem, 2.1vw, 1.19rem); color: rgba(255,255,255,.82); max-width: 55ch; }
.hero .tombol-baris { margin-top: 28px; }

.hero-catatan {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: .9rem; color: rgba(255,255,255,.66);
}
.hero-catatan span { display: inline-flex; align-items: center; gap: 7px; }
.hero-catatan .ikon { width: 17px; height: 17px; color: var(--teal-300); }

/* Kartu tumpuk di sisi kanan hero */
.hero-tumpuk { position: relative; display: grid; gap: 12px; }
.hero-kartu {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--sudut); padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  backdrop-filter: blur(6px);
}
.hero-kartu .ikon { width: 26px; height: 26px; color: var(--teal-300); }
.hero-kartu b { display: block; font-size: .98rem; color: #fff; font-weight: 650; }
.hero-kartu small { color: rgba(255,255,255,.62); font-size: .855rem; line-height: 1.45; display: block; }
.hero-kartu:nth-child(even) { margin-left: clamp(0px, 4vw, 38px); }

/* ---------- Pita angka ---------- */

.pita { background: var(--hutan-900); color: #fff; padding: 0; }
.pita-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.1);
}
.pita-sel { padding: 26px 22px; border-right: 1px solid rgba(255,255,255,.1); }
.pita-sel:last-child { border-right: 0; }
.pita-angka { font-size: 1.85rem; font-weight: 750; letter-spacing: -.02em; color: var(--amber-500); display: block; }
.pita-ket { font-size: .9rem; color: rgba(255,255,255,.7); }

/* ---------- Kartu produk ---------- */

.kartu {
  position: relative; display: flex; flex-direction: column;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut);
  padding: 26px; text-decoration: none; color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
a.kartu:hover { transform: translateY(-3px); box-shadow: var(--bayang-2); border-color: var(--garis-tua); color: inherit; }

.kartu-ikon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(16, 119, 94, .1); color: var(--teal-600); margin-bottom: 16px;
}
.kartu-ikon .ikon { width: 25px; height: 25px; }
.kartu-kategori {
  font-size: .73rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--redup); display: block; margin-bottom: 6px;
}
.kartu h3 { margin-bottom: 8px; }
.kartu p { color: var(--tinta-2); font-size: .97rem; }
.kartu-kaki {
  margin-top: auto; padding-top: 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; font-size: .92rem; font-weight: 650; color: var(--teal-600);
}
.kartu-kaki .ikon { transition: transform .18s; }
a.kartu:hover .kartu-kaki .ikon { transform: translateX(4px); }

.label {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  background: rgba(46, 125, 82, .12); color: var(--berhasil);
}
.label-netral { background: var(--kartu-2); color: var(--tinta-2); }
.label-amber { background: rgba(233, 169, 59, .18); color: #8A5F10; }

/* ---------- Daftar bercentang ---------- */

.centang { list-style: none; display: grid; gap: 11px; }
.centang li { display: flex; gap: 11px; align-items: flex-start; color: var(--tinta-2); }
.centang .ikon { width: 20px; height: 20px; color: var(--teal-600); margin-top: 3px; }

/* ---------- Langkah kerja ---------- */

.langkah { counter-reset: n; display: grid; gap: 22px; }
.langkah-sel {
  position: relative; padding: 26px 24px 24px;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut);
}
.langkah-sel::before {
  counter-increment: n; content: counter(n, decimal-leading-zero);
  font-size: .8rem; font-weight: 750; letter-spacing: .08em;
  color: var(--teal-600); display: block; margin-bottom: 10px;
}
.langkah-sel h3 { font-size: 1.08rem; }
.langkah-sel p { color: var(--tinta-2); font-size: .96rem; margin: 0; }

/* ---------- Halaman detail produk ---------- */

.jejak { font-size: .9rem; color: var(--redup); margin-bottom: 14px; }
.jejak a { color: var(--redup); }
.jejak a:hover { color: var(--hutan-800); }

.detail-kepala { background: var(--hutan-900); color: #fff; padding: clamp(44px, 6vw, 74px) 0; }
.detail-kepala .jejak, .detail-kepala .jejak a { color: rgba(255,255,255,.6); }
.detail-kepala h1 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
.detail-kepala .lede { color: rgba(255,255,255,.8); }
.detail-kepala .kartu-ikon { background: rgba(63,191,155,.14); color: var(--teal-300); }

.sorot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.sorot-sel {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--sudut-s); padding: 16px 18px;
}
.sorot-angka { display: block; font-size: 1.22rem; font-weight: 750; color: var(--amber-500); }
.sorot-ket { font-size: .88rem; color: rgba(255,255,255,.7); line-height: 1.45; }

.dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 48px); }

.kotak-cerita {
  background: var(--kartu); border: 1px solid var(--garis);
  border-left: 3px solid var(--garis-tua);
  border-radius: var(--sudut); padding: 26px;
}
.kotak-cerita.jawab { border-left-color: var(--teal-500); }
.kotak-cerita h3 { font-size: 1.02rem; color: var(--redup); font-weight: 650; }
.kotak-cerita.jawab h3 { color: var(--teal-600); }
.kotak-cerita p { margin: 0; color: var(--tinta-2); }

.fitur-sel { display: flex; gap: 14px; }
.fitur-sel .ikon { color: var(--teal-600); margin-top: 3px; }
.fitur-sel b { display: block; margin-bottom: 3px; }
.fitur-sel span { color: var(--tinta-2); font-size: .96rem; }

.pil-baris { display: flex; flex-wrap: wrap; gap: 9px; }
.pil {
  padding: 7px 14px; border-radius: 999px; background: var(--kartu);
  border: 1px solid var(--garis); font-size: .9rem; color: var(--tinta-2);
}

/* ---------- Tanya jawab ---------- */

.tanya { border-top: 1px solid var(--garis); }
.tanya:last-of-type { border-bottom: 1px solid var(--garis); }
.tanya summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-weight: 650; font-size: 1.04rem;
}
.tanya summary::-webkit-details-marker { display: none; }
.tanya summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--teal-600); border-bottom: 2px solid var(--teal-600);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.tanya[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.tanya-isi { padding: 0 48px 22px 0; color: var(--tinta-2); }

/* ---------- Formulir ---------- */

.form-kotak {
  background: var(--kartu); border: 1px solid var(--garis);
  border-radius: var(--sudut); padding: clamp(22px, 3vw, 32px); box-shadow: var(--bayang-1);
}
.bidang { margin-bottom: 18px; }
.bidang label { display: block; font-weight: 650; font-size: .95rem; margin-bottom: 7px; }
.bidang .bantu { font-weight: 400; color: var(--redup); font-size: .88rem; }

.isian {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--tinta);
  background: #fff; border: 1.5px solid var(--garis-tua); border-radius: var(--sudut-s);
  transition: border-color .15s, box-shadow .15s;
}
.isian:focus {
  outline: none; border-color: var(--teal-600);
  box-shadow: 0 0 0 3px rgba(16, 119, 94, .16);
}
textarea.isian { min-height: 130px; resize: vertical; }
select.isian { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%),
  linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }

.jebakan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pesan {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 18px; border-radius: var(--sudut-s); margin-bottom: 22px; font-size: .97rem;
}
.pesan .ikon { margin-top: 2px; }
.pesan-baik { background: rgba(46,125,82,.1); color: #1F5A3A; border: 1px solid rgba(46,125,82,.28); }
.pesan-salah { background: rgba(155,44,44,.08); color: var(--bahaya); border: 1px solid rgba(155,44,44,.25); }

/* ---------- Kotak kontak ---------- */

.kontak-sel {
  display: flex; gap: 14px; padding: 20px;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut);
}
.kontak-sel .ikon { color: var(--teal-600); margin-top: 3px; }
.kontak-sel b { display: block; font-size: .88rem; color: var(--redup); font-weight: 650; margin-bottom: 2px; }
.kontak-sel a, .kontak-sel span { color: var(--tinta); font-size: 1rem; }

/* ---------- Ajakan penutup ---------- */

.ajakan { background: var(--hutan-900); color: #fff; }
.ajakan-isi {
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: center;
}
.ajakan h2 { color: #fff; }
.ajakan p { color: rgba(255,255,255,.76); margin: 0; max-width: 56ch; }
.ajakan-tombol { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* ---------- Kaki ---------- */

.kaki { background: var(--hutan-800); color: rgba(255,255,255,.72); padding: clamp(46px, 6vw, 68px) 0 0; }
.kaki a { color: rgba(255,255,255,.72); text-decoration: none; }
.kaki a:hover { color: #fff; text-decoration: underline; }
.kaki h3 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.kaki .merek-teks { color: #fff; }

.kaki-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 36px; }
.kaki-cerita { margin-top: 16px; font-size: .94rem; max-width: 42ch; line-height: 1.6; }
.kaki-kolom ul { list-style: none; display: grid; gap: 10px; font-size: .95rem; }
.kaki-kontak li { display: flex; gap: 10px; align-items: flex-start; }
.kaki-kontak .ikon { width: 19px; height: 19px; margin-top: 3px; color: var(--teal-300); }

.kaki-sosial { display: flex; gap: 10px; margin-top: 20px; }
.kaki-sosial a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2);
}
.kaki-sosial a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }

.kaki-bawah {
  margin-top: clamp(36px, 5vw, 54px); padding-top: 22px; padding-bottom: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: .88rem; color: rgba(255,255,255,.55);
}
.kaki-bawah p { margin: 0; }

/* ---------- Tombol WhatsApp mengambang ---------- */

.wa-apung {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 19px; border-radius: 999px; text-decoration: none;
  background: #1F9E7E; color: #fff; font-weight: 650; font-size: .95rem;
  box-shadow: var(--bayang-3);
  transition: transform .18s, background .18s;
}
.wa-apung:hover { background: var(--teal-600); color: #fff; transform: translateY(-2px); }

/* ---------- Muncul saat digulir ---------- */

/* Disembunyikan HANYA kalau JavaScript hidup (kelas .js dipasang di <head>).
   Tanpa penjaga ini, browser yang gagal memuat main.js akan menampilkan
   halaman kosong — seluruh isinya ber-opacity nol dan tidak pernah dimunculkan. */
.js .muncul { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.js .muncul.tampil { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .muncul { opacity: 1; transform: none; } }

/* =========================================================================
   Layar kecil
   ========================================================================= */

@media (max-width: 1000px) {
  .kaki-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .kaki-merek { grid-column: 1 / -1; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-tumpuk { max-width: 520px; }
  .hero-kartu:nth-child(even) { margin-left: 0; }
  .ajakan-isi { grid-template-columns: 1fr; }
  .ajakan-tombol { justify-content: flex-start; }
}

@media (max-width: 860px) {
  :root { --sela: 16px; }

  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dua-kolom { grid-template-columns: 1fr; }
  /* Pita tetap 3 kolom sampai layar ponsel — isinya pendek, dan 3 butir yang
     dipaksa jadi 2 kolom menyisakan satu butir sendirian di baris kedua. */

  /* Menu jadi panel yang dibuka tombol */
  .bar-tombol {
    display: inline-flex; align-items: center; gap: 9px;
    background: transparent; border: 1.5px solid var(--garis-tua); border-radius: 999px;
    padding: 8px 15px; font: inherit; font-size: .92rem; font-weight: 650;
    color: var(--hutan-900); cursor: pointer;
  }
  .bar-garis {
    position: relative; width: 17px; height: 2px; background: currentColor; border-radius: 2px;
    transition: background .15s;
  }
  .bar-garis::before, .bar-garis::after {
    content: ""; position: absolute; left: 0; width: 17px; height: 2px;
    background: currentColor; border-radius: 2px; transition: transform .2s, top .2s;
  }
  .bar-garis::before { top: -6px; }
  .bar-garis::after  { top: 6px; }
  .bar-tombol[aria-expanded="true"] .bar-garis { background: transparent; }
  .bar-tombol[aria-expanded="true"] .bar-garis::before { top: 0; transform: rotate(45deg); }
  .bar-tombol[aria-expanded="true"] .bar-garis::after  { top: 0; transform: rotate(-45deg); }

  .bar-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--kertas); border-bottom: 1px solid var(--garis);
    padding: 12px var(--sela) 20px; box-shadow: var(--bayang-2);
  }
  .bar-menu.buka { display: flex; }
  .bar-menu > a { padding: 13px 12px; border-radius: var(--sudut-s); font-size: 1.02rem; }
  .bar-menu > a.btn { margin: 10px 0 0; justify-content: center; padding: 13px 20px; }

  .sorot { grid-template-columns: 1fr; gap: 10px; }
  .wa-apung span { display: none; }
  .wa-apung { padding: 15px; right: 14px; bottom: 14px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .pita-grid { grid-template-columns: 1fr; }
  .pita-sel { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .pita-sel:last-child { border-bottom: 0; }
  .kaki-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .bar-menu > a.btn { width: 100%; }
  .tombol-baris { flex-direction: column; align-items: stretch; }
  .hero-catatan { flex-direction: column; gap: 8px; }
}

/* ---------- Cetak ---------- */

@media print {
  .bar, .ajakan, .wa-apung, .kaki-sosial, .lewati { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .hero, .detail-kepala, .kaki, .pita { background: #fff !important; color: #000 !important; }
  .hero h1, .detail-kepala h1, .kaki h3 { color: #000 !important; }
  a { text-decoration: underline; }
}