/* ============================================================
   i-NAHWA 40 — Sistem Reka Bentuk Premium  (v22)
   Premium Digital Islamic Learning Experience
   ============================================================ */

:root{
  /* Hijau */
  --ink-900:#041F1A;
  --grn-900:#062F27;
  --grn-800:#0B4A3A;
  --grn-700:#115C48;
  --grn-600:#176B57;
  --grn-500:#1E8A6E;
  --grn-400:#33A98A;

  /* Emas */
  --gold-700:#8A6E2F;
  --gold-600:#A88743;
  --gold-500:#B99A52;
  --gold-400:#D6C18A;
  --gold-300:#EBD9A8;
  --gold-200:#F7E7B2;

  /* Krim */
  --cream-100:#FFFDF7;
  --cream-200:#FBF6EA;
  --cream-300:#F7F1E3;
  --cream-400:#EFE5CF;
  --cream-500:#E3D5B6;

  --txt:#1F2937;
  --txt-soft:#4B5563;

  --gold-grad:linear-gradient(135deg,#8A6E2F 0%,#B99A52 22%,#F7E7B2 46%,#D6C18A 62%,#A88743 84%,#8A6E2F 100%);
  --grn-grad:linear-gradient(140deg,#062F27 0%,#0B4A3A 45%,#176B57 100%);

  --shadow-sm:0 1px 2px rgba(6,47,39,.07),0 2px 6px rgba(6,47,39,.05);
  --shadow-md:0 4px 10px rgba(6,47,39,.08),0 10px 26px rgba(6,47,39,.07);
  --shadow-lg:0 10px 22px rgba(6,47,39,.12),0 26px 60px rgba(6,47,39,.13);
  --shadow-gold:0 0 0 1px rgba(185,154,82,.28),0 6px 22px rgba(185,154,82,.26);

  --e-out:cubic-bezier(.22,1,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --e-back:cubic-bezier(.34,1.46,.64,1);
}

/* ---------- Tipografi ---------- */
.ar,[dir="rtl"],[lang="ar"]{
  font-family:"Amiri","Scheherazade New","Noto Naskh Arabic",Traditional Arabic,serif;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
.ar-display{
  font-family:"Amiri","Scheherazade New","Noto Naskh Arabic",serif;
  line-height:2.15; letter-spacing:0;
}
.nh-hadith-text{
  font-family:"Amiri","Scheherazade New","Noto Naskh Arabic",serif;
  line-height:2.5; text-align:right; direction:rtl;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  word-spacing:.06em;
}
.nh-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- Utiliti teras ---------- */
.nh-gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.nh-gold-rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold-400),transparent);border:0}
.nh-no-scrollbar::-webkit-scrollbar{height:0;width:0;display:none}
.nh-no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.nh-thin-scroll::-webkit-scrollbar{height:6px;width:6px}
.nh-thin-scroll::-webkit-scrollbar-thumb{background:rgba(185,154,82,.45);border-radius:99px}
.nh-thin-scroll::-webkit-scrollbar-track{background:transparent}

/* ---------- Kad premium ---------- */
.nh-card{
  position:relative;background:#fff;border-radius:1.25rem;
  border:1px solid rgba(185,154,82,.28);
  box-shadow:var(--shadow-sm);
  transition:transform .42s var(--e-out),box-shadow .42s var(--e-out),border-color .42s var(--e-out);
}
.nh-card-lift:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(185,154,82,.6)}
.nh-card-lift:focus-visible{transform:translateY(-5px);box-shadow:var(--shadow-lg)}

/* Bingkai gradien emas bergerak */
.nh-goldframe{position:relative;isolation:isolate}
.nh-goldframe::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:var(--gold-grad);background-size:220% 220%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.75;z-index:2;pointer-events:none;
  animation:nhGoldPan 9s linear infinite;
}
@keyframes nhGoldPan{0%{background-position:0% 50%}100%{background-position:220% 50%}}

/* Kilauan (shimmer) */
.nh-shimmer{position:relative;overflow:hidden;isolation:isolate}
.nh-shimmer::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:22%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  pointer-events:none;z-index:3;will-change:transform,opacity;
  transform:translate3d(-200%,0,0) skewX(-20deg);
  /* Berulang beberapa kali sahaja: sapuan kilau yang berterusan memaksa
     raster semula di dalam bekas ber-clip dan membebankan skrol. */
  animation:nhSweep 5.2s ease-in-out 3;
}
@keyframes nhSweep{
  0%,52%{transform:translate3d(-200%,0,0) skewX(-20deg);opacity:0}
  60%{opacity:1}
  82%,100%{transform:translate3d(560%,0,0) skewX(-20deg);opacity:0}
}

