/* ==========================================================================
   ASIATOGEL88 — Asosiasi Peduli Kesehatan Mental Indonesia (asiatogel88.mx)

   Susunan mengikuti acuan rancangan:
     - Pita pengumuman koral di paling atas, teks putih di tengah, bisa ditutup.
     - Kepala putih: lambang di pojok kiri, navigasi koral di kanan, butir
       yang aktif bergaris bawah.
     - Judul sorot berukuran raksasa berwarna koral.
     - Paragraf beranotasi: kata tebal, frasa bersorot, garis bawah bergelombang.
     - Judul seksi hitam tebal dengan sapuan kuas tebal di bawahnya.
     - Kartu pilar: ubin membulat, judul berkuas, lalu tombol koral penuh lebar.
     - Akordeon tanya-jawab di atas foto lanskap.
     - Kaki halaman biru kehijauan tua dengan tautan koral.

    1. Dasar             2. Wadah              3. Tombol dan tautan
    4. Pita pengumuman   5. Kepala             6. Navigasi
    7. Sorot             8. Judul berkuas      9. Pita seksi
   10. Kartu pilar      11. Kartu berita      12. Angka
   13. Akordeon         14. Kepala halaman    15. Isi artikel
   16. Bilah samping    17. Tabel             18. Borang
   19. Kaki             20. Ke atas           21. Layar kecil
   ========================================================================== */

/* 1. Dasar -------------------------------------------------------------- */
:root {
  --koral:       #ef5b53;
  --koral-tua:   #d8433c;
  --koral-muda:  #fdeceb;

  --teal:        #16606f;
  --teal-tua:    #0f4a56;
  --teal-terang: #2f8f8f;

  --biru:        #3aa7dd;
  --biru-sorot:  #d5eaf6;
  --navy:        #3d5166;

  --kuning:      #f2b731;
  --ungu:        #9c86d4;
  --hijau:       #58a55c;

  --tinta:       #111111;
  --tinta-lembut:#3f3f3f;
  --redup:       #6f6f6f;
  --kabut:       #e7eef1;
  --kabut-muda:  #f4f8f9;
  --garis:       #dfe5e8;
  --garis-tegas: #c3cdd2;

  --r-kecil:  4px;
  --r-sedang: 16px;
  --r-pil:    999px;

  --bayang:      0 4px 16px rgba(17, 17, 17, .08);
  --bayang-naik: 0 16px 38px rgba(17, 17, 17, .16);

  --lebar: 1180px;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: #fff;
  color: var(--tinta-lembut);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }
a { color: var(--koral); text-decoration: none; }
a:hover { color: var(--koral-tua); }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--tinta);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.015em;
}

[id] { scroll-margin-top: 96px; }

.lompat {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 22px;
  background: var(--koral);
  color: #fff;
  font-weight: 600;
}
.lompat:focus { left: 0; }

/* 2. Wadah -------------------------------------------------------------- */
.wadah { width: 100%; max-width: var(--lebar); margin: 0 auto; padding: 0 30px; }
.wadah--sempit { max-width: 900px; }

.blok { padding: 76px 0; }
.blok--rapat { padding: 52px 0; }
.blok--kabut { background: var(--kabut); }
.blok--kabut-muda { background: var(--kabut-muda); }

p { margin: 0; }

