/* Panduan percuma: the Suis look for reading pages.
   Tokens, type and the top bar copy src/pages/index.astro, the reference. Change them there first, then here. */

@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2"); font-weight: 400 800; font-stretch: 62% 100%; font-display: optional }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: optional }
@font-face { font-family: "Archivo Fallback"; font-weight: 400 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 98.47%; ascent-override: 89.17%; descent-override: 21.33%; line-gap-override: 0% }
@font-face { font-family: "Archivo Fallback"; font-weight: 600 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); size-adjust: 95.15%; ascent-override: 92.28%; descent-override: 22.07%; line-gap-override: 0% }
@font-face { font-family: "Archivo Display Fallback"; font-weight: 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); size-adjust: 69.12%; ascent-override: 127.03%; descent-override: 30.38%; line-gap-override: 0% }
@font-face { font-family: "Instrument Serif Fallback"; font-style: italic; font-weight: 400; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("Tinos Italic"); size-adjust: 90.41%; ascent-override: 109.5%; descent-override: 34.29%; line-gap-override: 0% }

:root {
  color-scheme: dark;
  --ink: oklch(14.56% 0.0028 68.6);
  --ink-2: oklch(18.47% 0.0077 67.3);
  --paper: oklch(92.82% 0.0211 79.1);
  --muted: oklch(65.83% 0.0223 74.6);
  --lampu: oklch(81.84% 0.1529 72.8);
  --line: color-mix(in oklch, var(--paper) 14%, transparent);
  --sans: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --display: "Archivo", "Archivo Display Fallback", "Arial Narrow", sans-serif;
  --serif: "Instrument Serif", "Instrument Serif Fallback", "Times New Roman", serif;
  --bar: 3rem;
  --bar-full: calc(var(--bar) + env(safe-area-inset-top, 0px));
  --gutter: max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --content: 40rem;
  --text-body: clamp(1.0625rem, 1.0417rem + 0.0926vw, 1.125rem);
  --text-label: 0.6875rem;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; min-width: 0 }
:root {
  scroll-padding-block-start: calc(var(--bar-full) + 1rem);
  text-wrap: pretty;
  overflow-wrap: break-word;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--ink);
}
body { margin: 0; min-height: 100svh; background: var(--ink); color: var(--paper); font: 400 var(--text-body)/1.65 var(--sans) }
body::before { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E") }
a { color: inherit; text-underline-offset: 0.2em }
a, button, summary { touch-action: manipulation }
button { font: inherit; color: inherit; user-select: none; -webkit-user-select: none }
:focus-visible { outline: 2px solid var(--lampu); outline-offset: 3px }
h1, h2, h3, p, ul, ol, figure, pre { margin: 0 }
h1, h2, h3 { font-weight: inherit; text-wrap: balance }
em { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: normal; text-transform: none; letter-spacing: 0 }
strong { font-weight: 600 }
.label { font: 500 var(--text-label)/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted) }
.display { font-family: var(--display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.88 }
.langkau { position: absolute; inset-block-start: 0; inset-inline-start: var(--gutter); z-index: 70; padding: 0.75rem 1rem; background: var(--paper); color: var(--ink); font-weight: 600; font-size: 0.875rem; line-height: 1; text-decoration: none; translate: 0 -150% }
.langkau:focus { translate: 0 calc(env(safe-area-inset-top, 0px) + 0.5rem) }

/* top bar, as on the main page */
.bar { position: sticky; inset-block-start: 0; z-index: 60; display: flex; align-items: center; gap: 0.75rem; block-size: var(--bar-full); padding-block-start: env(safe-area-inset-top, 0px); padding-inline: var(--gutter); background: var(--ink); border-block-end: 1px solid var(--line) }
.mark { font-size: 1.25rem; line-height: 1; word-spacing: 0.08em; text-decoration: none; white-space: nowrap }
.watak { flex: none; padding: 0.3125rem 0.5rem; border: 1px solid var(--line); color: var(--muted); font: 500 var(--text-label)/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap }
.bar nav { margin-inline-start: auto }

/* buttons, as on the main page */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-block-size: 3rem; padding: 0.75rem 1.25rem; background: var(--lampu); color: var(--ink); font: 600 1rem/1.2 var(--sans); text-decoration: none; text-align: center; border: 0; cursor: pointer }
.btn:active { background: color-mix(in oklch, var(--lampu), var(--ink) 18%) }
.btn.quiet { background: transparent; color: var(--paper); border: 1px solid color-mix(in oklch, var(--paper) 35%, transparent) }
.btn.quiet:active { background: var(--ink-2) }
.bar .btn { min-block-size: 2.25rem; padding: 0.375rem 0.875rem; font-size: 0.8125rem; letter-spacing: 0.02em; white-space: nowrap }

