/* ZMFarm — arah "Papan": papan harga enamel + papan kenyataan surau.
   Token mengikut susunan shadcn (lihat DESIGN.md). Sifar JS. */

/* ---------- fon dihoskan sendiri ---------- */
@font-face{font-family:"Faustina";src:url("/static/fonts/Faustina-var.woff2") format("woff2");
  font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("/static/fonts/SchibstedGrotesk-var.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("/static/fonts/MartianMono-var.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}

/* ---------- token ---------- */
:root{
  --background:#e6ebe9;
  --card:#fbfcfb;
  --foreground:#16211e;
  --muted:#d7dedb;
  --muted-foreground:#4c5a56;
  --border:#c3cdc9;
  --primary:#8e2a22;
  --primary-foreground:#fcf6f2;
  --board:#1d2b26;
  --board-ink:#e9efea;
  --ring:#8e2a22;
  --radius:0.75rem;
  --shadow:0 1px 2px rgba(22,33,30,.07),0 14px 34px -18px rgba(22,33,30,.32);
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Faustina",Georgia,serif;
  --mono:"Martian Mono",ui-monospace,"Cascadia Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --background:#0b1210;
    --card:#131c19;
    --foreground:#e4ebe7;
    --muted:#1a2622;
    --muted-foreground:#94a5a0;
    --border:#263430;
    --primary:#e98074;
    --primary-foreground:#1a0c0a;
    --board:#06100d;
    --board-ink:#dce6e1;
    --ring:#e98074;
    --shadow:0 1px 2px rgba(0,0,0,.55),0 18px 44px -22px rgba(0,0,0,.85);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--background);color:var(--foreground);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(4.25rem + env(safe-area-inset-bottom));   /* ruang bar WhatsApp */
}
@media (min-width:46rem){body{padding-bottom:0}}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{margin:0}

.sheet{max-width:46rem;margin:0 auto;padding:0 1rem}
.wide{max-width:60rem;margin:0 auto}

/* ---------- kepala ---------- */
.masthead{background:var(--board);color:var(--board-ink)}
.masthead-in{
  max-width:60rem;margin:0 auto;padding:.7rem 1rem;
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
}
/* Logo ialah dakwat gelap atas latar lut sinar; masthead sentiasa panel gelap,
   jadi ia mesti dicerahkan pada kedua-dua mod. */
.masthead img{width:9.25rem;height:auto;filter:brightness(0) invert(1) opacity(.92)}
.corridor{
  font-family:var(--mono);font-size:.62rem;font-variation-settings:"wdth" 75;
  letter-spacing:.16em;text-transform:uppercase;opacity:.75;text-align:right;
}
@media (prefers-color-scheme:dark){.masthead img{filter:brightness(1.9) contrast(1.1)}}

/* ---------- hero ---------- */
.hero{display:flex;gap:1.1rem;align-items:flex-start;padding:1.6rem 0 .2rem}
.hero-text{flex:1 1 auto;min-width:0}
.eyebrow{
  font-family:var(--mono);font-size:.66rem;font-variation-settings:"wdth" 87.5;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted-foreground);margin:0 0 .5rem;
}
h1.title{
  font-family:var(--sans);font-weight:800;letter-spacing:-.025em;line-height:1.03;
  font-size:clamp(2.05rem,8.6vw,3rem);
}
.title-sub{
  font-family:var(--serif);font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  font-size:clamp(.95rem,3.6vw,1.2rem);margin:.45rem 0 0;color:var(--muted-foreground);
}
.lede{margin:.85rem 0 0;font-size:1.02rem;max-width:32ch}

