/* Laman awam v2 AI Math Solver 2.0: "helaian yang sudah disemak guru" (docs/reka/LAMAN-AWAM.md, D42). Warna = pemboleh ubah dari
   laman/konfig.json (disuntik bina.py ke :root); fail ini tidak menulis warna sendiri. Merah = pen guru: HANYA baris salah, tanda
   salah, dan satu garis bawah pada skor TIMSS kini. Butang = dakwat pepejal. Tiada penapis, tiada kaca, tiada animasi selain pen. */
@font-face { font-family: "Newsreader"; src: url(fon/newsreader-latin-wght.woff2) format("woff2"); font-weight: 200 800;
  font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2212, U+2215; }
@font-face { font-family: "Newsreader"; src: url(fon/newsreader-latin-wght-italic.woff2) format("woff2"); font-weight: 200 800;
  font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+2215; }
@font-face { font-family: "Noto Serif Thai"; src: url(fon/noto-serif-thai-wght.woff2) format("woff2"); font-weight: 100 900;
  font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans"; src: url(fon/ibm-plex-sans-latin-400.woff2) format("woff2"); font-weight: 400;
  font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2212; }
@font-face { font-family: "IBM Plex Sans"; src: url(fon/ibm-plex-sans-latin-600.woff2) format("woff2"); font-weight: 600;
  font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2212; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url(fon/ibm-plex-sans-thai-400.woff2) format("woff2"); font-weight: 400;
  font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url(fon/ibm-plex-sans-thai-600.woff2) format("woff2"); font-weight: 600;
  font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }

:root {
  --serif: "Newsreader", "Noto Serif Thai", Georgia, serif;
  --sans: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
  /* skala tipografi: nisbah ≈ 1.25 atas asas 17 px; paparan dan angka diapit ikut lebar */
  --t-kecil: 0.875rem;
  --t-asas: 1.0625rem;
  --t-besar: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --t-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  --t-h1: clamp(1.875rem, 1.2rem + 3vw, 4rem);
  --t-angka: clamp(3.5rem, 2.2rem + 5vw, 6rem);
  --t-jalan: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --baris: 1.6;
  --tepi-halaman: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --margin: 15rem;          /* lajur tajuk di kiri garis margin buku latihan (desktop) */
  --lebar: 78rem;
  --sentuh: 44px;
  --sentuh-pad: 0.875rem;   /* padding menegak pautan sebaris supaya kotak sentuh ≥ var(--sentuh) */
  --baris-buku: 2.45rem;    /* tinggi satu baris jalan kira pada helaian */
  --lengkung: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--kertas); color: var(--dakwat);
  font: 400 var(--t-asas)/var(--baris) var(--sans);
  font-variant-numeric: lining-nums; text-rendering: optimizeLegibility;
}
html:lang(th) { --baris: 1.75; line-break: strict; word-break: normal; }
::selection { background: var(--pensel-latar); color: var(--dakwat); }
a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; color: var(--dakwat); text-decoration-thickness: 1px;
  text-underline-offset: 0.22em; text-decoration-color: var(--dakwat-3); }
a:hover { text-decoration-color: var(--dakwat); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 2px; }
[id] { scroll-margin-top: 1.5rem; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; text-wrap: balance; margin: 0; }
p { margin: 0 0 1em; max-width: 66ch; }
.langkau { position: absolute; left: 1rem; top: -4rem; background: var(--helaian); padding: 0.6rem 1rem; z-index: 2;
  border: 1px solid var(--tepi-kuat); }
.langkau:focus { top: 1rem; }

/* kepala: pepejal, satu baris walau di 320 px; pemilih bahasa = tiga pautan teks kecil */
.kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  max-width: var(--lebar); margin: 0 auto; padding: 0.375rem var(--tepi-halaman);
}
.jenama { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; text-decoration: none; letter-spacing: -0.01em;
  min-height: var(--sentuh); display: inline-flex; align-items: center; white-space: nowrap; min-width: 0; }