/* one reading column */
.kolum { inline-size: min(100% - var(--gutter) * 2, var(--content)); margin-inline: auto }
.kepala { display: grid; gap: 1.25rem; padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) 2.5rem; border-block-end: 1px solid var(--line) }
.jejak ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding: 0; list-style: none }
.jejak li + li::before { content: "/"; margin-inline-end: 0.5rem; color: var(--line) }
.jejak a { text-decoration: none }
.kepala h1 { font-size: clamp(2.75rem, 1.4rem + 6.5vw, 5.25rem) }
.kepala h1 em { font-size: 1.08em; line-height: 0.8 }
.lead { color: var(--muted); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5 }

/* the short answer answer engines quote */
.jawapan { display: grid; gap: 0.5rem; padding: 1.25rem 0 1.25rem 1.25rem; border-inline-start: 2px solid var(--lampu) }
.jawapan p:last-child { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); line-height: 1.55 }

/* article body */
.isi { display: grid; gap: 1rem; padding-block: 2.5rem var(--space-section) }
.isi h2 { margin-block-start: 2.25rem; font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.15; letter-spacing: -0.01em }
.isi h2:first-child { margin-block-start: 0 }
.isi h2 + p { font-weight: 600 }
.isi ul, .isi ol { display: grid; gap: 0.75rem; padding: 0; list-style: none }
.isi ul > li { position: relative; padding-inline-start: 1.25rem }
.isi ul > li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em; inline-size: 0.5rem; block-size: 1px; background: var(--lampu) }
.isi code { padding: 0.05em 0.3em; background: var(--ink-2); font-size: 0.92em }

/* numbered steps with a serif numeral */
.langkah { counter-reset: langkah }
.langkah > li { counter-increment: langkah; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 0.75rem; padding-block: 1rem; border-block-start: 1px solid var(--line) }
.langkah > li::before { content: counter(langkah, decimal-leading-zero); grid-row: span 2; color: var(--lampu); font: italic 400 1.75rem/1 var(--serif) }
.langkah h3 { font-weight: 600; font-size: 1.125rem; line-height: 1.35 }
.langkah p { color: color-mix(in oklch, var(--paper) 86%, var(--muted)) }

/* free gift: a prompt with a copy button */
.hadiah { display: grid; gap: 0.75rem; margin-block: 1rem; padding: 1.25rem; background: var(--ink-2); border: 1px solid var(--line) }
.hadiah pre { white-space: pre-wrap; font: 400 0.9375rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--paper) }
.hadiah .btn { justify-self: start }
.hadiah .bila { color: var(--muted); font-size: 0.9375rem }
.hadiah .label code { padding: 0; background: none; color: var(--lampu); font-size: 0.875rem; letter-spacing: 0; text-transform: none }

/* "Nak lagi?": what the product adds */
.lagi { display: grid; gap: 1rem; margin-block-start: 2.5rem; padding: clamp(1.25rem, 1rem + 2vw, 2rem); border: 1px solid var(--lampu) }
.lagi h2 { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9; font-size: clamp(2.5rem, 1.8rem + 3vw, 3.75rem) }
.lagi h2 em { font-size: 1.08em }
.lagi .btn { justify-self: start }