/* ---------- cetakan 4R ---------- */
.print{
  background:var(--card);border:1px solid var(--border);
  border-radius:calc(var(--radius) - 6px);padding:.34rem .34rem 0;
  box-shadow:var(--shadow);flex:0 0 auto;
}
a.print{text-decoration:none;display:block}
a.print:hover{border-color:var(--primary)}
a.print:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
/* rekod tanpa foto: petak nisbah sama supaya grid tidak berlubang */
.print .noimg{
  aspect-ratio:3/4;border-radius:calc(var(--radius) - 9px);background:var(--muted);
  display:flex;align-items:center;justify-content:center;
}
.print .noimg::after{
  content:"ZM";font-family:var(--serif);font-weight:700;letter-spacing:.14em;
  font-size:.9rem;color:var(--muted-foreground);opacity:.5;
}
.print img{
  aspect-ratio:3/4;object-fit:cover;object-position:center 42%;width:100%;
  border-radius:calc(var(--radius) - 9px);
  filter:saturate(.92) contrast(1.05) brightness(1.02);
  box-shadow:inset 0 0 0 1px rgba(22,33,30,.10);
}
.print figcaption{
  font-family:var(--mono);font-size:.62rem;font-variation-settings:"wdth" 87.5;
  color:var(--muted-foreground);padding:.45rem .1rem .5rem;line-height:1.4;
  text-transform:uppercase;letter-spacing:.04em;
}
.hero .print{width:8rem;margin:0}
@media (min-width:46rem){.hero .print{width:11.5rem}}

/* ---------- butang ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3rem;padding:.7rem 1rem;text-decoration:none;font-weight:600;font-size:.98rem;
  border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);
  background:var(--card);color:var(--foreground);
  transition:border-color .15s ease,transform .15s ease,filter .15s ease;
}
.btn:hover{border-color:var(--primary);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.btn--primary{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.btn--primary:hover{filter:brightness(1.12)}
.actions{display:grid;gap:.5rem;margin:1.2rem 0 0}
@media (min-width:34rem){.actions{grid-template-columns:1fr 1fr}}

/* ---------- jaminan ---------- */
.assure{
  display:grid;gap:.35rem;margin:1.5rem 0 0;padding:0;list-style:none;
  font-family:var(--mono);font-size:.72rem;font-variation-settings:"wdth" 87.5;
  color:var(--muted-foreground);
}
.assure li{display:flex;gap:.5rem;align-items:baseline}
.assure b{color:var(--primary);font-weight:700}

/* ---------- jalur papan ---------- */
.strip{
  background:var(--board);color:var(--board-ink);margin:2.5rem 0 0;
  padding:.85rem 1rem;text-align:center;
}
.strip h2{
  font-family:var(--serif);font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:clamp(1rem,4.2vw,1.4rem);
}
.strip p{
  margin:.3rem 0 0;font-family:var(--mono);font-size:.64rem;
  font-variation-settings:"wdth" 75;letter-spacing:.16em;text-transform:uppercase;opacity:.7;
}
.bleed{margin-inline:calc(50% - 50vw);width:100vw}
@media (min-width:46rem){
  .bleed{margin-inline:auto;width:auto;border-radius:var(--radius)}
}

