:root{
      --orange-1:#7a260a;
      --orange-2:#f97316;
      --orange-3:#ff6a00;
    }
    html,body{height:100%;font-family:Inter,system-ui,sans-serif}
    body.theme-dark{
      background: radial-gradient(1200px 600px at 80% -20%, #1a1a1a, #0b0b0b 35%), #0b0b0b;
      color:#fff;
    }
    body.theme-orange{
      background: linear-gradient(180deg, var(--orange-1) 0%, var(--orange-2) 55%, var(--orange-3) 100%);
      color:#fff;
    }
    .card{backdrop-filter: blur(8px);}
    .glow-logo{filter: drop-shadow(0 0 12px rgba(249,115,22,0.9)) drop-shadow(0 0 25px rgba(249,115,22,0.6));transition:all .8s ease-in-out;}
    .glow-logo:hover{filter: drop-shadow(0 0 20px rgba(249,115,22,1)) drop-shadow(0 0 40px rgba(249,115,22,0.8)) brightness(1.2);transform:scale(1.05);}
	
	/* Animasi hover untuk share button */
#shareBtn {
  transition: transform 0.3s ease, box-shadow 0.4s ease;
}
#shareBtn:hover {
  transform: rotate(10deg) scale(1.1);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.6),
              0 0 24px rgba(249, 115, 22, 0.4);
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(249,115,22,0.4); }
  50% { box-shadow: 0 0 14px rgba(249,115,22,0.8); }
}
#shareBtn {
  animation: pulseGlow 2.5s ease-in-out infinite;
}

/* --- Shake animation --- */
@keyframes shake {
  0%, 100% { transform: translateY(0) translateX(0); }
  20%, 60% { transform: translateY(-2px) translateX(-2px); }
  40%, 80% { transform: translateY(-2px) translateX(2px); }
}


/* Kawasan hit lebih besar sekeliling kad */
.hit-wrap {
  padding-block: 6px;             /* buffer atas & bawah */
}

/* Link tak bergerak; yang bergerak hanya isi */
.link-inner {
  transition: transform .3s cubic-bezier(.2,.8,.2,1),
              filter .35s ease, color .25s ease, opacity .25s ease;
  will-change: transform;
}

/* Hover trigger pada hit-wrap (lebih luas), gerakkan isi */
.hit-wrap:hover .link-inner,
.hit-wrap:focus-within .link-inner {
  transform: translateY(-4px) scale(1.1);
  animation: shake .4s ease-in-out;
}

/* (Kekalkan .card-animate hover untuk glow SAHAJA — tiada transform di sini) */
.card-animate:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,.25),
              0 0 20px rgba(0,255,200,.10);
  border-color: rgba(255,255,255,0.28);
}

/* (REPLACE the wrong reduced-motion block with this) */
@media (prefers-reduced-motion: reduce) {
  .hit-wrap:hover .link-inner,
  .hit-wrap:focus-within .link-inner {
    animation: none;
    transform: translateY(-3px) scale(1.05);
  }
}

