/* mybilikdarjah.com - Buku Nota Saintis Malaysia
   Palet dan tipografi mengikut master-prompt/part8 + part9 Bahagian 2-4 */
:root{
  --navy:#1B2A4A; --navy-panel:#22345A; --paper:#F8FAFC; --grid:#E2E8F0;
  --teal:#14B8A6; --teal-dark:#0B7268; --kuning:#FFC83D;
  /* Aksen jenama. Versi penuh = grafik, border, teks BESAR sahaja.
     Versi -teks = lulus kontras 4.5:1 untuk teks kecil. Dikira, bukan diagak. */
  --pink:#FE019A;   --pink-teks:#C9007C;
  --oren:#FF4500;   --oren-teks:#C73500;  --oren-isi:#C73500; --oren-isi-hover:#A82C00;
  --salah:#C2203C;
  --teks:#1B2A4A; --teks-2:#4A5A78; --kad:#FFFFFF; --sempadan:#E2E8F0;
  --bayang-1:0 1px 2px rgba(27,42,74,.06), 0 2px 8px rgba(27,42,74,.06);
  --bayang-2:0 4px 12px rgba(27,42,74,.10), 0 12px 32px rgba(27,42,74,.10);
  --r-s:8px; --r-m:16px; --r-l:24px;
  --fd:"Nunito Sans",system-ui,sans-serif;
  --fb:"Inter",system-ui,sans-serif;
  --fm:"JetBrains Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0F172A; --grid:#1E2B46; --kad:#16233B; --navy-panel:#22345A;
    --teks:#F8FAFC; --teks-2:#CBD5E1; --sempadan:#2A3A5C;
    --teal:#2DD4BF; --teal-dark:#2DD4BF; --salah:#FF7F93;
    --pink:#FF4FB8; --pink-teks:#FF4FB8;
    --oren:#FF7A45; --oren-teks:#FF7A45; --oren-isi:#C73500; --oren-isi-hover:#A82C00;
    --bayang-1:0 1px 2px rgba(0,0,0,.3); --bayang-2:0 8px 24px rgba(0,0,0,.4);
  }
}
/* ================= TEMA FANTASI =================
   Asas perkamen hangat (lembut, pudar) + aksen cerah (ceria).
   Semua nilai disemak kontras: aksen -teks lulus 4.5:1 untuk teks kecil,
   aksen penuh untuk grafik dan teks besar sahaja. */
html[data-tema="fantasi"]{
  --paper:#FBF6EC; --grid:#EADFC9; --kad:#FFFFFF; --sempadan:#E3D8C2;
  --navy:#343F63; --navy-panel:#45517A;
  --teks:#27304A; --teks-2:#5A6075;
  --teal:#2E8BD0; --teal-dark:#1F6FB2;      /* biru langit */
  --sage:#6B8F71; --sage-teks:#4A6B50;      /* hijau hutan */
  --ungu:#8E86C8; --ungu-teks:#5E54A0;      /* ungu senja */
  --kuning:#F0C560; --emas-teks:#8A640B;
  --bayang-1:0 1px 2px rgba(74,58,32,.07), 0 2px 8px rgba(74,58,32,.07);
  --bayang-2:0 4px 12px rgba(74,58,32,.12), 0 12px 32px rgba(74,58,32,.12);
}
@media (prefers-color-scheme:dark){
  html[data-tema="fantasi"]{
    --paper:#171C30; --grid:#262E4A; --kad:#222A44; --sempadan:#323B5C;
    --navy:#11162B; --navy-panel:#2A3352;
    --teks:#F2EFE8; --teks-2:#BFC6D8;
    --teal:#6FC0FF; --teal-dark:#6FC0FF;
    --sage:#8FC79A; --sage-teks:#8FC79A;
    --ungu:#B3A9F0; --ungu-teks:#B3A9F0;
    --kuning:#F0C560; --emas-teks:#F0C560;
    --pink:#FF4FB8; --pink-teks:#FF4FB8;
    --oren:#FF9166; --oren-teks:#FF9166;
    --bayang-1:0 1px 2px rgba(0,0,0,.35); --bayang-2:0 8px 24px rgba(0,0,0,.45);
  }
}
/* latar perkamen: titik halus, bukan grid teknikal */
html[data-tema="fantasi"] body{
  background-image:radial-gradient(var(--grid) 1.2px, transparent 1.2px);
  background-size:24px 24px;
}
html[data-tema="fantasi"] .senarai-nota li:nth-child(3n) a{border-left-color:var(--ungu)}
html[data-tema="fantasi"] .kad.a-teal .ikon{background:#1F6FB2; color:#FFFFFF}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--teks);
  font-family:var(--fb); font-size:17px; line-height:1.65;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px; background-attachment:fixed;
}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,.kick{font-family:var(--fd)}
h1{font-size:clamp(32px,5vw,56px); line-height:1.1; font-weight:900; letter-spacing:-.02em; margin:0 0 16px}
h2{font-size:clamp(24px,3vw,32px); font-weight:800; line-height:1.2; margin:48px 0 16px}
h3{font-size:20px; font-weight:800; margin:32px 0 8px}
p{margin:0 0 16px}
a{color:var(--teal-dark); text-decoration-thickness:1.5px; text-underline-offset:3px}
@media (prefers-color-scheme:dark){a{color:var(--teal)}}
code{font-family:var(--fm); font-size:.88em; background:var(--grid); padding:2px 6px; border-radius:6px}
.kick{font-family:var(--fm); font-size:13px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal-dark); margin:0 0 8px}
.kick.k-pink{color:var(--pink-teks)}
.kick.k-oren{color:var(--oren-teks)}
.bungkus{max-width:1080px; margin:0 auto; padding:0 24px}
main.bungkus{padding-top:40px; padding-bottom:16px}
.sempit{max-width:720px}