/* questions, as on the main page */
.soal { margin-block-start: 0.5rem; border-block-end: 1px solid var(--line) }
.soal details { border-block-start: 1px solid var(--line) }
.soal summary { position: relative; padding-block: 1.125rem; padding-inline-end: 2.5rem; cursor: pointer; list-style: none; font-weight: 600; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.35 }
.soal summary::-webkit-details-marker { display: none }
.soal summary::after { content: "+" / ""; position: absolute; inset-inline-end: 0.25rem; inset-block-start: 1rem; color: var(--lampu); font-weight: 400; font-size: 1.75rem; line-height: 1 }
.soal details[open] summary::after { content: "\2013" / "" }
.soal details p { padding-block-end: 1.25rem }

/* hub list and "Panduan lain" */
.senarai { display: grid; padding: 0; list-style: none; border-block-end: 1px solid var(--line) }
.senarai li { border-block-start: 1px solid var(--line) }
.senarai a { display: grid; gap: 0.375rem; padding-block: 1.25rem; text-decoration: none }
.senarai strong { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.25 }
.senarai span { color: var(--muted) }
.senarai a:active strong { color: var(--lampu) }

/* footer: seller details, as the e-commerce regulations require */
.kaki { display: grid; justify-items: center; gap: 0.75rem; padding: var(--space-section) var(--gutter) calc(3rem + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--line); text-align: center }
.kaki .tamat { font: italic 400 clamp(2rem, 1.5rem + 2vw, 3rem)/1 var(--serif); color: var(--paper) }
.kaki p { max-inline-size: 40rem }
.kaki .nowrap { white-space: nowrap }

/* legal pages (/privasi/, /terma/): a contents list, one block per use of data, and notes */
.kandungan { display: grid; gap: 0.5rem }
.kandungan ul { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none }
.kandungan a { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding: 0.5rem 0.875rem; border: 1px solid var(--line); font-size: 0.9375rem; text-decoration: none }
.kandungan a:active { border-color: var(--lampu) }
.undang .isi h3 { font-weight: 600; font-size: 1.1875rem; line-height: 1.35 }
.guna { display: grid; gap: 0.75rem; padding-block: 1.25rem; border-block-start: 1px solid var(--line) }
.guna:target, .undang [id]:target { scroll-margin-block-start: calc(var(--bar-full) + 1rem) }
.guna dl { display: grid; gap: 0.25rem 1.25rem; margin: 0 }
.guna dt { color: var(--muted); font: 500 var(--text-label)/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; padding-block-start: 0.5rem }
.guna dd { margin: 0 }
@media (min-width: 40rem) {
  .guna dl { grid-template-columns: 9rem 1fr }
  .guna dt { padding-block-start: 0.35rem }
}
.belum { justify-self: start; padding: 0.375rem 0.75rem; border: 1px solid var(--lampu); color: var(--lampu); font-weight: 600; font-size: 0.9375rem }
.nota-kecil { color: var(--muted); font-size: 0.9375rem }
.english { border-block-start: 1px solid var(--line) }
.english .bahasa { font-family: var(--display); font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9; font-size: clamp(2.5rem, 1.8rem + 3vw, 3.75rem) }
.english .bahasa + p { font-weight: 500 }

@media (hover: hover) and (pointer: fine) {
  .btn { transition: background-color 200ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1) }
  .btn:hover { background: color-mix(in oklch, var(--lampu), var(--paper) 22%) }
  .btn.quiet:hover { background: var(--ink-2) }
  .senarai a strong, .soal summary { transition: color 200ms ease }
  .senarai a:hover strong, .soal summary:hover { color: var(--lampu) }
  .kandungan a { transition: border-color 200ms ease }
  .kandungan a:hover { border-color: var(--lampu) }
}
@media (prefers-reduced-motion: no-preference) {
  .btn:active { transform: scale(0.97) }
}