/* --- Warna + Neon Glow (hover) --- */
.icon-instagram:hover svg {
  color: #E4405F;
  filter: drop-shadow(0 0 6px #E4405F) drop-shadow(0 0 14px rgba(228,64,95,.6));
}
.icon-whatsapp:hover svg {
  color: #25D366;
  filter: drop-shadow(0 0 6px #25D366) drop-shadow(0 0 14px rgba(37,211,102,.6));
}
.icon-facebook:hover svg {
  color: #1877F2;
  filter: drop-shadow(0 0 6px #1877F2) drop-shadow(0 0 14px rgba(24,119,242,.6));
}
.icon-email:hover svg {
  color: #FFA500;
  filter: drop-shadow(0 0 6px #FFA500) drop-shadow(0 0 14px rgba(255,165,0,.6));
}

/* --- Smooth Transition (idle) --- */
.icon-instagram svg,
.icon-whatsapp svg,
.icon-facebook svg,
.icon-email svg {
  transition: transform .3s ease, filter .35s ease, color .25s ease, opacity .25s ease;
}


/* ==== Kad FaktaHaus Animation (fixed) ==== */
.card-fadein {
  animation: fh-fadeInUp .6s ease both;
  will-change: transform, opacity;
}

/* Hover: glow je, transform biar diurus hover-liftshake */
.card-animate {
  transition: transform .3s cubic-bezier(.2,.8,.2,1),
              box-shadow .3s cubic-bezier(.2,.8,.2,1),
              border-color .3s cubic-bezier(.2,.8,.2,1),
              background-color .3s cubic-bezier(.2,.8,.2,1);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);       /* tak berubah masa hover = okay */
  border-radius: 16px;
  transform: translateZ(0);          /* force GPU layer */
  will-change: transform, opacity;    /* hint untuk browser */
}

.card-animate:hover {
  /* JANGAN letak transform di sini (elak konflik) */
  box-shadow: 0 6px 18px rgba(0,0,0,.25),
              0 0 20px rgba(0,255,200,.10);
  border-color: rgba(255,255,255,0.28);
}

@keyframes fh-fadeInUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

  


  /* ===== Variables (default) ===== */
  :root{
    --aurora-left-a: rgba(239,68,68,0.18);   /* merah */
    --aurora-left-b: rgba(249,115,22,0.15);  /* oren  */
    --aurora-right-a: rgba(236,72,153,0.18); /* pink  */
    --aurora-right-b: rgba(147,51,234,0.15); /* ungu  */
    --aurora-opacity: .99;
    --aurora-blur-left: 90px;
    --aurora-blur-right: 100px;
    --dots-color: rgba(255,255,255,0.22);
  }

  /* ===== THEME: ORANGE (current FaktaHaus) ===== */
  .theme-orange{
    --aurora-left-a: rgba(239,68,68,0.18);
    --aurora-left-b: rgba(249,115,22,0.15);
    --aurora-right-a: rgba(236,72,153,0.18);
    --aurora-right-b: rgba(147,51,234,0.15);
    --dots-color: rgba(255,255,255,0.22);
  }

  /* ===== THEME: BLUE (sci-fi / sejuk) ===== */
  .theme-blue{
    --aurora-left-a: rgba(34,211,238,0.18);  /* cyan */
    --aurora-left-b: rgba(59,130,246,0.16);  /* blue */
    --aurora-right-a: rgba(129,140,248,0.18);/* indigo */
    --aurora-right-b: rgba(99,102,241,0.16); /* indigo */
    --dots-color: rgba(203,213,225,0.25);
  }

  /* ===== THEME: EMERALD (nature / tenang) ===== */
  .theme-emerald{
    --aurora-left-a: rgba(16,185,129,0.18);  /* emerald */
    --aurora-left-b: rgba(34,197,94,0.16);   /* green   */
    --aurora-right-a: rgba(45,212,191,0.18); /* teal    */
    --aurora-right-b: rgba(59,130,246,0.12); /* blue hint */
    --dots-color: rgba(240,253,244,0.22);
  }

  /* ===== THEME: NIGHT (gelap minimal) ===== */
  .theme-night{
    --aurora-left-a: rgba(255,255,255,0.10);
    --aurora-left-b: rgba(255,255,255,0.06);
    --aurora-right-a: rgba(255,255,255,0.08);
    --aurora-right-b: rgba(255,255,255,0.05);
    --aurora-opacity: .2;
    --dots-color: rgba(255,255,255,0.15);
  }

  /* ===== Aurora layers (pakai variables di atas) ===== */
  #aurora-left{
    position: fixed; inset: 0; z-index: -5; opacity: 0;
    background:
      radial-gradient(circle at 0% 60%, var(--aurora-left-a), transparent 70%),
      radial-gradient(circle at 10% 30%, var(--aurora-left-b), transparent 75%);
    background-blend-mode: screen;
    filter: blur(var(--aurora-blur-left));
    animation: fadeInAurora 2.5s ease-out forwards, auroraLeft 22s ease-in-out infinite alternate;
  }
  #aurora-right{
    position: fixed; inset: 0; z-index: -4; opacity: 0;
    background:
      radial-gradient(circle at 100% 40%, var(--aurora-right-a), transparent 70%),
      radial-gradient(circle at 90% 70%, var(--aurora-right-b), transparent 75%);
    background-blend-mode: screen;
    filter: blur(var(--aurora-blur-right));
    animation: fadeInAurora 2.5s ease-out .3s forwards, auroraRight 25s ease-in-out infinite alternate;
  }
  @keyframes fadeInAurora{from{opacity:0}to{opacity:var(--aurora-opacity)}}
  @keyframes auroraLeft {0%{transform:translate(-2%,0)}50%{transform:translate(1%,-2%) scale(1.05)}100%{transform:translate(-1%,1%)}}
  @keyframes auroraRight{0%{transform:translate(2%,1%)}50%{transform:translate(-1%,-1%) scale(1.05)}100%{transform:translate(1%,2%)}}

  /* ===== Dots ikut tema ===== */
  #bg-dots circle{ fill: var(--dots-color); }



  .arrow-glow {
    animation: blinkGlow 1.0s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
  }

  @keyframes blinkGlow {
    0% { opacity: 0.3; transform: scale(0.95); text-shadow: 0 0 5px rgba(255,255,255,0.3); }
    50% { opacity: 1; transform: scale(1.05); text-shadow: 0 0 15px rgba(255,255,255,0.8); }
    100% { opacity: 0.3; transform: scale(0.95); text-shadow: 0 0 5px rgba(255,255,255,0.3); }
  }



  /* Glow lembut (tanpa gerak posisi) */
  @keyframes glowPulse {
    0%, 100% {
      text-shadow: 0 0 6px #fb7185, 0 0 12px #f472b6, 0 0 20px #ec4899;
      opacity: 1;
    }
    50% {
      text-shadow: 0 0 3px #fb7185, 0 0 8px #f472b6, 0 0 14px #ec4899;
      opacity: 0.85;
    }
  }
  .glow-pulse {
    animation: glowPulse 2.5s ease-in-out infinite;
  }
  /* Smooth bila tinggi berubah */
  #dailyFactBox { transition: height .3s ease; }