/* --- jalur jenama: teal / pink / jingga --- */
.jalur-jenama{display:flex; height:4px}
.jalur-jenama i{flex:1}
.jalur-jenama i:nth-child(1){background:var(--teal)}
.jalur-jenama i:nth-child(2){background:var(--pink)}
.jalur-jenama i:nth-child(3){background:var(--oren)}

/* --- nav --- */
header.atas{background:var(--navy); color:#F8FAFC; position:sticky; top:0; z-index:50;
  box-shadow:var(--bayang-1)}
.navbar{display:flex; align-items:center; gap:24px; min-height:64px; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--fd); font-weight:900;
  font-size:19px; color:#F8FAFC; text-decoration:none; letter-spacing:-.01em}
.logo .tanda{width:32px; height:32px; border-radius:var(--r-s); background:var(--teal);
  display:grid; place-items:center; color:var(--navy); flex:none}
.logo .tanda svg{width:19px; height:19px; stroke-width:2.4}
.navbar nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
.navbar nav a{color:#CBD5E1; text-decoration:none; font-size:15px; font-weight:600;
  padding:8px 12px; border-radius:var(--r-s)}
.navbar nav a:hover,.navbar nav a:focus-visible{color:#F8FAFC; background:var(--navy-panel)}
.navbar nav a[aria-current=page]{color:var(--kuning)}

/* --- hero --- */
.hero{padding:24px 0 48px}
.hero p.lead{font-size:clamp(18px,2.2vw,21px); color:var(--teks-2); max-width:62ch; margin:0 0 24px}
.angka{display:flex; gap:32px; flex-wrap:wrap; margin:32px 0 0; padding:0; list-style:none}
.angka li{min-width:120px}
.angka b{display:block; font-family:var(--fd); font-size:36px; font-weight:900; line-height:1;
  color:var(--teal-dark)}
/* 36px tebal = teks besar, jadi aksen penuh dibenarkan di sini */
.angka li:nth-child(2) b{color:var(--pink)}
.angka li:nth-child(3) b{color:var(--oren)}
.angka li:nth-child(4) b{color:var(--teal)}
.angka span{font-family:var(--fm); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teks-2)}

/* --- kad --- */
.grid-kad{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:32px 0}
.kad{background:var(--kad); border:1px solid var(--sempadan); border-radius:var(--r-l);
  padding:24px; box-shadow:var(--bayang-1); display:flex; flex-direction:column; gap:8px}
.kad h3{margin:0}
.kad{position:relative; overflow:hidden}
.kad::before{content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--navy-panel)}
.kad.a-teal::before{background:var(--teal)}
.kad.a-pink::before{background:var(--pink)}
.kad.a-oren::before{background:var(--oren)}
.kad .ikon{width:48px; height:48px; border-radius:var(--r-m); background:var(--navy);
  color:var(--kuning); display:grid; place-items:center; margin-bottom:8px}
/* Jubin ikon: nilai tetap, TIDAK ikut mod gelap. Sebab: aksen yang
   dicerahkan untuk mod gelap tidak cukup kontras dengan ikon putih. */
.kad.a-teal .ikon{background:#14B8A6; color:#06231F}
.kad.a-pink .ikon{background:#FE019A; color:#FFFFFF}
.kad.a-oren .ikon{background:#FF4500; color:#FFFFFF}
.kad .ikon svg{width:26px; height:26px}
.kad p{color:var(--teks-2); font-size:15.5px; margin:0}
.kad .meta{font-family:var(--fm); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teks-2); margin-top:auto; padding-top:16px}
a.kad{text-decoration:none; color:inherit; transition:box-shadow .2s ease,transform .2s ease}
a.kad:hover,a.kad:focus-visible{box-shadow:var(--bayang-2); transform:translateY(-2px)}
a.kad:focus-visible{outline:3px solid var(--pink); outline-offset:3px}

/* --- butang --- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--fd); font-weight:800;
  font-size:16px; padding:14px 24px; border-radius:var(--r-m); text-decoration:none;
  border:2px solid transparent; cursor:pointer}
.btn svg{width:20px; height:20px}
.btn-utama{background:var(--oren-isi); color:#fff}
.btn-utama:hover{background:var(--oren-isi-hover)}
.btn-kedua{background:transparent; color:var(--teks); border-color:var(--sempadan)}
.btn-kedua:hover{border-color:var(--pink); color:var(--pink-teks)}
.btn:focus-visible{outline:3px solid var(--pink); outline-offset:3px}
.btn-baris{display:flex; gap:12px; flex-wrap:wrap; margin:24px 0}

/* --- jadual --- */
table{width:100%; border-collapse:collapse; margin:24px 0; font-size:15.5px}
th,td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--sempadan)}
th{font-family:var(--fm); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teks-2); font-weight:700; border-bottom:2px solid var(--pink)}
td b{font-family:var(--fd)}