.bahasa ul, .kaki ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.bahasa ul { flex-wrap: nowrap; }   /* tiga pautan kekal satu baris; jenama + bahasa muat 320 px (bawah) */
.bahasa a, .kaki nav a {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--sentuh); min-width: var(--sentuh);
  padding: 0 0.5rem; font-size: var(--t-kecil); text-decoration: none; color: var(--dakwat-2);
}
.bahasa a:hover, .kaki nav a:hover { color: var(--dakwat); text-decoration: underline; }
.bahasa a[aria-current="page"], .kaki nav a[aria-current="page"] { color: var(--dakwat); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }

/* hero. Telefon: tajuk → untuk siapa → helaian (dipendekkan) → butang → bukti, semua dalam skrin pertama 390 × 664.
   Desktop: teks di kiri, helaian di kanan menegak sepanjang hero. */
.hero {
  max-width: var(--lebar); margin: 0 auto; padding: 0.5rem var(--tepi-halaman) clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem;
  grid-template-areas: "kepala" "helaian" "tindak" "lagi";
}
.hero-kepala { grid-area: kepala; }
.hero .helaian { grid-area: helaian; }
.hero-tindak { grid-area: tindak; }
.hero-lagi { grid-area: lagi; padding-top: 1rem; }
h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.022em; max-width: 17ch; margin-bottom: 0.6rem; }
html:lang(th) h1 { line-height: 1.38; letter-spacing: 0; max-width: 22ch; }
.hero-untuk { font-size: var(--t-asas); color: var(--dakwat-2); margin: 0; max-width: 44ch; }
.hero-ayat { font-size: var(--t-besar); max-width: 42ch; }
.tindakan { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.butang {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--sentuh); padding: 0.5rem 1rem;
  border: 1.5px solid var(--dakwat); border-radius: 3px; color: var(--dakwat); background: var(--helaian);
  font-weight: 600; font-size: var(--t-kecil); line-height: 1.25; text-decoration: none; text-align: center; flex: 1 1 9.5rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.butang:hover { background: var(--meja); text-decoration: none; }
.butang-utama { background: var(--dakwat); color: var(--helaian); }
.butang-utama:hover { background: var(--dakwat-2); }
.bukti-hero { font-size: var(--t-kecil); color: var(--dakwat-2); margin: 0; max-width: 46ch; }
/* sasaran sentuh ≥ 44 px tanpa menolak baris bukti ke bawah skrin pertama: padding membesarkan kotak, margin negatif membatalkannya */
.bukti-hero a { white-space: nowrap; display: inline-block; padding-block: var(--sentuh-pad); margin-block: calc(-1 * var(--sentuh-pad)); }
.nota-pensel { font-family: var(--serif); font-style: italic; font-size: 1.0625rem; color: var(--pensel); max-width: 46ch; }
.nota-pensel::before { content: ""; display: inline-block; width: 1.4rem; height: 1px; background: var(--pensel);
  vertical-align: 0.3em; margin-right: 0.5rem; }
html:lang(th) .nota-pensel { font-style: normal; }

@media (max-width: 359px) {
  .kepala { gap: 0.25rem; }
  .jenama { font-size: 1.0625rem; }
  .bahasa a { padding: 0 0.25rem; }
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); column-gap: clamp(2.5rem, 1rem + 4vw, 5.5rem); row-gap: 0;
    grid-template-areas: "kepala helaian" "tindak helaian" "lagi helaian"; grid-template-rows: auto auto 1fr;
    padding-top: clamp(2rem, 1rem + 2.5vw, 4rem); align-items: start;
  }
  .hero-kepala { margin-bottom: 1.75rem; }
  h1 { margin-bottom: 1rem; }
  .hero-untuk { font-size: var(--t-besar); }
  .tindakan { gap: 0.75rem; margin-bottom: 1rem; }
  .butang { flex: 0 0 auto; padding: 0.7rem 1.4rem; font-size: var(--t-asas); min-height: 52px; }
  .bukti-hero { font-size: var(--t-asas); }
  .hero-lagi { padding-top: 2rem; }
}