/* Kaca */
.nh-glass{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
/* Kaca sebenar hanya untuk lapisan statik (modal) supaya skrol kekal lancar */
.nh-glass-blur{
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(255,255,255,.18);
}
.nh-glass-cream{
  background:rgba(255,253,247,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(185,154,82,.26);
}

/* Grain halus */
.nh-grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- Latar arabesque ---------- */
.nh-arabesque{position:relative;isolation:isolate;overflow:hidden}
.nh-arabesque::before{
  content:"";position:absolute;inset:-10%;z-index:-1;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23D6C18A' stroke-width='1.1'%3E%3Cpath d='M80 4l22 22-22 22-22-22z'/%3E%3Cpath d='M80 112l22 22-22 22-22-22z'/%3E%3Cpath d='M4 80l22-22 22 22-22 22z'/%3E%3Cpath d='M112 80l22-22 22 22-22 22z'/%3E%3Ccircle cx='80' cy='80' r='31'/%3E%3Ccircle cx='80' cy='80' r='17'/%3E%3Cpath d='M80 49l31 31-31 31-31-31z'/%3E%3Cpath d='M0 0l26 26M160 0l-26 26M0 160l26-26M160 160l-26-26'/%3E%3C/g%3E%3C/svg%3E");
  background-size:170px 170px;
}
.nh-arabesque-soft::before{opacity:.075}

/* Aurora hijau bergerak */
.nh-aurora::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 46% at 18% 24%,rgba(51,169,138,.34),transparent 62%),
    radial-gradient(34% 40% at 82% 22%,rgba(214,193,138,.28),transparent 60%),
    radial-gradient(44% 50% at 50% 92%,rgba(30,138,110,.30),transparent 64%);
  /* Hanya `opacity` dianimasikan: ia dikendalikan sepenuhnya oleh compositor.
     Menganimasikan transform/blur pada lapisan gradien sebesar ini memaksa
     raster semula setiap frame dan menjatuhkan kadar bingkai. */
  transform:translateZ(0);
  animation:nhAurora 16s ease-in-out infinite alternate;
}
@keyframes nhAurora{0%{opacity:.7}100%{opacity:1}}

/* Lapisan kedua, statik, memberi kedalaman tanpa kos animasi */
.nh-aurora::before{z-index:-2}

/* ---------- Zarah terapung ---------- */
.nh-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.nh-particle{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 34% 34%,#F7E7B2,rgba(185,154,82,0) 70%);
  animation:nhFloat linear infinite;will-change:transform,opacity;
}
@keyframes nhFloat{
  0%{transform:translate3d(0,110%,0) scale(.5);opacity:0}
  12%{opacity:.85}
  88%{opacity:.6}
  100%{transform:translate3d(var(--dx,14px),-18%,0) scale(1.1);opacity:0}
}

/* ---------- Butang ---------- */
.nh-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:800;border-radius:.9rem;cursor:pointer;
  min-height:44px;padding:.72rem 1.3rem;
  transition:transform .26s var(--e-out),box-shadow .26s var(--e-out),background-color .26s var(--e-soft),color .2s;
  border:1px solid transparent;overflow:hidden;isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