/* ---------- kad harga ---------- */
.prices{display:grid;gap:.6rem;margin-top:1.2rem}
@media (min-width:52rem){.prices{grid-template-columns:repeat(3,1fr)}}
.price{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1rem 1.05rem 0;
  transition:border-color .15s ease,transform .15s ease;
}
.price:hover{border-color:var(--primary);transform:translateY(-1px)}
.price:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.price-head{min-height:3.1rem}
.price-no{
  font-family:var(--mono);font-size:.68rem;color:var(--muted-foreground);
  font-variation-settings:"wdth" 75;
}
.price-name{
  font-family:var(--serif);font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  font-size:1rem;line-height:1.25;margin-top:.1rem;
}
.price-fig{min-height:4.3rem;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.rm{
  font-size:.4em;font-weight:600;color:var(--muted-foreground);
  position:relative;top:-.95em;letter-spacing:.02em;
}
.amount{
  font-weight:800;color:var(--primary);letter-spacing:-.03em;
  font-size:clamp(2.55rem,12vw,3.3rem);line-height:1;
  /* lining sahaja: `tabular` memberi koma lebar penuh dan angka jadi renggang.
     Ketiga-tiga harga empat digit, jadi jajaran kekal tanpa tabular. */
  font-variant-numeric:lining-nums;
}
.delta{
  font-family:var(--mono);font-size:.7rem;color:var(--muted-foreground);
  font-variation-settings:"wdth" 87.5;
}
.price-unit{
  font-family:var(--mono);font-size:.68rem;color:var(--muted-foreground);
  font-variation-settings:"wdth" 87.5;margin:.15rem 0 0;
}
.price-badge{
  display:inline-block;margin:.55rem 0 0;padding:.3rem .55rem;border-radius:999px;
  background:var(--primary);color:var(--primary-foreground);
  font-family:var(--mono);font-size:.6rem;font-variation-settings:"wdth" 75;
  letter-spacing:.08em;text-transform:uppercase;
}
.incl{list-style:none;margin:.85rem 0 0;padding:0}
.incl li{
  display:flex;gap:.55rem;align-items:baseline;padding:.4rem 0;
  border-top:1px dashed var(--border);font-size:.86rem;
}
.incl .mark{font-weight:700;color:var(--primary);flex:0 0 .9rem}
.incl .add{color:var(--muted-foreground)}
.incl .add .mark{color:var(--muted-foreground);font-weight:600}
.incl .cost{margin-left:auto;font-family:var(--mono);font-size:.7rem;font-variation-settings:"wdth" 87.5}
.price-note{font-size:.78rem;color:var(--muted-foreground);margin:.55rem 0 0}
.price-cta{
  margin-top:auto;padding:.85rem 0 .95rem;display:flex;align-items:center;gap:.4rem;
  font-weight:600;font-size:.9rem;color:var(--primary);
}

/* ---------- buku resit ---------- */
.pad{
  margin-top:1.4rem;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.05rem;
}
.pad h3,.subhead{
  font-family:var(--mono);font-size:.66rem;font-variation-settings:"wdth" 75;
  letter-spacing:.17em;text-transform:uppercase;color:var(--muted-foreground);
  font-weight:400;margin:0 0 .6rem;
}
.pad dl{margin:0;font-family:var(--mono);font-size:.8rem;font-variation-settings:"wdth" 87.5}
.pad .line{display:flex;gap:.75rem;padding:.34rem 0}
.pad .line dt{margin:0;flex:1 1 auto}
.pad .line dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.pad .sum{border-top:2px solid var(--foreground);margin-top:.45rem;padding-top:.5rem;font-weight:600}
.pad .sum dd{color:var(--primary)}
.pad .free{color:var(--primary)}

/* ---------- senarai baris ---------- */
.section{margin-top:2.4rem}
.section-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.section-head h2{
  font-family:var(--mono);font-size:.68rem;font-variation-settings:"wdth" 75;
  letter-spacing:.17em;text-transform:uppercase;color:var(--muted-foreground);font-weight:400;
}
.section-head span{flex:1 1 auto;height:1px;background:var(--border)}
.list{display:grid;gap:.4rem}
.row{
  display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;text-decoration:none;
  background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);
  transition:border-color .15s ease,transform .15s ease;
}
a.row:hover{border-color:var(--primary);transform:translateX(2px)}
a.row:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.row-text{min-width:0}
.row-title{font-size:.94rem;font-weight:600;line-height:1.3}
.row-note{font-size:.76rem;color:var(--muted-foreground);margin-top:.1rem}
.tag{
  margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:.7rem;
  font-variation-settings:"wdth" 87.5;color:var(--primary);font-weight:600;
  white-space:nowrap;text-align:right;
}
.tag--plain{color:var(--muted-foreground);font-weight:400}

