/* =========================================================================
   Masjid Kampung Semarang — sistem reka bentuk
   Dikongsi oleh index.html, derma.html, terima-kasih.html
   ========================================================================= */

/* ---------- Muka taip ---------- */
/* Newsreader (SIL OFL 1.1) — subset kepada glif yang digunakan sahaja.
   Dilayan sendiri: tiada permintaan ke Google Fonts, jadi tiada pihak ketiga
   tahu siapa membaca halaman derma ini. */
@font-face {
  font-family: 'Newsreader';
  src: url('font/newsreader.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Warna ---- */
  --ink: #12241c;
  --muted: #5d6f66;
  --line: #dfe6e2;
  --line-soft: #ecf0ee;

  --green: #0f6b47;
  --green-dark: #0a4f34;
  --green-deep: #06301f;
  --green-tint: #f2f8f5;

  --gold: #b6892f;
  --gold-light: #e0b455;

  --bg: #fbfaf7;
  --card: #fff;

  --wrap: min(1120px, 100% - 40px);

  /* ---- Lengkung pelonggaran ----
     Pelonggaran terbina CSS terlalu lemah untuk terasa disengajakan.
     JANGAN guna ease-in untuk UI: ia melengahkan bingkai pertama, iaitu
     saat mata paling memerhati. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* ---- Tempoh ---- */
  --t-press: 140ms;
  --t-ui: 220ms;
  --t-reveal: 620ms;

  --nav-h: 62px;
}

* { box-sizing: border-box; margin: 0; padding: 0 }

html {
  scroll-behavior: smooth;
  /* Pautan tidak boleh mendarat di bawah navbar terapung */
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: var(--wrap); margin-inline: auto }
section { padding: clamp(64px, 9vw, 116px) 0; position: relative }

/* ---------- Taip ---------- */
h1, h2, h3 {
  font-family: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(34px, 6.4vw, 66px); line-height: 1.06 }
h2 { font-size: clamp(27px, 4.4vw, 42px); line-height: 1.14; margin-bottom: 10px }
h3 { font-size: 18px; line-height: 1.3; margin-bottom: 6px; font-weight: 600 }

.lead { color: var(--muted); font-size: clamp(15.5px, 1.5vw, 17.5px); max-width: 62ch }
.lead + .lead { margin-top: 14px }
.note { font-size: 13.5px; color: var(--muted); margin-top: 14px }

.eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::after {
  content: ''; flex: 1; height: 1px; max-width: 64px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* =========================================================================
   Primitif gerakan
   Hanya transform + opacity dianimasikan — kedua-duanya melangkau layout
   dan paint, jadi ia berjalan pada GPU.
   ========================================================================= */

.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.985);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js .reveal.in { opacity: 1; transform: none }

/* Tiada peraturan selak di sini dengan sengaja: .reveal hanya disembunyikan
   di bawah `.js`, jadi kegagalan memuat main.js bermakna semuanya kekal
   kelihatan — termasuk jadual ketelusan dan nombor akaun bank. */

/* =========================================================================
   Navbar terapung
   ========================================================================= */

.nav {
  position: fixed; top: 14px; left: 50%; z-index: 90;
  transform: translate3d(-50%, -14px, 0);
  opacity: 0; pointer-events: none;
  /* visibility, bukan hanya opacity: opacity:0 mengekalkan elemen dalam
     susunan tab, jadi pengguna papan kekunci akan Tab masuk ke navbar yang
     langsung tidak kelihatan. visibility:hidden mengeluarkannya. Ia beralih
     secara berperingkat supaya peralihan keluar masih sempat dilihat. */
  visibility: hidden;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out),
              visibility 0s linear 260ms;
  width: min(1120px, 100% - 28px);
}
.nav.show {
  opacity: 1; transform: translate3d(-50%, 0, 0); pointer-events: auto;
  visibility: visible; transition-delay: 0s;
}

.nav-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 16px; border-radius: 100px;
  background: rgba(251, 250, 247, 0.82);
  border: 1px solid rgba(18, 36, 28, 0.07);
  box-shadow: 0 1px 2px rgba(18, 36, 28, .04), 0 8px 30px rgba(18, 36, 28, .09);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.nav-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex-shrink: 0 }