/* helaian: sehelai kertas latihan (tanpa garis buku, D42), margin biru; baris pertama salah dipen merah */
.helaian {
  margin: 0; position: relative; background: var(--helaian); border: 1px solid var(--tepi);
  border-radius: 3px; box-shadow: var(--bayang-helaian);
  padding: 0.5rem clamp(0.9rem, 0.5rem + 2vw, 2rem) 0.75rem clamp(2.75rem, 2.2rem + 2vw, 4.5rem);
}
.helaian::before { /* garis margin buku latihan */
  content: ""; position: absolute; top: 0; bottom: 0; left: clamp(2.1rem, 1.6rem + 1.6vw, 3.5rem); width: 1px; background: var(--garis-buku);
}
.helaian-kepala { display: flex; align-items: center; gap: 0.75rem; font-size: var(--t-kecil); color: var(--dakwat-2); min-height: var(--baris-buku); }
.kabur { display: inline-block; width: 7.5rem; height: 0.9rem; border-radius: 2px; background: var(--tepi); }
.soalan { margin: 0; min-height: var(--baris-buku); display: flex; align-items: center; font-weight: 600; font-size: var(--t-kecil); }
.jalan-kira { list-style: none; margin: 0; padding: 0; counter-reset: b; }
.jalan-kira li { position: relative; min-height: var(--baris-buku); display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 1rem; padding-top: 0.3rem; counter-increment: b; }
.jalan-kira li::before { content: counter(b); position: absolute; left: -1.8rem; top: 0.7rem; font-size: 0.75rem; color: var(--dakwat-3);
  font-variant-numeric: tabular-nums; }
.jalan { position: relative; font-family: var(--serif); font-style: italic; font-size: var(--t-jalan); line-height: 1.5;
  white-space: nowrap; color: var(--dakwat); }
.b-ikut .jalan { color: var(--dakwat-3); }
.pen { position: absolute; left: -0.2rem; bottom: -0.1rem; width: calc(100% + 0.6rem); height: 0.7rem; overflow: visible; }
.pen path, .pangkah path, .garis-merah path { fill: none; stroke: var(--merah); stroke-width: 2.6; stroke-linecap: round;
  vector-effect: non-scaling-stroke; }