/* ---------- bawa ke majlis ---------- */
.brings{display:grid;gap:.4rem;grid-template-columns:repeat(2,1fr);list-style:none;padding:0;margin:0}
@media (min-width:40rem){.brings{grid-template-columns:repeat(3,1fr)}}
.brings li{
  background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);
  padding:.7rem .8rem;font-size:.85rem;font-weight:600;
}

/* ---------- PAPAN KENYATAAN (tandatangan) ---------- */
.board{
  position:relative;background:var(--board);color:var(--board-ink);
  margin-top:2.5rem;padding:1.6rem 1.15rem 1.5rem;
  box-shadow:inset 0 0 0 1px rgba(233,239,234,.20),inset 0 0 0 8px rgba(233,239,234,.055);
}
.board .rivet{position:absolute;width:.5rem;height:.5rem;border-radius:50%;
  background:rgba(233,239,234,.28);box-shadow:0 1px 0 rgba(233,239,234,.45) inset}
.board .rivet:nth-child(1){top:.6rem;left:.6rem}
.board .rivet:nth-child(2){top:.6rem;right:.6rem}
.board .rivet:nth-child(3){bottom:.6rem;left:.6rem}
.board .rivet:nth-child(4){bottom:.6rem;right:.6rem}
.board-eyebrow{
  font-family:var(--mono);font-size:.6rem;font-variation-settings:"wdth" 75;
  letter-spacing:.18em;text-transform:uppercase;opacity:.65;margin:0;
}
.board h2{
  font-family:var(--serif);font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:clamp(1.15rem,4.6vw,1.55rem);margin:.35rem 0 0;
}
.board-count{display:flex;align-items:baseline;gap:.6rem;margin:.9rem 0 0}
.board-count b{
  font-weight:800;font-size:2.5rem;line-height:1;font-variant-numeric:tabular-nums;
}
.board-count span{
  font-family:var(--mono);font-size:.62rem;font-variation-settings:"wdth" 75;
  letter-spacing:.15em;text-transform:uppercase;opacity:.7;
}
.board-rule{height:3px;width:2.6rem;background:var(--primary);margin:.7rem 0 1.2rem;transform-origin:left}
@media (prefers-reduced-motion:no-preference){
  .board-rule{animation:sweep .5s cubic-bezier(.2,.9,.3,1) both}
  @keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.zone{margin:0 0 1.1rem}
.zone h3{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.7rem;font-weight:600;font-variation-settings:"wdth" 75;
  letter-spacing:.15em;text-transform:uppercase;
}
.zone .sq{width:.55rem;height:.55rem;flex:0 0 auto;border:1px solid var(--board-ink)}
.zone--free .sq{background:var(--primary);border-color:var(--primary)}
.zone em{font-style:normal;color:var(--primary);text-transform:lowercase;letter-spacing:.02em}
.zone ul{
  list-style:none;margin:.5rem 0 0;padding:0;columns:2;column-gap:1.1rem;
  column-rule:1px solid rgba(233,239,234,.12);
}
@media (min-width:46rem){.zone ul{columns:3}}
.zone li{
  break-inside:avoid;font-family:var(--mono);font-size:.72rem;
  font-variation-settings:"wdth" 75;opacity:.85;padding:.12rem 0;
}
.zone li::before{content:"· ";opacity:.5}
.plates{display:flex;flex-wrap:wrap;gap:.35rem;margin:1.3rem 0 0;padding:0;list-style:none}
.plates li{
  font-family:var(--mono);font-size:.6rem;font-variation-settings:"wdth" 75;
  letter-spacing:.08em;text-transform:uppercase;padding:.3rem .55rem;
  border:1px solid rgba(233,239,234,.3);border-radius:999px;
}
.board .btn{margin-top:1.3rem;background:var(--primary);border-color:var(--primary);
  color:var(--primary-foreground)}

/* ---------- rel bukti kerja ---------- */
.rail{
  display:flex;gap:.6rem;overflow-x:auto;padding:.15rem .15rem 1rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.rail .print{width:62vw;max-width:15rem;scroll-snap-align:start}
@media (min-width:46rem){
  .rail{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}
  .rail .print{width:auto;max-width:none;justify-self:center}
  .rail .print img{max-height:19rem}
}
@media (prefers-reduced-motion:reduce){.rail{scroll-snap-type:none}}

/* ---------- langkah ---------- */
.steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:.4rem}
.steps li{
  counter-increment:step;display:flex;gap:.8rem;padding:.8rem 1rem;
  background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);
  font-size:.9rem;
}
.steps li::before{
  content:counter(step);font-family:var(--mono);font-size:.72rem;color:var(--primary);
  font-weight:700;flex:0 0 1rem;
}