.nav-brand img { width: 26px; height: 26px }
.nav-brand span { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; position: relative }
.nav-links a {
  position: relative; z-index: 1;
  padding: 8px 14px; border-radius: 100px; text-decoration: none;
  color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: color var(--t-ui) var(--ease-out);
}
.nav-links a.active { color: var(--green-dark) }

/* Penanda seksyen aktif: SATU elemen yang meluncur, bukan 5 yang bertukar warna.
   Satu objek bergerak dibaca sebagai berterusan; lima yang berkelip tidak. */
.nav-pill {
  position: absolute; left: 0; top: 0; height: 100%; width: 1px;
  border-radius: 100px; background: var(--green-tint);
  transform-origin: left center; z-index: 0; opacity: 0;
  transition: transform 420ms var(--ease-out), opacity 240ms var(--ease-out);
}

.nav-cta {
  flex-shrink: 0; padding: 9px 20px; border-radius: 100px;
  background: var(--green); color: #fff; text-decoration: none;
  font-size: 13.5px; font-weight: 700;
  transition: transform var(--t-press) var(--ease-out), background var(--t-ui) var(--ease-out);
}
.nav-cta:active { transform: scale(0.97) }

.nav-toggle {
  display: none; flex-shrink: 0;
  width: 38px; height: 38px; border: none; border-radius: 100px;
  background: transparent; cursor: pointer; margin-left: auto;
  align-items: center; justify-content: center;
  transition: transform var(--t-press) var(--ease-out);
}
.nav-toggle:active { transform: scale(0.94) }
.nav-toggle span {
  display: block; width: 17px; height: 1.5px; background: var(--ink); border-radius: 2px;
  position: relative; transition: transform var(--t-ui) var(--ease-out);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--t-ui) var(--ease-out);
}
.nav-toggle span::before { transform: translateY(-5.5px) }
.nav-toggle span::after  { transform: translateY(5.5px) }
.menu-open .nav-toggle span { transform: rotate(45deg) }
.menu-open .nav-toggle span::before { transform: rotate(-90deg) }
.menu-open .nav-toggle span::after  { transform: scaleX(0) }

/* ---------- Helaian menu mudah alih ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 89;
  background: var(--bg);
  transform: translate3d(0, 100%, 0);
  transition: transform 460ms var(--ease-drawer), visibility 460ms;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 32px calc(60px + env(safe-area-inset-bottom));
  visibility: hidden;
}
.menu-open .sheet { transform: translate3d(0, 0, 0); visibility: visible }
.sheet a {
  display: block; padding: 16px 0; font-size: 25px; text-decoration: none;
  color: var(--ink); border-bottom: 1px solid var(--line-soft);
  font-family: 'Newsreader', ui-serif, Georgia, serif; font-weight: 500;
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
  transition-delay: calc(var(--i) * 45ms + 90ms);
}
.menu-open .sheet a { opacity: 1; transform: none }
.sheet .sheet-cta {
  margin-top: 26px; border: none; text-align: center;
  background: var(--green); color: #fff; border-radius: 100px;
  padding: 17px; font-size: 17px; font-weight: 700;
}

/* =========================================================================
   Butang
   ========================================================================= */

.btn {
  display: inline-block; background: var(--green); color: #fff; text-decoration: none;
  padding: 16px 34px; border-radius: 100px; font-weight: 700; font-size: 17px;
  box-shadow: 0 4px 16px rgba(15, 107, 71, .26);
  transition: transform var(--t-press) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.btn:active { transform: scale(0.97) }
.btn.lg { padding: 19px 46px; font-size: 19px }
.btn.ghost { background: transparent; color: var(--green); border: 2px solid var(--green); box-shadow: none }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 107, 71, .32) }
  .btn:active { transform: scale(0.97) }
  .nav-cta:hover { background: var(--green-dark) }
  .nav-links a:hover { color: var(--ink) }
  .chip:hover { border-color: var(--green); color: var(--green) }
  .card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(18, 36, 28, .07) }
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  text-align: center; color: #fff; overflow: hidden;
  padding: 120px 0 90px;
}
.hero-media { position: absolute; inset: -8% 0; z-index: 0 }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(rgba(6, 24, 16, .56), rgba(6, 24, 16, .72) 55%, rgba(6, 24, 16, .88)),
    radial-gradient(120% 70% at 50% 0%, transparent 40%, rgba(6, 24, 16, .5));
}
.hero .wrap { position: relative; z-index: 2 }