.pen path { stroke-dasharray: 260; stroke-dashoffset: 0; animation: pen 0.6s var(--lengkung) 0.4s both; }
.pangkah { position: absolute; left: -2.1rem; top: 0.55rem; width: 1.1rem; height: 1.1rem; }
.b-salah::before { visibility: hidden; }
@keyframes pen { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
.nota-salah { display: flex; flex-direction: column; flex: 1 1 12rem; min-width: 0; padding: 0.15rem 0 0.4rem; }
.nota-tanda { font-size: 0.8125rem; font-weight: 600; color: var(--merah); }
.nota-nama { font-family: var(--serif); font-size: 1.125rem; line-height: 1.3; color: var(--dakwat); }
.nota-ikut { font-size: 0.8125rem; color: var(--dakwat-3); flex: 1 1 10rem; }
.latihan { margin: 0.4rem 0 0; min-height: var(--baris-buku); display: flex; align-items: center; font-size: var(--t-kecil);
  font-weight: 600; color: var(--hijau); }
.helaian figcaption { margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid var(--tepi); font-size: 0.75rem; color: var(--dakwat-3); }
@media (max-width: 959px) {
  /* telefon/tablet: helaian pendek supaya baris merah + butang + bukti muat skrin pertama */
  .helaian .helaian-kepala, .helaian .soalan, .helaian .b-lewat, .helaian .latihan { display: none; }
  .helaian { padding-top: 0.25rem; }
}
@media (min-width: 960px) {
  /* desktop: helaian ialah objek terbesar di skrin pertama; mata juri pergi ke tanda merah dahulu */
  .hero .helaian { --baris-buku: 3.1rem; --t-jalan: clamp(1.75rem, 1rem + 1.2vw, 2.25rem);
    transform: rotate(-0.5deg); margin-top: 0.25rem; padding-top: 0.75rem; padding-bottom: 1rem; }
  .nota-tanda { font-size: var(--t-kecil); }
  .nota-nama { font-size: 1.375rem; }
  .nota-ikut, .helaian .soalan, .helaian-kepala, .latihan { font-size: var(--t-asas); }
  .pangkah { width: 1.35rem; height: 1.35rem; top: 0.85rem; }
  .jalan-kira li::before { top: 1rem; font-size: var(--t-kecil); }
}

/* seksyen: tajuk di margin kiri buku latihan, isi di kanan garis */
.seksyen {
  max-width: var(--lebar); margin: 0 auto; padding: clamp(2.75rem, 2rem + 2.5vw, 4.5rem) var(--tepi-halaman);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 3rem; border-top: 1px solid var(--tepi);
}
@media (min-width: 960px) {
  .seksyen { grid-template-columns: var(--margin) minmax(0, 1fr); }
  .seksyen .isi { border-left: 1px solid var(--garis-buku); padding-left: 3rem; }
}
.seksyen h2 { font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.015em; }
html:lang(th) .seksyen h2 { line-height: 1.45; letter-spacing: 0; }
.isi { min-width: 0; }
.isi > :last-child { margin-bottom: 0; }
.besar { font-size: var(--t-besar); line-height: 1.5; }
html:lang(th) .besar { line-height: 1.75; }
.sumber { font-size: var(--t-kecil); color: var(--dakwat-2); }

/* (a) masalah: dua skor besar, garis pen merah di bawah skor kini */
.angka-masalah { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1.25rem; margin: 0 0 1.5rem; max-width: none; }
.skor { display: flex; flex-direction: column; }
.skor .nombor { position: relative; font-family: var(--serif); font-size: var(--t-angka); font-weight: 500; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.skor .tahun { font-size: var(--t-kecil); color: var(--dakwat-2); margin-top: 0.6rem; }
.skor-lalu .nombor { color: var(--dakwat-3); }
.skor-aras { margin-left: auto; padding-left: 1.25rem; border-left: 1px dashed var(--pensel); }
.skor-aras .nombor { font-size: calc(var(--t-angka) * 0.5); color: var(--pensel); }
.skor-aras .tahun { color: var(--pensel); }
.anak-panah { width: clamp(2rem, 1.5rem + 2vw, 3rem); align-self: center; margin-top: -1.5rem; }
.anak-panah path { fill: none; stroke: var(--dakwat-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 639px) { .skor-aras { display: none; } }  /* telefon: tanda aras dibaca pada skala di bawah */
.garis-merah { position: absolute; left: -2%; bottom: -0.3rem; width: 104%; height: 0.6rem; overflow: visible; }

.skala { display: block; width: 100%; max-width: 36rem; height: auto; margin: 0.5rem 0 1.75rem; overflow: visible; }
.skala .paksi, .skala .tik { stroke: var(--dakwat-3); stroke-width: 1.2; }
.skala .tik-t { font: 400 15px var(--sans); fill: var(--dakwat-2); text-anchor: middle; font-variant-numeric: tabular-nums; }
.skala .rendah { stroke: var(--pensel); stroke-width: 1.5; stroke-dasharray: 4 4; }
.skala .rendah-t { font: 600 15px var(--sans); fill: var(--pensel); }
.skala .anak { fill: none; stroke: var(--dakwat); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skala .titik-lalu { fill: var(--kertas); stroke: var(--dakwat-2); stroke-width: 2; }
.skala .titik-kini { fill: var(--dakwat); }
.skala .tahun { font: 600 16px var(--sans); fill: var(--dakwat); text-anchor: middle; }

/* (b) untuk siapa: tiga peranan, nama serif di kiri */
.untuk { margin: 1.5rem 0 0; max-width: 46rem; }
.untuk div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--tepi); }
.untuk dt { font-family: var(--serif); font-size: 1.3125rem; font-weight: 600; line-height: 1.3; }
.untuk dd { margin: 0; color: var(--dakwat-2); }
@media (min-width: 640px) { .untuk div { grid-template-columns: 11rem minmax(0, 1fr); } }

/* (c) urutan hasil: bernombor kerana ia memang urutan; langkah bergambar = tangkapan papan kelas demo */
.langkah { margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: l; }
.langkah li { counter-increment: l; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.75rem;
  padding: 1.1rem 0; border-top: 1px solid var(--tepi); }
.langkah li::before { content: counter(l); font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; color: var(--dakwat-2);
  font-variant-numeric: tabular-nums; }
.langkah p { margin: 0; font-size: var(--t-besar); line-height: 1.45; max-width: 34ch; }
.langkah .tangkapan { grid-column: 2; margin: 1rem 0 0; }
.tangkapan img { display: block; width: 100%; height: auto; border: 1px solid var(--tepi); border-radius: 3px;
  background: var(--helaian); }
@media (min-width: 960px) {
  .langkah li.ada-gambar { grid-template-columns: 2.5rem minmax(0, 0.8fr) minmax(0, 1.2fr); padding: 1.75rem 0; }
  .langkah li.ada-gambar .tangkapan { grid-column: 3; margin: 0; }
}

/* (d) bukti: setiap set = sehelai kertas, jenis set ditulis besar di atasnya; jadual bertukar jadi baris bertindan bila sempit */
.set { margin: 1.5rem 0 0; background: var(--helaian); border: 1px solid var(--tepi); border-radius: 3px;
  padding: 1.25rem clamp(1rem, 0.6rem + 1.5vw, 1.75rem); container-type: inline-size; min-width: 0; }
.set-dua { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.5rem; }
@media (min-width: 1100px) { .set-dua { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .set-dua .set { margin-top: 1.5rem; } }
.jenis { display: inline-block; margin: 0 0 0.75rem; padding: 0.15rem 0.6rem; border: 1.5px solid currentColor; border-radius: 3px;
  font-size: var(--t-kecil); font-weight: 600; color: var(--dakwat-2); }
.set[data-jenis="sebenar"] .jenis { color: var(--hijau); }
.set h3 { font-size: 1.375rem; line-height: 1.25; margin-bottom: 0.5rem; }
.set .nota { font-size: var(--t-kecil); color: var(--dakwat-2); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.6rem 0.75rem 0.6rem 0; border-top: 1px solid var(--tepi); vertical-align: baseline; }
thead th { font-size: 0.8125rem; font-weight: 600; color: var(--dakwat-2); border-top: 0; }
tbody th { font-weight: 400; }
td { white-space: nowrap; color: var(--dakwat-2); }
td.hasil { font-family: var(--serif); font-size: 1.625rem; font-weight: 500; color: var(--dakwat); }
@container (max-width: 34rem) {
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table, tbody, tr, th, td { display: block; }
  tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--tepi); }
  tbody th { grid-column: 1 / -1; border: 0; padding: 0 0 0.25rem; }
  td { border: 0; padding: 0; white-space: normal; font-size: var(--t-kecil); }
  td.hasil { grid-row: span 2; align-self: center; }
  td:not(.hasil)::before { content: attr(data-lajur) " "; color: var(--dakwat-3); }
}
.isi > .nota-pensel { margin-top: 2rem; }

/* (e) status: senarai semak, bukan sepanduk */
.status { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.status li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.75rem; padding: 0.9rem 0; border-top: 1px solid var(--tepi);
  font-size: var(--t-besar); line-height: 1.45; }
.status li:first-child { border-top: 0; padding-top: 0; }
.tanda { width: 1.6rem; height: 1.6rem; margin-top: 0.05rem; }
.tanda path, .tanda circle { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.status-sudah .tanda path { stroke: var(--hijau); }
.status-belum .tanda circle { stroke: var(--dakwat-3); stroke-dasharray: 3 3.2; stroke-width: 2; }
.status-belum span { color: var(--dakwat-2); }

/* (h) video + poster */
.video { margin: 0 0 1.25rem; max-width: 52rem; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--dakwat); border-radius: 3px; }
.video figcaption { margin-top: 0.5rem; font-size: var(--t-kecil); color: var(--dakwat-2); }
.pautan-bahan, .pautan-teks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.pautan-bahan a, .pautan-teks a { display: inline-flex; align-items: center; min-height: var(--sentuh); }

/* (g) pencipta */
.pencipta-nama { font-family: var(--serif); font-size: var(--t-h2); line-height: 1.2; margin-bottom: 0.75rem; }

.kaki { max-width: var(--lebar); margin: 0 auto; padding: 2.5rem var(--tepi-halaman) 3rem; border-top: 1px solid var(--tepi);
  font-size: var(--t-kecil); color: var(--dakwat-2); }
.kaki nav { margin-left: -0.5rem; }

@media (prefers-reduced-motion: reduce) { .pen path { animation: none; } html { scroll-behavior: auto; } }
@media print { .kepala nav, .kaki nav, .langkau, .tindakan { display: none; } .helaian { transform: none; box-shadow: none; } }