.nh-btn:active{transform:translateY(1px) scale(.985)}
.nh-btn-gold{background:var(--gold-grad);background-size:200% 200%;color:var(--grn-900);box-shadow:var(--shadow-gold)}
.nh-btn-gold:hover{transform:translateY(-2px);background-position:100% 50%;box-shadow:0 0 0 1px rgba(185,154,82,.4),0 12px 30px rgba(185,154,82,.4)}
.nh-btn-green{background:var(--grn-800);color:#fff;box-shadow:var(--shadow-md)}
.nh-btn-green:hover{background:var(--grn-600);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.nh-btn-ghost{background:rgba(255,255,255,.85);color:var(--grn-800);border-color:rgba(185,154,82,.4)}
.nh-btn-ghost:hover{background:var(--cream-300);transform:translateY(-2px)}
.nh-btn-outline-gold{background:transparent;color:var(--gold-200);border-color:rgba(214,193,138,.55)}
.nh-btn-outline-gold:hover{background:rgba(214,193,138,.14);transform:translateY(-2px)}

/* Denyut halus pada CTA utama */
.nh-pulse-ring::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;
  border:2px solid rgba(214,193,138,.6);
  animation:nhPulseRing 2.8s var(--e-out) infinite;
}
@keyframes nhPulseRing{
  0%{transform:scale(.97);opacity:.75}
  70%{transform:scale(1.12);opacity:0}
  100%{opacity:0}
}

/* ---------- Fokus boleh capai ---------- */
:where(button,a,[tabindex],input,select,textarea):focus-visible{
  outline:3px solid var(--gold-500);outline-offset:3px;border-radius:.6rem;
}
.nh-focus-dark:focus-visible{outline-color:var(--gold-200)}

/* ---------- Peralihan halaman ---------- */
.nh-page{animation:nhPageIn .44s var(--e-out) both}
@keyframes nhPageIn{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}
.nh-panel-in{animation:nhPanelIn .34s var(--e-out) both}
@keyframes nhPanelIn{
  from{opacity:0;transform:translate3d(0,10px,0) scale(.992)}
  to{opacity:1;transform:none}
}

/* Masuk berperingkat */
.nh-rise{animation:nhRise .62s var(--e-out) both}
@keyframes nhRise{
  from{opacity:0;transform:translate3d(0,26px,0)}
  to{opacity:1;transform:none}
}
.nh-d1{animation-delay:.06s}.nh-d2{animation-delay:.13s}.nh-d3{animation-delay:.2s}
.nh-d4{animation-delay:.27s}.nh-d5{animation-delay:.34s}.nh-d6{animation-delay:.41s}
.nh-d7{animation-delay:.48s}.nh-d8{animation-delay:.55s}

/* Reveal bila masuk skrin */
.nh-reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity .66s var(--e-out),transform .66s var(--e-out)}
.nh-reveal.is-in{opacity:1;transform:none}

/* ---------- Cincin kemajuan ---------- */
.nh-ring-track{stroke:rgba(185,154,82,.2)}
.nh-ring-fill{
  stroke-linecap:round;
  transition:stroke-dashoffset 1.1s var(--e-out);
  filter:drop-shadow(0 0 4px rgba(185,154,82,.4));
}