.hero .logo {
  width: 74px; height: auto; margin: 0 auto 22px; display: block;
  filter: brightness(0) invert(1); opacity: .9;
}
.kicker {
  display: inline-block; border: 1px solid rgba(255, 255, 255, .3); border-radius: 100px;
  padding: 6px 18px; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 22px;
}
.hero h1 { margin-bottom: 18px; text-wrap: balance }
.hero .sub {
  font-size: clamp(16px, 2.2vw, 20px); opacity: .88; max-width: 46ch;
  margin: 0 auto 34px; text-wrap: balance;
}

/* Bar kemajuan, dengan rujukan pihak berkuasa terus di bawahnya.
   Angka RM16.4 juta yang disokong badan wakaf negeri ialah bukti paling kuat
   yang ada pada kempen ini, jadi ia duduk bersebelahan nombor itu sendiri. */
.js .progress { display: none }
.progress {
  max-width: 480px; margin: 0 auto 32px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px; padding: 22px 26px; backdrop-filter: blur(8px);
}
.progress.on { display: block }
.progress .src {
  font-size: 12.5px; opacity: .68; margin-top: 15px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .16); line-height: 1.55; text-align: left;
}
.progress .raised {
  font-family: 'Newsreader', ui-serif, Georgia, serif;
  font-weight: 500; letter-spacing: -.02em;
}
.progress .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px }
.progress .raised { font-size: clamp(30px, 5.6vw, 42px); line-height: 1 }
.progress .target { font-size: 13.5px; opacity: .75; text-align: right }
.bar { height: 10px; background: rgba(255, 255, 255, .18); border-radius: 100px; overflow: hidden }
.bar span {
  display: block; height: 100%; width: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--ease-out);
}
.progress .foot { display: flex; justify-content: space-between; font-size: 12.5px; opacity: .75; margin-top: 9px; gap: 12px }

.ayat {
  font-size: 14.5px; opacity: .7; font-style: italic; max-width: 46ch;
  margin: 34px auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18);
}
.ayat .rujukan { font-style: normal; font-size: 12.5px; display: block; margin-top: 6px; letter-spacing: .4px }

.scroll-hint {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; opacity: .5;
}
.scroll-hint::after {
  content: ''; display: block; width: 1px; height: 26px; margin: 10px auto 0;
  background: linear-gradient(#fff, transparent);
  animation: hint 2.4s var(--ease-in-out) infinite; transform-origin: top;
}
@keyframes hint { 0%, 100% { transform: scaleY(.35); opacity: .3 } 50% { transform: scaleY(1); opacity: .8 } }

/* =========================================================================
   Kad & grid
   ========================================================================= */

.grid { display: grid; gap: 18px; margin-top: 30px }
.g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px;
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.card .amt {
  font-family: 'Newsreader', ui-serif, Georgia, serif;
  font-size: 34px; font-weight: 500; color: var(--green); letter-spacing: -.02em; line-height: 1.05;
}
.card p { font-size: 14.5px; color: var(--muted); margin-top: 6px }

/* Kad kemudahan musafir */
.facil { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 30px }
.facil div {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  border-top: 3px solid var(--gold);
}
.facil b { display: block; font-size: 16px; margin-bottom: 5px }
.facil span { font-size: 14px; color: var(--muted) }

/* =========================================================================
   Galeri & pelan
   ========================================================================= */

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 28px }
.gallery figure { border-radius: 16px; overflow: hidden; background: #e8ebe9; border: 1px solid var(--line) }
.gallery .shot { overflow: hidden; aspect-ratio: 4/3 }
.gallery .shot img { width: 100%; height: 134%; object-fit: cover; display: block; margin-top: -17% }
.gallery figcaption { font-size: 13px; color: var(--muted); padding: 11px 14px; background: var(--card) }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 28px }
.plans figure { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden }
.plans img { width: 100%; display: block; background: #fff }
/* Hanya imej dengan data-par dipotong; pelan lantai & surat JAIS kekal penuh */
.plans img[data-par] { height: 118%; object-fit: cover; margin-top: -9% }
.plans figcaption { font-size: 13.5px; color: var(--muted); padding: 13px 16px; border-top: 1px solid var(--line) }

/* =========================================================================
   Perjalanan (garis masa)
   ========================================================================= */

.timeline { margin-top: 34px; position: relative; padding-left: 30px }
.timeline::before {
  content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--line);
}
/* Garis dilukis mengikut skrol — scaleY, bukan height, supaya ia kekal GPU */
.timeline::after {
  content: ''; position: absolute; left: 5px; top: 8px; width: 2px; height: calc(100% - 16px);
  background: linear-gradient(var(--gold), var(--green));
  transform: scaleY(var(--draw, 0)); transform-origin: top;
}
.tl-item { position: relative; padding: 0 0 30px }
.tl-item:last-child { padding-bottom: 0 }
.tl-item::before {
  content: ''; position: absolute; left: -30px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--gold);
}
.tl-item.now::before { background: var(--green); border-color: var(--green) }
.tl-year {
  font-family: 'Newsreader', ui-serif, Georgia, serif;
  font-size: 22px; color: var(--green); font-weight: 600; line-height: 1;
}
.tl-item p { font-size: 15px; color: var(--muted); margin-top: 5px; max-width: 54ch }