/* --- nota/artikel --- */
article.nota{max-width:720px}
article.nota ol,article.nota ul{margin:0 0 16px; padding-left:24px}
article.nota li{margin-bottom:8px}
article.nota .tarikh{font-family:var(--fm); font-size:13px; color:var(--teks-2)}
.senarai-nota{list-style:none; padding:0; margin:32px 0; display:grid; gap:16px}
.senarai-nota a{display:block; background:var(--kad); border:1px solid var(--sempadan);
  border-left:4px solid var(--teal); border-radius:var(--r-m); padding:20px 24px;
  text-decoration:none; color:inherit}
.senarai-nota li:nth-child(2n) a{border-left-color:var(--pink)}
.senarai-nota li:nth-child(3n) a{border-left-color:var(--oren)}
.senarai-nota a:hover,.senarai-nota a:focus-visible{box-shadow:var(--bayang-1)}
.senarai-nota h3{margin:0 0 4px; font-size:19px}
.senarai-nota p{margin:0; color:var(--teks-2); font-size:15.5px}

/* --- nota amaran --- */
.perhatian{background:var(--kad); border:1px solid var(--sempadan);
  border-left:4px solid var(--kuning); border-radius:var(--r-s); padding:16px 20px; margin:24px 0}
.perhatian p:last-child{margin:0}
.perhatian strong{font-family:var(--fd)}

/* --- footer --- */
footer.bawah{background:var(--navy); color:#CBD5E1; margin-top:80px; padding:48px 0 32px;
  font-size:15px}
footer.bawah .kolum{display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer.bawah h4{font-family:var(--fd); color:#F8FAFC; font-size:15px; margin:0 0 12px;
  text-transform:uppercase; letter-spacing:.06em}
footer.bawah a{color:#CBD5E1; text-decoration:none; display:block; padding:4px 0}
footer.bawah a:hover{color:var(--kuning)}
footer.bawah .hak{border-top:1px solid #2A3A5C; margin-top:32px; padding-top:24px;
  font-family:var(--fm); font-size:12.5px; color:#8A9AB8}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ================= GERAKAN =================
   Tiga keluarga sahaja (Part 9 Bahagian 7):
     Reveal     300-500ms ease-out   — kandungan masuk
     Emphasis   400-700ms ease-in-out — sentuh/tumpu
     Transition 300-600ms ease-out   — pertukaran keadaan
   Hanya transform dan opacity digunakan supaya ia berjalan pada GPU dan
   tidak memaksa susun atur dikira semula.
   Kelas .gerak hanya ditambah oleh JS apabila pengguna TIDAK meminta
   gerakan dikurangkan. Tanpa JS, semuanya kelihatan seperti biasa. */

.gerak .hero > *,
.gerak h2,
.gerak .grid-kad > *,
.gerak .senarai-nota > li,
.gerak table,
.gerak .perhatian{
  opacity:0; transform:translateY(14px);
}
.gerak .nampak{
  opacity:1; transform:none;
  transition:opacity .45s cubic-bezier(.22,.61,.36,1),
             transform .45s cubic-bezier(.22,.61,.36,1);
}

/* Emphasis: kad diangkat sedikit, jalur aksen menebal, ikon membesar halus */
.kad{transition:box-shadow .35s ease-out, transform .35s ease-out}
.kad::before{transition:height .35s ease-out}
.kad .ikon{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
a.kad:hover::before,a.kad:focus-visible::before{height:7px}
a.kad:hover .ikon,a.kad:focus-visible .ikon{transform:scale(1.08) rotate(-3deg)}

.senarai-nota a{transition:box-shadow .35s ease-out, border-left-width .3s ease-out,
  transform .35s ease-out}
.senarai-nota a:hover,.senarai-nota a:focus-visible{border-left-width:7px;
  transform:translateX(3px)}

/* Transition: butang dan nav */
.btn{transition:background .25s ease-out, border-color .25s ease-out,
  color .25s ease-out, transform .12s ease-out}
.btn:active{transform:scale(.975)}
.navbar nav a{transition:background .25s ease-out, color .25s ease-out}
.logo .tanda{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.logo:hover .tanda{transform:rotate(-8deg) scale(1.06)}

/* Nombor hero: hanya tukar semasa dikira, tiada lonjakan susun atur */
.angka b{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .gerak .hero > *,.gerak h2,.gerak .grid-kad > *,.gerak .senarai-nota > li,
  .gerak table,.gerak .perhatian{opacity:1; transform:none}
  *{animation:none !important; transition:none !important}
}