/* ---------- Bar kemajuan ---------- */
.nh-bar{position:relative;overflow:hidden;background:var(--cream-400);border-radius:99px}
.nh-bar-fill{
  position:relative;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-300) 45%,var(--grn-500));
  transition:width 1s var(--e-out);
  box-shadow:0 0 12px rgba(185,154,82,.45);
}
.nh-bar-fill::after{
  content:"";position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-100%);animation:nhBarSheen 2.6s ease-in-out 3;
}
@keyframes nhBarSheen{0%,60%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
.nh-shimmer:hover::after{animation:nhSweep 1.9s ease-in-out 1}

/* ---------- Stepper 8 langkah ---------- */
.nh-step{
  position:relative;flex:0 0 auto;
  transition:transform .3s var(--e-out);
  -webkit-tap-highlight-color:transparent;
}
.nh-step:not(:disabled):hover{transform:translateY(-3px)}
.nh-step-dot{
  width:2.15rem;height:2.15rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.72rem;
  transition:all .36s var(--e-out);
  border:2px solid transparent;
}
.nh-step-done .nh-step-dot{background:var(--grn-600);color:var(--gold-200);border-color:var(--grn-500)}
.nh-step-current .nh-step-dot{
  background:var(--gold-grad);color:var(--grn-900);border-color:var(--gold-200);
  box-shadow:0 0 0 4px rgba(214,193,138,.28);
  animation:nhStepPulse 2.4s var(--e-soft) infinite;
}
.nh-step-todo .nh-step-dot{background:#fff;color:var(--txt-soft);border-color:var(--cream-500)}
.nh-step-locked .nh-step-dot{background:#F1EEE6;color:#A8A29E;border-color:#E2DDD0}
@keyframes nhStepPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(214,193,138,.26)}
  50%{box-shadow:0 0 0 8px rgba(214,193,138,.08)}
}
.nh-step-line{height:2px;flex:1 1 auto;min-width:10px;background:var(--cream-500);border-radius:99px;transition:background .5s var(--e-out)}
.nh-step-line.is-done{background:linear-gradient(90deg,var(--grn-500),var(--gold-400))}

/* Kesan "langkah selesai" */
@keyframes nhStepPop{
  0%{transform:scale(1)}
  40%{transform:scale(1.28)}
  70%{transform:scale(.94)}
  100%{transform:scale(1)}
}
.nh-step-pop{animation:nhStepPop .62s var(--e-back)}

/* ---------- Badge ---------- */
.nh-badge{position:relative;display:block;max-width:100%;height:auto;transition:transform .45s var(--e-out),filter .45s var(--e-out)}
.nh-badge-unlocked:hover{transform:translateY(-6px) scale(1.035)}
.nh-badge-locked{filter:grayscale(.88) opacity(.7) contrast(.96) brightness(1.02)}
.nh-badge-locked:hover{filter:grayscale(.6) opacity(.86)}
.nh-badge-locked:hover{transform:translateY(-3px)}
.nh-badge-spin{transform-origin:50% 50%;animation:nhSpin 26s linear infinite}
.nh-badge-spin-rev{transform-origin:50% 50%;animation:nhSpin 34s linear infinite reverse}
@keyframes nhSpin{to{transform:rotate(360deg)}}
.nh-badge-glow{
  animation:nhBadgeGlow 3.6s ease-in-out infinite;
  transform-origin:50% 50%;
}
@keyframes nhBadgeGlow{0%,100%{opacity:.34}50%{opacity:.78}}
.nh-badge-sheen{animation:nhBadgeSheen 4.6s ease-in-out infinite}
@keyframes nhBadgeSheen{0%,58%{transform:translateX(-135%)}74%,100%{transform:translateX(135%)}}

/* Urutan buka badge */
@keyframes nhBadgeReveal{
  0%{opacity:0;transform:scale(.24) rotate(-26deg)}
  46%{opacity:1;transform:scale(1.14) rotate(7deg)}
  68%{transform:scale(.96) rotate(-2.5deg)}
  84%{transform:scale(1.03) rotate(1deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.nh-badge-reveal{animation:nhBadgeReveal 1.15s var(--e-out) both}
@keyframes nhHalo{
  0%{opacity:0;transform:scale(.4)}
  30%{opacity:.9}
  100%{opacity:0;transform:scale(2.15)}
}
.nh-halo{animation:nhHalo 1.7s var(--e-out) both}
.nh-halo-2{animation-delay:.32s}
.nh-halo-3{animation-delay:.64s}
@keyframes nhRayTurn{to{transform:rotate(360deg)}}
.nh-rays{animation:nhRayTurn 16s linear infinite;transform-origin:50% 50%}

/* ---------- Konfeti ---------- */
.nh-confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:230;overflow:hidden}
.nh-confetti{position:absolute;top:-6vh;will-change:transform,opacity;border-radius:1px}
@keyframes nhConfettiFall{
  0%{transform:translate3d(0,-10vh,0) rotate(0);opacity:0}
  8%{opacity:1}
  100%{transform:translate3d(var(--cx,0),108vh,0) rotate(var(--cr,540deg));opacity:0}
}

/* ---------- Toast ---------- */
.nh-toast-layer{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:max(1rem,env(safe-area-inset-bottom));
  z-index:240;display:flex;flex-direction:column;gap:.5rem;
  align-items:center;width:calc(100% - 1.5rem);max-width:26rem;pointer-events:none;
}
.nh-toast{
  pointer-events:auto;width:100%;
  display:flex;align-items:center;gap:.7rem;
  padding:.72rem .95rem;border-radius:1rem;
  background:linear-gradient(135deg,var(--grn-900),var(--grn-700));
  color:#fff;box-shadow:var(--shadow-lg),0 0 0 1px rgba(214,193,138,.4);
  animation:nhToastIn .42s var(--e-back) both;
}
.nh-toast.is-out{animation:nhToastOut .3s var(--e-soft) both}
.nh-toast-warn{background:linear-gradient(135deg,#7C2D12,#9A3412)}
.nh-toast-gold{background:var(--gold-grad);color:var(--grn-900);box-shadow:var(--shadow-lg)}
@keyframes nhToastIn{from{opacity:0;transform:translate3d(0,26px,0) scale(.94)}to{opacity:1;transform:none}}
@keyframes nhToastOut{to{opacity:0;transform:translate3d(0,14px,0) scale(.97)}}
@media(min-width:768px){
  .nh-toast-layer{left:auto;right:1.25rem;transform:none;align-items:flex-end;bottom:1.25rem}
}

/* ---------- XP terapung ---------- */
.nh-xp-float{
  position:fixed;z-index:245;pointer-events:none;
  font-weight:900;font-size:1.05rem;
  color:var(--gold-600);text-shadow:0 2px 10px rgba(255,255,255,.9),0 0 18px rgba(214,193,138,.6);
  animation:nhXpFloat 1.45s var(--e-out) both;
}
@keyframes nhXpFloat{
  0%{opacity:0;transform:translate(-50%,6px) scale(.7)}
  18%{opacity:1;transform:translate(-50%,-6px) scale(1.16)}
  40%{transform:translate(-50%,-22px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-72px) scale(.94)}
}

/* ---------- Maklum balas latihan ---------- */
@keyframes nhShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-7px)}
  30%{transform:translateX(6px)}
  45%{transform:translateX(-4px)}
  62%{transform:translateX(3px)}
  80%{transform:translateX(-2px)}
}
.nh-shake{animation:nhShake .52s var(--e-soft)}
@keyframes nhPopIn{
  0%{opacity:0;transform:scale(.7)}
  55%{opacity:1;transform:scale(1.1)}
  100%{opacity:1;transform:scale(1)}
}
.nh-pop{animation:nhPopIn .46s var(--e-back) both}
@keyframes nhDrawCheck{to{stroke-dashoffset:0}}
.nh-check-path{stroke-dasharray:42;stroke-dashoffset:42;animation:nhDrawCheck .58s var(--e-out) .12s forwards}

/* Cahaya berjaya */
@keyframes nhSuccessBurst{
  0%{opacity:.75;transform:scale(.5)}
  100%{opacity:0;transform:scale(1.9)}
}
.nh-success-burst{animation:nhSuccessBurst .85s var(--e-out) both}

/* ---------- Modal ---------- */
.nh-overlay{animation:nhFadeIn .3s var(--e-soft) both}
@keyframes nhFadeIn{from{opacity:0}to{opacity:1}}
.nh-modal{animation:nhModalIn .5s var(--e-back) both}
@keyframes nhModalIn{
  from{opacity:0;transform:translate3d(0,22px,0) scale(.95)}
  to{opacity:1;transform:none}
}

/* ---------- Laluan pembelajaran (Journey) ---------- */
.nh-journey-line{
  stroke-dasharray:var(--len,1000);
  stroke-dashoffset:var(--len,1000);
  animation:nhDrawLine 2.4s var(--e-out) .3s forwards;
}
@keyframes nhDrawLine{to{stroke-dashoffset:0}}
.nh-node{transition:transform .4s var(--e-out)}
.nh-node:hover{transform:translateY(-4px)}
.nh-node-pulse{animation:nhNodePulse 2.6s ease-in-out infinite}
@keyframes nhNodePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(214,193,138,.55)}
  60%{box-shadow:0 0 0 14px rgba(214,193,138,0)}
}