/* 3. Tombol dan tautan --------------------------------------------------- */
/* Tombol acuan berbentuk kotak tumpul, koral padat, huruf besar semua. */
.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 34px;
  border: 2px solid var(--koral);
  border-radius: var(--r-kecil);
  background: var(--koral);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.tombol:hover { background: var(--koral-tua); border-color: var(--koral-tua); color: #fff; }
.tombol--garis { background: transparent; color: var(--koral); }
.tombol--garis:hover { background: var(--koral); color: #fff; }
.tombol--teal { background: var(--teal); border-color: var(--teal); }
.tombol--teal:hover { background: var(--teal-tua); border-color: var(--teal-tua); }
.tombol--terang { background: transparent; border-color: #fff; color: #fff; }
.tombol--terang:hover { background: #fff; color: var(--teal); }
.tombol--lebar { width: 100%; }
.tombol--kecil { padding: 10px 22px; font-size: .8125rem; }
.tombol svg { width: 16px; height: 16px; flex: none; }

.tautan { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--koral); }
.tautan svg { width: 17px; height: 17px; transition: transform .2s ease; }
.tautan:hover svg { transform: translateX(4px); }

/* Anotasi pada paragraf pembuka, ciri paling khas acuan */
.tandai { background: var(--biru-sorot); padding: 0 3px; }
.garis-lengkung { text-decoration: underline wavy var(--koral); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.garis-tebal { text-decoration: underline solid var(--koral); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tebal-navy { color: var(--navy); font-weight: 700; }

/* 4. Pita pengumuman ----------------------------------------------------- */
.pita-atas {
  position: relative;
  background: var(--koral);
  color: #fff;
  padding: 13px 56px;
  text-align: center;
  font-size: .9375rem;
  font-weight: 500;
}
.pita-atas a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pita-atas__tutup {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.pita-atas__tutup svg { width: 18px; height: 18px; }
.pita-atas--tutup { display: none; }

/* 5. Kepala -------------------------------------------------------------- */
.kepala { position: sticky; top: 0; z-index: 60; background: #fff; box-shadow: 0 1px 0 var(--garis); }
.kepala__isi { display: flex; align-items: center; gap: 22px; min-height: 88px; }

/* Susunan kepala: lambang di pojok kiri, menu di kanan. */
.merek { display: flex; align-items: center; gap: 12px; flex: none; margin-right: auto; color: var(--tinta); }
.merek:hover { color: var(--tinta); }
.merek__lambang { width: 50px; height: 50px; flex: none; }
.merek__kata b { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: .06em; line-height: 1.1; }
.merek__kata span { display: block; font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--redup); }

/* 6. Navigasi ------------------------------------------------------------ */
.menu { flex: none; }
.menu__daftar { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
.menu__daftar > li { flex: none; }
.menu__daftar > li > a {
  display: block;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  color: var(--koral);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
}
.menu__daftar > li > a:hover { color: var(--koral-tua); border-bottom-color: rgba(239, 91, 83, .4); }
.menu__daftar > li > a.aktif { font-weight: 600; border-bottom-color: var(--koral); }

.menu__sakelar {
  display: none;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  flex: none;
  padding: 10px 18px;
  border: 2px solid var(--koral);
  border-radius: var(--r-kecil);
  background: #fff;
  color: var(--koral);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu__sakelar svg { width: 18px; height: 18px; }

/* 7. Sorot --------------------------------------------------------------- */
.sorot { padding: 62px 0 56px; }
.sorot h1 {
  color: var(--koral);
  font-size: clamp(2.75rem, 1.5rem + 5.4vw, 5.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
}
.sorot__anotasi { margin-top: 30px; font-size: 1.0625rem; font-weight: 600; color: var(--navy); }
.sorot__ket { margin-top: 22px; max-width: 76ch; font-size: 1.0625rem; }
.sorot__ket + .sorot__ket { margin-top: 12px; }
.sorot__aksi { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* 8. Judul berkuas ------------------------------------------------------- */
/* Sapuan kuas tebal di bawah judul. Satu bentuk topeng, warnanya diganti
   lewat peubah supaya tiap kartu bisa beda warna seperti pada acuan. */
.kuas { display: inline-block; }
.kuas::after {
  content: "";
  display: block;
  height: 11px;
  margin-top: 4px;
  background: var(--warna-kuas, var(--teal-terang));
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M5 9.2C72 3.4 152 2.2 295 4.6' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M5 9.2C72 3.4 152 2.2 295 4.6' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.kuas--koral  { --warna-kuas: var(--koral); }
.kuas--biru   { --warna-kuas: var(--biru); }
.kuas--teal   { --warna-kuas: var(--teal-terang); }
.kuas--kuning { --warna-kuas: var(--kuning); }
.kuas--ungu   { --warna-kuas: var(--ungu); }
.kuas--hijau  { --warna-kuas: var(--hijau); }

.judul-seksi { font-size: clamp(2rem, 1.35rem + 2.8vw, 3.5rem); font-weight: 700; }
.judul-tengah { max-width: 860px; margin: 0 auto 44px; text-align: center; }
.judul-tengah p { margin-top: 18px; }
.kepala-seksi { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; margin-bottom: 38px; }
.kepala-seksi p { margin-top: 16px; max-width: 66ch; }

.label { display: inline-block; margin-bottom: 12px; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.label--terang { color: rgba(255,255,255,.82); }

/* 9. Pita seksi ---------------------------------------------------------- */
/* Bidang biru abu muda: gambar membulat di kiri, tulisan di kanan. */
.pita-seksi { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; gap: 48px; }
.pita-seksi__gambar img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-sedang); background: #fff; }
.pita-seksi__teks h2 { font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem); }
.pita-seksi__teks p { margin-top: 20px; font-size: 1.0625rem; }
.pita-seksi__teks .tombol { margin-top: 28px; }
.pita-seksi--balik .pita-seksi__gambar { order: 2; }

/* 10. Kartu pilar -------------------------------------------------------- */
.kisi-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.kisi-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.kisi-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }

.pilar { display: flex; flex-direction: column; min-width: 0; }
.pilar__ubin {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 26px;
  border-radius: var(--r-sedang);
  background: var(--kabut-muda);
  text-align: center;
  overflow: hidden;
}
.pilar__ubin span { font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.14; }
.pilar__ubin--hijau  { background: #e7f3e8; color: #2f6b39; }
.pilar__ubin--biru   { background: #ddeff9; color: #1c6a94; }
.pilar__ubin--merah  { background: #fdeceb; color: #b83a34; }
.pilar__ubin--kuning { background: #fdf3dc; color: #9a6f10; }
.pilar__ubin--ungu   { background: #efeafa; color: #5c4a95; }
.pilar__ubin--jingga { background: #fdeee0; color: #a95d1b; }
.pilar h3 { margin-top: 22px; font-size: clamp(1.375rem, 1.15rem + .9vw, 1.75rem); }
.pilar p { margin-top: 14px; font-size: .9375rem; color: var(--tinta-lembut); }
/* Tombol didorong ke dasar kartu supaya seluruh kartu dalam satu baris
   tombolnya sejajar, walau panjang judul dan teksnya berbeda-beda. Jangan
   memberi margin-top pada tombol ini — margin itu membatalkan auto. */
.pilar .tombol { margin-top: auto; }
.pilar__ruang { padding: 22px 0; }

/* 11. Kartu berita ------------------------------------------------------- */
.kartu { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--garis); border-radius: var(--r-sedang); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.kartu:hover { transform: translateY(-4px); box-shadow: var(--bayang-naik); }
.kartu__gambar { display: block; overflow: hidden; }
.kartu__gambar img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--kabut); transition: transform .5s ease; }
.kartu:hover .kartu__gambar img { transform: scale(1.05); }
.kartu__isi { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 28px; }
.kartu__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .8125rem; color: var(--redup); }
.kartu h3 { margin-top: 12px; font-size: 1.1875rem; line-height: 1.34; }
.kartu h3 a { color: var(--tinta); }
.kartu:hover h3 a { color: var(--koral); }
.kartu p { margin-top: 12px; font-size: .9375rem; color: var(--redup); }
.kartu .tautan { margin-top: auto; padding-top: 18px; font-size: .9375rem; }

.lencana { display: inline-block; padding: 4px 13px; border-radius: var(--r-pil); background: var(--koral-muda); color: var(--koral-tua); font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.lencana--teal { background: #ddeced; color: var(--teal); }
.lencana--biru { background: var(--biru-sorot); color: #1c6a94; }
.lencana--kuning { background: #fdf3dc; color: #8a620c; }

/* 12. Angka -------------------------------------------------------------- */
.angka-baris { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.angka { min-width: 0; padding: 30px 28px; background: #fff; border-radius: var(--r-sedang); text-align: center; }
.angka strong { display: block; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 700; color: var(--koral); line-height: 1.04; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.angka span { display: block; margin-top: 8px; font-size: .9375rem; color: var(--redup); }

/* 13. Akordeon ----------------------------------------------------------- */
/* Daftar tanya-jawab di atas gambar lanskap, dengan tanda tambah di kanan. */
.tanya { position: relative; padding: 78px 0; background: var(--teal); overflow: hidden; }
.tanya__latar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.tanya__isi { position: relative; }
.tanya h2 { color: #fff; }
.tanya__daftar { margin-top: 34px; border-top: 1px solid rgba(255,255,255,.55); }
.tanya__butir { border-bottom: 1px solid rgba(255,255,255,.55); }
.tanya__butir summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  color: #fff;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.tanya__butir summary::-webkit-details-marker { display: none; }
.tanya__butir summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: #fff;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v18h-2z'/%3E%3Cpath d='M3 11h18v2H3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v18h-2z'/%3E%3Cpath d='M3 11h18v2H3z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: transform .2s ease;
}
.tanya__butir[open] summary::after { transform: rotate(45deg); }
.tanya__jawab { padding: 0 4px 24px; color: rgba(255,255,255,.94); }
.tanya__jawab p + p { margin-top: 12px; }
.tanya__jawab a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* 14. Kepala halaman ----------------------------------------------------- */
.kepala-halaman { padding: 34px 0 10px; }
.remah { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: .875rem; color: var(--redup); }
.remah a { color: var(--koral); }
.remah a:hover { text-decoration: underline; }
.judul-halaman { margin-top: 24px; color: var(--koral); font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4rem); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }
.kepala-halaman__ket { margin-top: 20px; max-width: 70ch; font-size: 1.0625rem; }
.kepala-halaman__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; font-size: .875rem; color: var(--redup); }

/* 15. Isi artikel -------------------------------------------------------- */
.isi-dua { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 52px; align-items: start; }
/* Tanpa min-width:0 kolom kisi ikut melebar mengikuti isi terlebar di
   dalamnya, misalnya tabel yang lebar minimalnya ratusan piksel. */
.utama, .samping { min-width: 0; }

.utama > * + * { margin-top: 20px; }
.utama h2 { margin-top: 42px; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); }
.utama h3 { margin-top: 28px; font-size: 1.25rem; }
.utama p { font-size: 1.0625rem; line-height: 1.82; }
.utama ul, .utama ol { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.utama li { position: relative; padding-left: 30px; font-size: 1.0625rem; line-height: 1.76; }
.utama ul li::before { content: ""; position: absolute; left: 4px; top: .74em; width: 9px; height: 9px; border-radius: 50%; background: var(--koral); }
.utama ol { counter-reset: urut; }
.utama ol li::before {
  counter-increment: urut;
  content: counter(urut);
  position: absolute;
  left: 0;
  top: .2em;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--koral-muda);
  color: var(--koral-tua);
  font-size: .6875rem;
  font-weight: 700;
}
.utama blockquote { margin: 0; padding: 26px 30px; background: var(--kabut); border-radius: var(--r-sedang); border-left: 5px solid var(--teal-terang); font-size: 1.125rem; color: var(--tinta); }
.utama blockquote cite { display: block; margin-top: 12px; font-size: .8125rem; font-style: normal; font-weight: 600; color: var(--redup); }
.utama figure { margin: 30px 0; }
.utama figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sedang); background: var(--kabut); }
.utama figcaption { margin-top: 10px; font-size: .8125rem; color: var(--redup); }
.utama a { text-decoration: underline; text-underline-offset: 3px; }

.catatan { display: flex; gap: 16px; padding: 24px 28px; background: var(--kabut); border-radius: var(--r-sedang); }
.catatan__ikon { flex: none; width: 25px; height: 25px; color: var(--teal); }
.catatan h3 { margin: 0 0 7px; font-size: 1.0625rem; }
.catatan p { font-size: .9375rem; }
.catatan p + p { margin-top: 8px; }
.catatan--penting { background: var(--koral-muda); }
.catatan--penting .catatan__ikon { color: var(--koral-tua); }
.catatan--penting h3 { color: var(--koral-tua); }

/* 16. Bilah samping ------------------------------------------------------ */
.samping { display: grid; gap: 24px; position: sticky; top: 110px; }
.kotak { background: #fff; border: 1px solid var(--garis); border-radius: var(--r-sedang); overflow: hidden; }
.kotak__judul { padding: 16px 22px; background: var(--teal); color: #fff; font-size: .9375rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.kotak__judul--koral { background: var(--koral); }
.kotak__isi { padding: 20px 22px 24px; }
.kotak p { font-size: .9375rem; color: var(--redup); }
.kotak .tombol { width: 100%; margin-top: 14px; }

.daftar-tautan { display: grid; }
.daftar-tautan a { padding: 12px 0; border-bottom: 1px solid var(--garis); font-size: .9375rem; font-weight: 500; color: var(--tinta); line-height: 1.5; }
.daftar-tautan a:last-child { border-bottom: 0; }
.daftar-tautan a:hover { color: var(--koral); }

/* 17. Tabel -------------------------------------------------------------- */
.tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--r-sedang); background: #fff; }
.tabel { min-width: 520px; font-size: .9375rem; }
.tabel caption { text-align: left; padding: 16px 20px; font-size: .8125rem; color: var(--redup); border-bottom: 1px solid var(--garis); }
.tabel th, .tabel td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--garis); }
.tabel thead th { background: var(--teal); color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:nth-child(even) { background: var(--kabut-muda); }
.tabel td:first-child, .tabel tbody th { font-weight: 600; color: var(--tinta); }
.tabel .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 18. Borang ------------------------------------------------------------- */
.borang { display: grid; gap: 18px; }
.borang__baris { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.borang label { display: block; margin-bottom: 7px; font-size: .875rem; font-weight: 600; color: var(--tinta); }
.borang input, .borang select, .borang textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r-kecil);
  background: #fff;
  font-family: inherit;
  font-size: .9375rem;
  color: var(--tinta);
}
.borang input:focus, .borang select:focus, .borang textarea:focus { outline: 0; border-color: var(--koral); box-shadow: 0 0 0 3px rgba(239, 91, 83, .16); }
.borang textarea { min-height: 156px; resize: vertical; }

/* 19. Kaki --------------------------------------------------------------- */
/* Kaki halaman acuan berwarna biru kehijauan tua dengan tautan koral. */
.kaki { background: var(--teal); color: rgba(255,255,255,.86); }
.kaki a { color: var(--koral); }
.kaki a:hover { color: #fff; }
.kaki__atas { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); gap: 44px; padding: 62px 0 48px; }
.kaki h2 { color: #fff; font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); }
.kaki__ket { margin-top: 20px; font-size: 1rem; }
.kaki address { margin-top: 20px; font-style: normal; line-height: 1.9; }
.kaki address a { color: rgba(255,255,255,.86); }
.kaki address a:hover { color: #fff; }
.kaki__judul { margin-bottom: 16px; color: #fff; font-size: 1.0625rem; font-weight: 600; }
.kaki__daftar { display: grid; gap: 11px; }

.kaki__bawah { display: flex; align-items: center; justify-content: space-between; gap: 14px 26px; flex-wrap: wrap; padding: 20px 0 28px; border-top: 1px solid rgba(255,255,255,.24); font-size: .8125rem; }
.sosial { display: flex; gap: 10px; }
.sosial a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; }
.sosial a:hover { background: var(--koral); color: #fff; }
.sosial svg { width: 17px; height: 17px; }

/* 20. Ke atas ------------------------------------------------------------ */
.ke-atas {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 55;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--koral);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.ke-atas--tampak { opacity: 1; pointer-events: auto; transform: none; }
.ke-atas:hover { background: var(--teal); }
.ke-atas svg { width: 19px; height: 19px; }

/* 21. Layar kecil -------------------------------------------------------- */
/* Menu dirapatkan dulu sebelum dilipat, supaya tetap satu baris selama masih
   muat. */
@media (max-width: 1150px) {
  .menu__daftar { gap: 16px; }
  .menu__daftar > li > a { font-size: .9375rem; }
}

/* Di bawah ini tujuh butir menu sudah tidak muat sebaris, jadi dilipat
   menjadi tombol Menu daripada dipaksa terbelah dua baris tak rata. */
@media (max-width: 1050px) {
  .kepala__isi { position: relative; }
  .menu { margin-left: auto; }
  .menu__daftar { display: none; }
  .menu__sakelar { display: inline-flex; }
  .menu.terbuka .menu__daftar {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 12px 0 18px;
    background: #fff;
    box-shadow: var(--bayang-naik);
  }
  .menu.terbuka .menu__daftar > li > a { padding: 11px 18px; }
  .menu.terbuka .menu__daftar > li > a.aktif { border-bottom: 0; color: var(--koral-tua); font-weight: 700; }

  .pita-seksi { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pita-seksi__gambar { max-width: 420px; }
  .pita-seksi--balik .pita-seksi__gambar { order: 0; }
  .isi-dua { grid-template-columns: minmax(0, 1fr) 290px; gap: 34px; }
  .kaki__atas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}

@media (max-width: 900px) {
  .kisi-3, .kisi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .angka-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .isi-dua { grid-template-columns: minmax(0, 1fr); }
  .samping { position: static; }
}

@media (max-width: 720px) {
  .wadah { padding: 0 20px; }

  .pita-atas { padding: 12px 44px; font-size: .875rem; }
  .kepala__isi { min-height: 78px; }
  .merek__lambang { width: 46px; height: 46px; }

  .kisi-2, .kisi-3, .kisi-4 { grid-template-columns: minmax(0, 1fr); }
  .blok { padding: 52px 0; }
  .blok--rapat { padding: 40px 0; }
  .sorot { padding: 42px 0 38px; }
  .tanya { padding: 54px 0; }

  .kartu__isi { padding: 20px 20px 24px; }
  .kotak__isi { padding: 18px 18px 22px; }
  .catatan { gap: 13px; padding: 20px 20px; }
  .utama blockquote { padding: 22px 22px; }
  .utama figure { margin: 24px 0; }

  .borang__baris { grid-template-columns: minmax(0, 1fr); }
  .kaki__atas { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 46px 0 36px; }
  .kaki__bawah { justify-content: center; text-align: center; }
}

@media (max-width: 520px) {
  .wadah { padding: 0 16px; }

  .merek { gap: 10px; }
  .merek__lambang { width: 40px; height: 40px; }
  .merek__kata b { font-size: 1rem; }

  .angka-baris { grid-template-columns: minmax(0, 1fr); }
  .utama p, .utama li { font-size: 1rem; }
  .tabel { min-width: 420px; }
  .kuas::after { height: 9px; }
  .ke-atas { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}