/* =========================================================================
   Carta jawatankuasa — atas ke bawah
   ========================================================================= */

.chart { margin-top: 38px; display: flex; flex-direction: column; align-items: center }
.node {
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  padding: 14px 20px; text-align: center; min-width: 210px; position: relative; z-index: 1;
}
.node .nama { font-size: 15px; font-weight: 700; line-height: 1.3 }
.node .jawatan {
  font-size: 11px; color: var(--gold); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; margin-top: 4px;
}
.node.lead { background: var(--green-dark); border-color: var(--green-dark); color: #fff; padding: 18px 30px }
.node.lead .jawatan { color: var(--gold-light) }
.node.small { min-width: 190px; padding: 11px 16px }
.node.small .nama { font-size: 13.5px }

/* Penyambung ialah pseudo-elemen, bukan imej, jadi ia mengalir semula */
.rail { width: 2px; height: 26px; background: var(--line); flex-shrink: 0 }
.branch { display: flex; align-items: flex-start; justify-content: center; gap: 24px; position: relative }
.branch::before {
  content: ''; position: absolute; top: 0; left: 16%; right: 16%; height: 2px; background: var(--line);
}
.limb { display: flex; flex-direction: column; align-items: center }

/* AJK berada pada arasnya SENDIRI, di bawah para Penolong — bukan bersarang
   di bawah Timbalan Pengerusi. Bersarang menjadikan AJK pertama kelihatan
   setaraf dengan Penolong, dan tiga yang lain seolah-olah lebih rendah pula. */
.ajk-row {
  display: flex; justify-content: center; gap: 14px; position: relative;
  flex-wrap: wrap; width: 100%;
}
.ajk-row::before {
  content: ''; position: absolute; top: -14px; left: 12%; right: 12%;
  height: 2px; background: var(--line);
}
.ajk-row > .node { position: relative }
.ajk-row > .node::before {
  content: ''; position: absolute; top: -14px; left: 50%; width: 2px; height: 14px;
  background: var(--line);
}

@media (max-width: 820px) {
  /* Pokok 3 lebar tidak boleh dibaca pada telefon. Skrol mengufuk pada carta
     organisasi ialah kegagalan — jadi ia menjadi satu lajur berinden. */
  .chart { align-items: stretch }
  .branch { flex-direction: column; gap: 0; align-items: stretch }
  .branch::before { display: none }
  .limb { align-items: stretch }
  .node, .node.small { min-width: 0; text-align: left }
  .rail { margin-left: 24px }
  .limb > .node { margin-left: 24px }
  .ajk-row { flex-direction: column; gap: 8px; margin-left: 24px }
  .ajk-row::before { display: none }
  .ajk-row > .node::before { display: none }
}

/* =========================================================================
   Waktu solat
   ========================================================================= */

.solat { display: none }
.solat.on { display: block }
.solat-card {
  background: var(--green-deep); color: #fff; border-radius: 20px;
  padding: clamp(26px, 4vw, 40px); margin-top: 26px; position: relative; overflow: hidden;
}
.solat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 24px }
.solat-head .hijri { font-size: 13px; opacity: .65 }
.solat-next { font-size: 13.5px; opacity: .82 }
.solat-next b { color: var(--gold-light); font-variant-numeric: tabular-nums }
.times { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 10px }
.time {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px; padding: 14px 8px; text-align: center;
  transition: background var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out);
}
.time.now { background: rgba(224, 180, 85, .16); border-color: rgba(224, 180, 85, .45) }
.time .nm { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .62 }
.time .hr { font-size: 18px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums }
.time.now .hr { color: var(--gold-light) }
.solat-foot { font-size: 12px; opacity: .5; margin-top: 18px }