/* Kad hadis pada laluan */
.nh-hcard{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),border-color .4s;
}
.nh-hcard::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:radial-gradient(60% 70% at 85% 0%,rgba(214,193,138,.3),transparent 70%);
  transition:opacity .5s var(--e-out);
}
.nh-hcard:hover::before,.nh-hcard:focus-within::before{opacity:1}
.nh-hcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(185,154,82,.62)}
.nh-hcard > *{position:relative;z-index:1}
.nh-hcard-motif{
  position:absolute;inset:auto -22px -26px auto;width:120px;height:120px;z-index:0;opacity:.09;
  transition:transform .8s var(--e-out),opacity .6s;
}
.nh-hcard:hover .nh-hcard-motif{transform:rotate(22deg) scale(1.14);opacity:.17}

/* Tilt sangat minimal (desktop sahaja) */
@media(hover:hover) and (pointer:fine) and (min-width:1024px){
  .nh-tilt{transform-style:preserve-3d;will-change:transform}
}

/* ---------- Kod warna nahu ---------- */
.nh-word{
  display:inline-block;cursor:pointer;border-radius:.55rem;
  transition:transform .26s var(--e-out),box-shadow .26s var(--e-out),filter .3s,opacity .3s;
  -webkit-tap-highlight-color:transparent;
}
.nh-word:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 6px 18px rgba(6,47,39,.16)}
.nh-word-active{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 0 0 3px rgba(185,154,82,.55),0 10px 24px rgba(6,47,39,.2);
  z-index:5;position:relative;
}
.nh-word-dim{opacity:.28;filter:saturate(.35)}
.nh-word-focus{
  box-shadow:0 0 0 3px rgba(185,154,82,.6),0 0 22px rgba(214,193,138,.6);
  transform:translateY(-2px) scale(1.04);
}
@keyframes nhWordGlow{
  0%,100%{box-shadow:0 0 0 3px rgba(185,154,82,.34)}
  50%{box-shadow:0 0 0 5px rgba(185,154,82,.62),0 0 20px rgba(214,193,138,.5)}
}
.nh-word-glow{animation:nhWordGlow 1.9s ease-in-out infinite}