/* ---------- kaki ---------- */
footer{
  margin-top:3rem;background:var(--board);color:var(--board-ink);
  padding:1.6rem 1rem calc(1.6rem + env(safe-area-inset-bottom));
}
.foot-in{max-width:46rem;margin:0 auto;display:grid;gap:1.2rem}
@media (min-width:40rem){.foot-in{grid-template-columns:1fr 1fr}}
footer h2{
  font-family:var(--mono);font-size:.62rem;font-variation-settings:"wdth" 75;
  letter-spacing:.17em;text-transform:uppercase;opacity:.65;font-weight:400;margin:0 0 .5rem;
}
footer a{color:inherit}
.foot-line{font-family:var(--mono);font-size:.74rem;font-variation-settings:"wdth" 87.5;
  opacity:.9;margin:.2rem 0}
.foot-meta{
  max-width:46rem;margin:1.4rem auto 0;padding-top:1rem;border-top:1px solid rgba(233,239,234,.15);
  font-family:var(--mono);font-size:.62rem;font-variation-settings:"wdth" 87.5;opacity:.6;
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;
}

/* ---------- bar WhatsApp melekat (telefon) ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--board);padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px -16px rgba(0,0,0,.6);
}
.dock .btn{min-height:3.1rem}
@media (min-width:46rem){.dock{display:none}}

/* ---------- artikel pos ---------- */
.post{max-width:38rem;margin:0 auto;padding:1.8rem 1rem 0}
.post h1{
  font-family:var(--sans);font-weight:800;letter-spacing:-.02em;line-height:1.12;
  font-size:clamp(1.6rem,6vw,2.3rem);
}
.post .meta{
  font-family:var(--mono);font-size:.68rem;font-variation-settings:"wdth" 87.5;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);margin:.7rem 0 0;
}
.post .body{margin-top:1.4rem;font-size:1rem}
.post .body p{margin:0 0 1rem}
.post .body img{
  border-radius:calc(var(--radius) - 4px);border:1px solid var(--border);margin:1.2rem 0;
  filter:saturate(.92) contrast(1.05);
}
.post .body h2,.post .body h3{
  font-family:var(--serif);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:1.05rem;margin:1.6rem 0 .6rem;
}
.post .lead-print{margin:1.4rem auto 0;max-width:17rem}

/* ---------- arkib ---------- */
.grid{display:grid;gap:.6rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:40rem){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:56rem){.grid{grid-template-columns:repeat(4,1fr)}}
.grid .print{width:auto}
.grid .print .year{
  font-family:var(--mono);font-size:.6rem;font-variation-settings:"wdth" 75;
  color:var(--primary);letter-spacing:.1em;
}
.years{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 1.2rem;padding:0;list-style:none}
.years a{
  display:block;font-family:var(--mono);font-size:.68rem;font-variation-settings:"wdth" 87.5;
  padding:.35rem .6rem;border:1px solid var(--border);border-radius:999px;
  text-decoration:none;background:var(--card);
}
.years a:hover{border-color:var(--primary)}

/* ---------- kontras tinggi ---------- */
@media (prefers-contrast:more){
  .card,.row,.btn,.price,.pad{border-width:2px}
  :root{--shadow:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}