/* =========================================================================
   Ketelusan, jalur CTA, komuniti, footer
   ========================================================================= */

.trans { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.facts { list-style: none; margin-top: 30px }
.facts li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px }
.facts li:last-child { border-bottom: none }
.facts b { min-width: 190px; flex-shrink: 0 }
.facts span { color: var(--muted) }

.strip { background: var(--green-dark); color: #fff; text-align: center; position: relative; overflow: hidden }
.strip h2 { margin-bottom: 12px }
.strip p { opacity: .82; margin-bottom: 28px }
.strip .btn { background: #fff; color: var(--green-dark); box-shadow: none }
.strip .wrap { position: relative; z-index: 1 }

.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px }
.chip {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 100px;
  padding: 12px 22px; font-weight: 600; font-size: 15px;
  transition: transform var(--t-press) var(--ease-out), border-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out);
}
.chip:active { transform: scale(0.97) }

.consent { font-size: 12.5px; color: var(--muted); margin-top: 10px; max-width: 56ch; line-height: 1.55 }

footer { background: var(--green-deep); color: rgba(255, 255, 255, .6); padding: 56px 0 44px; font-size: 14px }
footer strong { color: #fff; display: block; margin-bottom: 6px; font-size: 16px }
footer a { color: rgba(255, 255, 255, .8) }
.fine { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; line-height: 1.7 }

/* ---------- Butang derma melekat (mudah alih) ---------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 88; display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(251, 250, 247, .93); border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.sticky .btn { display: block; text-align: center; padding: 16px }

/* ---------- Corak hiasan (SVG sebaris) ---------- */
.girih { position: absolute; inset: 0; pointer-events: none; opacity: .045; color: var(--green); z-index: 0 }
.strip .girih { color: #fff; opacity: .08 }

/* =========================================================================
   Responsif
   ========================================================================= */

@media (max-width: 940px) {
  .nav-links { display: none }
  .nav-toggle { display: flex }
  .nav-cta { display: none }
}
@media (max-width: 760px) {
  .sticky { display: block }
  body { padding-bottom: 82px }
  .facts li { flex-direction: column; gap: 2px }
  .facts b { min-width: 0 }
  .hero { min-height: 94svh; padding: 104px 0 80px }
  .timeline { padding-left: 26px }
  .tl-item::before { left: -26px }
  .progress .row { flex-direction: column; align-items: flex-start; gap: 2px }
  .progress .target { text-align: left }
}

/* =========================================================================
   Gerakan dikurangkan
   Bermakna lebih lembut, bukan tiada: pudar kelegapan kekal kerana ia
   membantu kefahaman; setiap gerakan kedudukan dibuang.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .js .reveal { transform: none; transition: opacity 300ms ease }
  .js .reveal.in { transform: none }
  .hero-media { transform: none !important }
  .scroll-hint::after { animation: none }
  .timeline::after { transform: scaleY(1) }
  .btn:hover, .card:hover { transform: none }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 200ms !important;
    scroll-behavior: auto !important;
  }
}