/* ---------- Penyamaan audio ---------- */
.nh-eq{display:flex;align-items:flex-end;gap:2px;height:18px}
.nh-eq span{
  width:3px;border-radius:2px;background:currentColor;
  animation:nhEq .95s ease-in-out infinite;
}
.nh-eq span:nth-child(1){height:40%;animation-delay:0s}
.nh-eq span:nth-child(2){height:75%;animation-delay:.12s}
.nh-eq span:nth-child(3){height:100%;animation-delay:.24s}
.nh-eq span:nth-child(4){height:62%;animation-delay:.36s}
.nh-eq span:nth-child(5){height:88%;animation-delay:.18s}
.nh-eq span:nth-child(6){height:48%;animation-delay:.3s}
.nh-eq span:nth-child(7){height:70%;animation-delay:.06s}
@keyframes nhEq{0%,100%{transform:scaleY(.36)}50%{transform:scaleY(1)}}
.nh-eq-idle span{animation:none;transform:scaleY(.42)}

/* ---------- Skrin master ---------- */
.nh-master-bg{
  background:
    radial-gradient(60% 70% at 50% 18%,rgba(214,193,138,.36),transparent 70%),
    linear-gradient(160deg,#041F1A,#062F27 45%,#0B4A3A);
}
@keyframes nhMasterRise{
  0%{opacity:0;transform:translateY(40px) scale(.82)}
  60%{opacity:1;transform:translateY(-8px) scale(1.04)}
  100%{opacity:1;transform:none}
}
.nh-master-rise{animation:nhMasterRise 1.25s var(--e-out) both}
@keyframes nhBeam{
  0%,100%{opacity:.14;transform:rotate(var(--r,0deg)) scaleY(.88)}
  50%{opacity:.4;transform:rotate(var(--r,0deg)) scaleY(1.06)}
}
.nh-beam{
  position:absolute;left:50%;top:50%;width:2px;height:150%;
  transform-origin:50% 0;
  background:linear-gradient(to bottom,rgba(247,231,178,.85),transparent 72%);
  animation:nhBeam 5s ease-in-out infinite;
}

/* ---------- Koleksi lengkap ---------- */
@keyframes nhCompleteGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(214,193,138,.45),0 0 26px rgba(214,193,138,.28)}
  50%{box-shadow:0 0 0 1px rgba(214,193,138,.75),0 0 46px rgba(214,193,138,.55)}
}
.nh-collection-complete{animation:nhCompleteGlow 3.4s ease-in-out infinite}

/* ---------- Streak ---------- */
@keyframes nhFlame{
  0%,100%{transform:scale(1) rotate(-1.5deg)}
  50%{transform:scale(1.1) rotate(1.5deg)}
}
.nh-flame{animation:nhFlame 1.9s ease-in-out infinite;transform-origin:50% 90%}

/* ---------- Skrol mendatar stepper mobile ---------- */
.nh-hscroll{
  display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:.35rem;-webkit-overflow-scrolling:touch;
}
.nh-hscroll > *{scroll-snap-align:center}

/* ---------- Pemisah hiasan ---------- */
.nh-divider{display:flex;align-items:center;gap:.85rem;color:var(--gold-500)}
.nh-divider::before,.nh-divider::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(185,154,82,.55),transparent);
}

/* ---------- Bar kemajuan atas halaman ---------- */
.nh-topbar{
  position:fixed;left:0;top:0;height:3px;z-index:60;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-200),var(--grn-400));
  box-shadow:0 0 12px rgba(214,193,138,.6);
  transition:width .5s var(--e-out);
}

/* ---------- Sasaran sentuh minimum ---------- */
.nh-tap{min-width:44px;min-height:44px}

/* ---------- Lencana status ---------- */
.nh-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.2rem .6rem;border-radius:99px;
  font-size:.68rem;font-weight:800;letter-spacing:.02em;white-space:nowrap;
}
.nh-pill-done{background:rgba(23,107,87,.12);color:var(--grn-700);border:1px solid rgba(23,107,87,.3)}
.nh-pill-active{background:rgba(185,154,82,.16);color:var(--gold-700);border:1px solid rgba(185,154,82,.42)}
.nh-pill-idle{background:rgba(31,41,55,.06);color:var(--txt-soft);border:1px solid rgba(31,41,55,.12)}

/* ---------- Mod prestasi mobile ---------- */
@media(max-width:767px){
  .nh-aurora::after{animation:none;filter:blur(3px)}
  .nh-particles{display:none}
  .nh-grain::after{display:none}
  .nh-shimmer::after{animation-duration:7s}
  .nh-badge-spin,.nh-badge-spin-rev{animation-duration:48s}
  .nh-goldframe::before{animation:none;background-position:30% 50%}
  .nh-card-lift:hover{transform:none}
  .nh-hcard:hover{transform:none}
  .nh-hcard-motif{inset:-18px -18px auto auto;width:96px;height:96px;opacity:.07}
  .nh-glass{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
}
/* Peranti berkuasa rendah / data saver */
@media(update:slow){
  .nh-aurora::after,.nh-particles,.nh-shimmer::after,.nh-bar-fill::after{animation:none!important}
}

/* ---------- Hormati prefers-reduced-motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .nh-particles,.nh-confetti-layer,.nh-beam{display:none!important}
  .nh-reveal{opacity:1!important;transform:none!important}
  .nh-shimmer::after,.nh-bar-fill::after{display:none!important}
}

/* ---------- Kontras tinggi ---------- */
@media(prefers-contrast:more){
  .nh-card{border-color:var(--gold-600)}
  .nh-pill-idle{color:#1F2937}
}

/* ---------- Cetak ---------- */
@media print{
  .nh-toast-layer,.nh-confetti-layer,.nh-particles{display:none!important}
}

/* Langkah semasa yang juga sudah selesai */
.nh-step-active .nh-step-dot{
  box-shadow:0 0 0 4px rgba(214,193,138,.42);
  border-color:var(--gold-300);
}

/* Petunjuk skrol mendatar pada stepper */
.nh-hscroll-wrap{position:relative}
.nh-hscroll-wrap::after{
  content:"";position:absolute;right:0;top:0;bottom:.35rem;width:34px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 78%);
  border-radius:0 .75rem .75rem 0;
}
@media(min-width:640px){.nh-hscroll-wrap::after{display:none}}

/* ---------- Prestasi: animasi lencana hanya bila diperlukan ---------- */
.nh-badge-spin-idle,.nh-badge-spin-rev-idle{transform-origin:50% 50%;transition:transform 1.1s var(--e-out)}
.nh-badge-sheen-idle{transform:translateX(-135%)}
.nh-badge-card:hover .nh-badge-spin-idle,.nh-badge-card:focus-visible .nh-badge-spin-idle{transform:rotate(22deg)}
.nh-badge-card:hover .nh-badge-spin-rev-idle,.nh-badge-card:focus-visible .nh-badge-spin-rev-idle{transform:rotate(-16deg)}
.nh-badge-card:hover .nh-badge-sheen-idle{animation:nhBadgeSheen 1.4s ease-in-out}

/* Elak kerja render di luar skrin */
.nh-lazy-card{content-visibility:auto;contain-intrinsic-size:auto 250px}
.nh-lazy-row{content-visibility:auto;contain-intrinsic-size:auto 360px}

@media(prefers-reduced-motion:reduce){
  .nh-badge-spin-idle,.nh-badge-spin-rev-idle{transition:none}
  .nh-badge-card:hover .nh-badge-sheen-idle{animation:none}
}