:root {
  --seasonal-accent: #22a06b;
  --seasonal-banner-text: #145a32;
  --imlek-lantern-img: url("../img/seasonal-effect/imlek/lampion.png");
  --imlek-chunlian-img: url("../img/seasonal-effect/imlek/kipas.png");
  --imlek-fu-img: url("../img/seasonal-effect/imlek/knoten.png");
  --imlek-knot-img: url("../img/seasonal-effect/imlek/kipas.png");
  --imlek-fan-img: url("../img/seasonal-effect/imlek/lampion.png");
  --imlek-kumquat-img: url("../img/seasonal-effect/imlek/fu.png");
  --imlek-plum-img: url("../img/seasonal-effect/imlek/lampion.png");
  --imlek-box-img: url("../img/seasonal-effect/imlek/amplop.png");


  --idulfitri-crescent-top-right-img: url("../img/seasonal-effect/idulfitri/bedugketupat.webp");
  --idulfitri-crescent-top-left-img: url("../img/seasonal-effect/idulfitri/bulansabitbintang.webp");
  --idulfitri-crescent-mid-left-img: url("../img/seasonal-effect/idulfitri/ketupat.webp");
  --idulfitri-crescent-mid-right-img: url("../img/seasonal-effect/idulfitri/ketupat.webp");
  --idulfitri-ketupat-img: url("../img/seasonal-effect/idulfitri/lentera1.webp");
  --idulfitri-fall-img: url("../img/seasonal-effect/idulfitri/ketupat2.webp");
  --idulfitri-star-img: url("../img/seasonal-effect/idulfitri/bulansabitbintang.webp");
  --idulfitri-fanoos-img: url("../img/seasonal-effect/idulfitri/lenterabulanbintang.webp");
  --idulfitri-footer-img: url("../img/seasonal-effect/idulfitri/lenterafooter.webp");

  --kartini-ribbon-img: url("../img/seasonal-effect/kartini/pita.png");

  --buruh-card-img: url("../img/seasonal-effect/buruh/hariburuh.png");
  --buruh-fall-img: url("../img/seasonal-effect/buruh/box.png");

  --iduladha-card-img-1: url("../img/seasonal-effect/iduladha/iduladha.png");
  --iduladha-card-img-2: url("../img/seasonal-effect/iduladha/iduladha2.png");
  --iduladha-badge-img: url("../img/seasonal-effect/iduladha/sapi.png");
  --iduladha-envelope-img: url("../img/seasonal-effect/iduladha/iduladha.png");
  --iduladha-fall-img: url("../img/seasonal-effect/iduladha/kambing.png");
  
}

.seasonal-widget {
  position: fixed;
  right: 16px;
  bottom: 80px;
  width: 240px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  padding: 14px 16px;
  font-size: 0.88rem;
  z-index: 1001;
  backdrop-filter: blur(8px);
  transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

.seasonal-widget.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.seasonal-widget .widget-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--seasonal-banner-text);
  margin-bottom: 8px;
}

.seasonal-widget .widget-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--seasonal-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.seasonal-widget .widget-title {
  flex: 1;
}

.seasonal-widget .widget-toggle {
  border: none;
  background: #f1f2f6;
  color: #2d3436;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.seasonal-widget .widget-date {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #2d3436;
}

.seasonal-widget .date-pill {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f1f2f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #222222;
}

.seasonal-widget .widget-calendar {
  background: #ffffff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.seasonal-widget .calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--seasonal-banner-text);
  text-transform: capitalize;
}

.seasonal-widget .calendar-nav {
  border: none;
  background: #f1f2f6;
  color: #2d3436;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.seasonal-widget .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.seasonal-widget .calendar-weekday {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6c757d;
}

.seasonal-widget .calendar-cell {
  border: none;
  background: #f6f7fb;
  border-radius: 8px;
  padding: 6px 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #2d3436;
  cursor: pointer;
  position: relative;
}

.seasonal-widget .calendar-cell.empty {
  background: transparent;
  cursor: default;
}

.seasonal-widget .calendar-cell.is-today {
  background: var(--seasonal-accent);
  color: #ffffff;
}

.seasonal-widget .calendar-cell.has-event::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e53935;
}

.seasonal-widget .calendar-cell.has-event {
  background: rgba(229, 57, 53, 0.15);
  color: #b71c1c;
}

.seasonal-widget .calendar-cell.is-selected {
  outline: 2px solid var(--seasonal-accent);
  background: rgba(0, 0, 0, 0.04);
}

.seasonal-widget .calendar-detail {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

.seasonal-widget .detail-date {
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 6px;
}

.seasonal-widget .detail-events {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.seasonal-widget .detail-chip {
  background: rgba(0, 0, 0, 0.06);
  color: var(--seasonal-banner-text);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

.seasonal-widget .detail-empty {
  font-size: 0.72rem;
  color: #6c757d;
}

.seasonal-widget.is-expanded {
  width: 300px;
  transform: translateY(-6px);
}

.seasonal-widget.is-expanded .widget-calendar {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

.seasonal-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  border: none;
  background: var(--seasonal-accent);
  color: #ffffff;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  z-index: 1002;
}

.seasonal-fab .fab-icon {
  font-size: 1rem;
}

.seasonal-fab .fab-day {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 720px) {
  .seasonal-widget {
    width: 220px;
    right: 12px;
    bottom: 76px;
  }

  .seasonal-widget.is-expanded {
    width: 240px;
  }

  .seasonal-fab {
    right: 12px;
    bottom: 12px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }
}

/* =========================
   Imlek Effect (Images Only)
   Ganti URL gambar sesuai file kamu sendiri.
   ========================= */
.imlek-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.imlek-lantern {
  position: absolute;
  width: clamp(72px, 7.5vw, 120px);
  height: clamp(96px, 10vw, 160px);
  background: var(--imlek-lantern-img) center / contain no-repeat;
  animation: imlekSway 4.8s ease-in-out infinite, imlekGlow 2.8s ease-in-out infinite;
  filter: drop-shadow(0 10px 14px rgba(220, 80, 40, 0.35));
  opacity: 0.92;
}

.imlek-lantern.small {
  width: clamp(56px, 6vw, 96px);
  height: clamp(76px, 8vw, 130px);
  opacity: 0.85;
}

.imlek-lantern.l1 { top: 24px; left: 16px; }
.imlek-lantern.l2 { top: 24px; right: 16px; }
.imlek-lantern.l3 { top: clamp(260px, 30vw, 420px); left: 8px; opacity: 0.7; }
.imlek-lantern.l4 { top: clamp(260px, 30vw, 420px); right: 8px; opacity: 0.7; animation-delay: 0.6s; }

.imlek-chunlian {
  position: absolute;
  width: clamp(90px, 12vw, 170px);
  height: clamp(220px, 28vw, 360px);
  background: var(--imlek-chunlian-img) center / contain no-repeat;
  opacity: 0.9;
  z-index: 1;
  animation: imlekFloatSlow 6.5s ease-in-out infinite, imlekPulseGlow 3.6s ease-in-out infinite;
}

.imlek-chunlian.left { top: clamp(220px, 24vw, 380px); left: 10px; }
.imlek-chunlian.right { top: clamp(220px, 24vw, 380px); right: 10px; }

.imlek-fu {
  position: absolute;
  top: clamp(120px, 14vw, 200px);
  right: clamp(12px, 3vw, 36px);
  transform: none;
  width: clamp(62px, 6.8vw, 100px);
  height: clamp(62px, 6.8vw, 100px);
  background: var(--imlek-fu-img) center / contain no-repeat;
  opacity: 0.8;
  z-index: 1;
}

.imlek-knot {
  position: absolute;
  top: clamp(420px, 48vw, 660px);
  left: clamp(18px, 4vw, 60px);
  width: clamp(58px, 7vw, 100px);
  height: clamp(78px, 9vw, 130px);
  background: var(--imlek-knot-img) center / contain no-repeat;
  opacity: 0.78;
  z-index: 1;
}

.imlek-fan {
  position: absolute;
  bottom: clamp(12px, 3vw, 32px);
  left: clamp(18px, 4vw, 60px);
  width: clamp(90px, 9vw, 150px);
  height: clamp(46px, 5vw, 76px);
  background: var(--imlek-fan-img) center / contain no-repeat;
  opacity: 0.8;
  z-index: 1;
}

.imlek-kumquat {
  position: absolute;
  bottom: clamp(12px, 3vw, 32px);
  right: clamp(18px, 4vw, 60px);
  width: clamp(84px, 9vw, 140px);
  height: clamp(96px, 11vw, 170px);
  background: var(--imlek-kumquat-img) center / contain no-repeat;
  opacity: 0.8;
  z-index: 1;
}

.imlek-plum {
  position: absolute;
  bottom: clamp(120px, 16vw, 240px);
  left: clamp(8px, 2vw, 24px);
  width: clamp(140px, 16vw, 220px);
  height: clamp(96px, 11vw, 160px);
  background: var(--imlek-plum-img) center / contain no-repeat;
  opacity: 0.75;
  animation: imlekFloatSlow 7.2s ease-in-out infinite, imlekPulseGlow 4.2s ease-in-out infinite;
}

@keyframes imlekSway {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(6px) rotate(2deg); }
}

@keyframes imlekGlow {
  0%, 100% { filter: drop-shadow(0 8px 12px rgba(255, 128, 64, 0.2)); }
  50% { filter: drop-shadow(0 12px 18px rgba(255, 140, 80, 0.6)); }
}

@keyframes imlekFloatSlow {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.03); }
}

@keyframes imlekSpinSoft {
  0% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-6px); }
  100% { transform: rotate(-3deg) translateY(0); }
}

@keyframes imlekPulseGlow {
  0%, 100% { filter: drop-shadow(0 6px 10px rgba(255, 200, 120, 0.25)); }
  50% { filter: drop-shadow(0 14px 22px rgba(255, 220, 160, 0.7)); }
}

@keyframes imlekSwingWide {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-4px); }
}

@media (min-width: 721px) {
  .imlek-fu {
    animation: imlekFloatSlow 6s ease-in-out infinite, imlekPulseGlow 3.5s ease-in-out infinite;
  }

  .imlek-knot {
    animation: imlekSwingWide 5.6s ease-in-out infinite, imlekPulseGlow 3.2s ease-in-out infinite;
  }

  .imlek-fan {
    transform-origin: 20% 60%;
    animation: imlekSpinSoft 6.5s ease-in-out infinite, imlekPulseGlow 3.8s ease-in-out infinite;
  }

  .imlek-kumquat {
    animation: imlekFloatSlow 7.2s ease-in-out infinite, imlekPulseGlow 4.2s ease-in-out infinite;
  }
}

@media (max-width: 720px) {
  .imlek-lantern.l3,
  .imlek-lantern.l4,
  .imlek-knot,
  .imlek-fan,
  .imlek-kumquat,
  .imlek-plum {
    display: none;
  }

  .imlek-lantern {
    width: clamp(52px, 16vw, 80px);
    height: clamp(74px, 20vw, 110px);
  }

  .imlek-chunlian {
    width: clamp(64px, 20vw, 120px);
    height: clamp(150px, 34vw, 230px);
  }

  .imlek-lantern.l1 { top: 72px; left: 8px; }
  .imlek-lantern.l2 { top: 72px; right: 8px; }

  .imlek-chunlian.left { top: 300px; left: 8px; }
  .imlek-chunlian.right { top: 300px; right: 8px; }

  .imlek-fu { top: 120px; right: 12px; }
  .imlek-knot { top: 420px; left: 12px; }

  .imlek-fu,
  .imlek-knot,
  .imlek-lantern.l3,
  .imlek-lantern.l4 {
    display: none;
  }
}

@media (max-width: 720px) {
  body.mobile-imlek-scrolled .imlek-lantern,
  body.mobile-imlek-scrolled .imlek-chunlian {
    opacity: 0;
    transform: scale(1.15);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .imlek-lantern,
  .imlek-chunlian {
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
}

.imlek-fly-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.imlek-fly {
  position: absolute;
  bottom: -140px;
  left: var(--fly-left);
  width: var(--fly-size);
  height: calc(var(--fly-size) * 1.25);
  background: var(--imlek-lantern-img) center / contain no-repeat;
  animation: imlekFlyUp var(--fly-duration) linear forwards, imlekGlow 2.6s ease-in-out infinite;
  filter: drop-shadow(0 10px 14px rgba(210, 80, 40, 0.28));
}

.imlek-fly-box {
  position: absolute;
  width: calc(var(--fly-size) * 0.55);
  height: calc(var(--fly-size) * 0.45);
  left: 50%;
  bottom: calc(var(--fly-size) * -0.45);
  transform: translateX(-50%);
  background: var(--imlek-box-img) center / contain no-repeat;
}

@keyframes imlekFlyUp {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translateY(-45vh) translateX(6px); }
  100% { transform: translateY(-120vh) translateX(-8px); opacity: 0; }
}

/* =========================
   Imlek Greeting Card
   ========================= */
.imlek-greeting {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 50;
}

.imlek-greeting-card {
  width: min(520px, 90vw);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 20px;
  padding: 28px 28px 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
  position: relative;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  animation: imlekCardIn 0.45s ease;
}

body.dark-mode .imlek-greeting-card {
  background: rgba(10, 14, 24, 0.96);
  color: #f8fafc;
}

.imlek-greeting-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: #2d2d2d;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

body.dark-mode .imlek-greeting-close {
  background: rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.imlek-greeting-envelope {
  width: min(220px, 55vw);
  margin: 10px auto 16px;
  position: relative;
  cursor: pointer;
  outline: none;
}

.imlek-envelope-img {
  width: 100%;
  padding-top: 70%;
  background: var(--imlek-box-img) center / contain no-repeat;
  transition: transform 0.6s ease;
}

.imlek-envelope-glow {
  position: absolute;
  inset: -10px;
  opacity: 0;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(255, 215, 130, 0.65), transparent 70%);
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.imlek-greeting.is-open .imlek-envelope-img {
  transform: translateY(-6px) scale(1.02);
}

.imlek-greeting.is-open .imlek-envelope-glow {
  opacity: 1;
}

.imlek-greeting-text {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.imlek-greeting.is-open .imlek-greeting-text {
  opacity: 1;
  transform: translateY(0);
}

.imlek-greeting-text h3 {
  margin: 6px 0 8px;
  color: #b71c1c;
  font-weight: 800;
}

.imlek-greeting-text p {
  margin: 0;
  color: #4a3b30;
  font-size: 0.98rem;
  line-height: 1.5;
}

body.dark-mode .imlek-greeting-text h3 {
  color: #ffd166;
}

body.dark-mode .imlek-greeting-text p {
  color: #e2e8f0;
}

@media (max-width: 720px) {
  .imlek-greeting-card {
    width: min(420px, 92vw);
    padding: 22px 18px 20px;
  }

  .imlek-greeting-envelope {
    width: min(200px, 60vw);
  }
}

/* =========================
   Idul Fitri Greeting Card
   ========================= */
.idulfitri-greeting {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 50;
}

.idulfitri-greeting-card {
  width: min(520px, 90vw);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 20px;
  padding: 28px 28px 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
  position: relative;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  animation: imlekCardIn 0.45s ease;
}

.idulfitri-greeting-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: #2d2d2d;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.idulfitri-greeting-envelope {
  width: min(240px, 62vw);
  margin: 10px auto 16px;
  position: relative;
  cursor: pointer;
  outline: none;
}

.idulfitri-envelope-img {
  width: 100%;
  padding-top: 70%;
  background: url("../img/seasonal-effect/idulfitri/amploplebaran.webp") center / contain no-repeat;
  transition: transform 0.6s ease;
}

.idulfitri-envelope-glow {
  position: absolute;
  inset: -10px;
  opacity: 0;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(255, 235, 150, 0.7), transparent 70%);
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.idulfitri-greeting.is-open .idulfitri-envelope-img {
  transform: translateY(-6px) scale(1.02);
}

.idulfitri-greeting.is-open .idulfitri-envelope-glow {
  opacity: 1;
}

.idulfitri-greeting-text {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.idulfitri-greeting.is-open .idulfitri-greeting-text {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   Kartini Greeting
   ========================= */
.kartini-greeting {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 36px);
  background: rgba(8, 8, 8, 0.45);
  backdrop-filter: blur(2px);
  z-index: 9999;
  isolation: isolate;
}

.kartini-greeting-card {
  position: relative;
  width: min(720px, 92vw);
  background: #fffaf4;
  border-radius: 24px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  z-index: 1;
  animation: kartiniDropIn 0.55s ease-out;
}

.kartini-greeting-card::before {
  content: "";
  position: absolute;
  top: -36px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(185, 92, 92, 0.95), rgba(185, 92, 92, 0.5), rgba(185, 92, 92, 0));
  opacity: 1;
  animation: kartiniRibbonDrop 0.6s ease-out;
  pointer-events: none;
  z-index: 2;
}

.kartini-greeting-image {
  width: 100%;
  height: clamp(180px, 40vw, 320px);
  background: url("../img/seasonal-effect/kartini/rakartini.webp") center / cover no-repeat;
  position: relative;
  z-index: 1;
}

.kartini-greeting-text {
  padding: clamp(18px, 3.5vw, 28px);
  text-align: center;
}

.kartini-greeting-text h3 {
  margin: 0 0 10px;
  font-weight: 700;
  color: #7a2d2d;
}

.kartini-greeting-text p {
  margin: 0;
  color: #4a3a32;
  line-height: 1.6;
}

.kartini-greeting-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.502);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.kartini-greeting-close:hover {
  background: rgba(202, 4, 4, 0.7);
}

@keyframes kartiniDropIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kartiniRibbonDrop {
  from {
    transform: translateY(-26px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

body.dark-mode .kartini-greeting-card {
  background: #1f2937;
}

body.dark-mode .kartini-greeting-text h3 {
  color: #fef3c7;
}

body.dark-mode .kartini-greeting-text p {
  color: #e5e7eb;
}

/* =========================
   Buruh Greeting
   ========================= */
.buruh-greeting {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 36px);
  background: rgba(10, 10, 12, 0.5);
  backdrop-filter: blur(2px);
  z-index: 9999;
  isolation: isolate;
}

.buruh-greeting-card {
  position: relative;
  width: min(720px, 92vw);
  background: #fff7ed;
  border-radius: 24px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  animation: buruhDropIn 0.55s ease-out;
}

.buruh-greeting-image {
  width: 100%;
  height: clamp(180px, 40vw, 320px);
  background: var(--buruh-card-img) center / cover no-repeat;
}

.buruh-greeting-text {
  padding: clamp(18px, 3.5vw, 28px);
  text-align: center;
}

.buruh-greeting-text h3 {
  margin: 0 0 10px;
  font-weight: 700;
  color: #7a2d2d;
}

.buruh-greeting-text p {
  margin: 0 0 8px;
  color: #3b2f2f;
  line-height: 1.6;
}

.buruh-greeting-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.buruh-greeting-close:hover {
  background: rgba(202, 4, 4, 0.7);
}

body.dark-mode .buruh-greeting-card {
  background: #1f2937;
}

body.dark-mode .buruh-greeting-text h3 {
  color: #fef3c7;
}

body.dark-mode .buruh-greeting-text p {
  color: #e5e7eb;
}

body.event-buruh::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 6;
}

@keyframes buruhDropIn {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .buruh-greeting-card {
    border-radius: 20px;
  }

  .buruh-greeting-image {
    height: clamp(160px, 55vw, 240px);
  }

  .buruh-greeting-close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

/* =========================
   Buruh Falling Effect
   ========================= */
.buruh-fall {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
}

.buruh-fall-piece {
  position: absolute;
  top: -10%;
  left: var(--fall-left);
  width: var(--fall-size);
  height: var(--fall-size);
  background: var(--buruh-fall-img) center / contain no-repeat;
  animation: buruhFall var(--fall-duration) linear forwards, buruhTwinkle 1.8s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(255, 230, 150, 0.45));
  opacity: 0.9;
}

@keyframes buruhFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(120vh) rotate(80deg); opacity: 0; }
}

@keyframes buruhTwinkle {
  0%, 100% { opacity: 0.75; filter: drop-shadow(0 8px 12px rgba(255, 230, 150, 0.35)); }
  50% { opacity: 1; filter: drop-shadow(0 0 18px rgba(255, 235, 190, 0.95)); }
}

/* =========================
   Idul Adha Greeting
   ========================= */
.iduladha-greeting {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 36px);
  background: rgba(10, 12, 10, 0.5);
  backdrop-filter: blur(2px);
  z-index: 9999;
  isolation: isolate;
}

.iduladha-greeting-card {
  position: relative;
  width: min(760px, 92vw);
  background: #f7fbf5;
  border-radius: 24px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  animation: iduladhaDropIn 0.55s ease-out;
}

.iduladha-greeting-image {
  width: 100%;
  height: clamp(190px, 42vw, 340px);
  background: var(--iduladha-card-img-1) center / contain no-repeat;
  position: relative;
  filter: drop-shadow(0 0 14px rgba(120, 220, 160, 0.45));
}

.iduladha-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.iduladha-decor .decor {
  position: absolute;
  opacity: 0.85;
  filter: drop-shadow(0 14px 24px rgba(40, 120, 70, 0.35));
  animation: iduladhaFloat 6s ease-in-out infinite;
}

.iduladha-decor .decor-1 {
  top: 12%;
  left: 6%;
  width: clamp(130px, 20vw, 240px);
  height: clamp(130px, 20vw, 240px);
  background: var(--iduladha-card-img-1) center / contain no-repeat;
  animation-delay: 0s;
  filter: brightness(1.2) saturate(1.1);
}


.iduladha-decor .decor-2 {
  top: 10%;
  right: 6%;
  width: clamp(160px, 24vw, 300px);
  height: clamp(160px, 24vw, 300px);
  background: var(--iduladha-card-img-2) center / contain no-repeat;
  animation: iduladhaFloat 6.5s ease-in-out infinite, iduladhaDecorGlow 3.6s ease-in-out infinite;
  filter: brightness(1.2) saturate(1.1) drop-shadow(0 0 22px rgba(90, 220, 160, 0.75));
}

.iduladha-decor .decor-badge {
  display: none;
  bottom: 8%;
  right: 8%;
  width: clamp(90px, 13vw, 160px);
  height: clamp(90px, 13vw, 160px);
  background: var(--iduladha-badge-img) center / contain no-repeat;
  opacity: 0.9;
  animation: iduladhaGlow 3.2s ease-in-out infinite;
}

.iduladha-decor .decor-envelope {
  bottom: 10%;
  left: 6%;
  width: clamp(120px, 18vw, 200px);
  height: clamp(120px, 18vw, 200px);
  background: var(--iduladha-envelope-img) center / contain no-repeat;
  opacity: 0.9;
  filter: drop-shadow(0 10px 18px rgba(40, 160, 90, 0.35));
  animation: iduladhaGlow 3.2s ease-in-out infinite;
}

body.event-iduladha footer {
  position: relative;
}

body.event-iduladha footer::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 52px;
  width: clamp(140px, 18vw, 240px);
  height: clamp(140px, 18vw, 240px);
  background: var(--iduladha-badge-img) center / contain no-repeat;
  opacity: 0.95;
  filter: drop-shadow(0 10px 18px rgba(40, 160, 90, 0.45));
  animation: iduladhaGlow 3.2s ease-in-out infinite;
  pointer-events: none;
}

.iduladha-greeting-text {
  padding: clamp(18px, 3.5vw, 28px);
  text-align: center;
}

.iduladha-greeting-text h3 {
  margin: 0 0 10px;
  font-weight: 700;
  color: #1f4d2b;
}

.iduladha-greeting-text p {
  margin: 0 0 8px;
  color: #2f3b33;
  line-height: 1.6;
}

.iduladha-greeting-envelope {
  width: min(240px, 65vw);
  height: min(160px, 44vw);
  margin: 8px auto 0;
  background: var(--iduladha-envelope-img) center / contain no-repeat;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.25));
  cursor: pointer;
}

.iduladha-greeting-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

.iduladha-greeting-close:hover {
  background: rgba(18, 92, 56, 0.85);
}

body.dark-mode .iduladha-greeting-card {
  background: #1f2937;
}

body.dark-mode .iduladha-greeting-text h3 {
  color: #d1fae5;
}

body.dark-mode .iduladha-greeting-text p {
  color: #e5e7eb;
}

body.dark-mode .iduladha-decor .decor-1,
body.dark-mode .iduladha-decor .decor-2 {
  filter:
    drop-shadow(0 0 20px rgba(90, 220, 160, 0.8))
    drop-shadow(0 0 48px rgba(90, 220, 160, 0.5));
}


@keyframes iduladhaDropIn {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes iduladhaDecorGlow {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@keyframes iduladhaFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes iduladhaGlow {
  0%, 100% { filter: drop-shadow(0 10px 18px rgba(40, 160, 90, 0.35)); }
  50% { filter: drop-shadow(0 0 22px rgba(120, 220, 160, 0.85)); }
}

@keyframes iduladhaLampGlow {
  0%, 100% { opacity: 0.7; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

@media (max-width: 720px) {
  body.dark-mode .iduladha-decor .decor-1,
  body.dark-mode .iduladha-decor .decor-2,
  body.dark-mode .iduladha-decor .decor-envelope,
  body.dark-mode .iduladha-decor .decor-badge {
    filter: brightness(1.35) saturate(1.15) drop-shadow(0 0 18px rgba(160, 240, 200, 0.55));
  }
  body.event-iduladha .hero {
    position: relative;
  }

  body.event-iduladha .iduladha-decor {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  body.event-iduladha.iduladha-mobile-header .iduladha-decor {
    opacity: 1;
  }

  .iduladha-decor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 220px;
    z-index: 1;
  }

  .iduladha-greeting-card {
    border-radius: 20px;
  }

  .iduladha-greeting-image {
    height: clamp(170px, 55vw, 260px);
  }

  .iduladha-greeting-close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .iduladha-decor .decor-1 {
    display: none;
  }

  .iduladha-decor .decor-2 {
    display: none;
  }

  .iduladha-decor .decor-badge {
    display: none;
  }

.iduladha-decor .decor-envelope {
  display: block;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(90px, 26vw, 150px);
  height: clamp(90px, 26vw, 150px);
  opacity: 1;
  background-size: contain;
}

.iduladha-inline-envelope {
  display: none;
}

  body.event-iduladha footer::after {
    display: none;
  }
}

/* =========================
   Idul Adha Falling Effect
   ========================= */
.iduladha-sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: hidden;
}

.iduladha-stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 7;
}

.iduladha-star {
  position: absolute;
  top: var(--star-top);
  left: var(--star-left);
  width: var(--star-size);
  height: var(--star-size);
  background: radial-gradient(circle, rgba(255, 244, 200, 1), rgba(255, 244, 200, 0.2));
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 236, 170, 0.9);
  animation: iduladhaStarTwinkle 2.4s ease-in-out infinite;
  animation-delay: var(--star-delay);
  opacity: 0.85;
}

@keyframes iduladhaStarTwinkle {
  0%, 100% { transform: scale(0.7); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}

.iduladha-fall {
  position: absolute;
  top: -10%;
  left: var(--fall-left);
  width: var(--fall-size);
  height: var(--fall-size);
  background: var(--iduladha-fall-img) center / contain no-repeat;
  animation: iduladhaFall var(--fall-duration) linear forwards, iduladhaTwinkle 1.8s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(180, 255, 210, 0.45));
  opacity: 0.9;
}

@keyframes iduladhaFall {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(120vh); opacity: 0; }
}

@keyframes iduladhaTwinkle {
  0%, 100% { opacity: 0.75; filter: drop-shadow(0 8px 12px rgba(170, 255, 210, 0.35)); }
  50% { opacity: 1; filter: drop-shadow(0 0 18px rgba(200, 255, 230, 0.95)); }
}

/* Kartini ribbon effect */
.kartini-ribbon {
  position: fixed;
  left: 0;
  right: 0;
  top: -80px;
  height: 140px;
  pointer-events: none;
  z-index: 8;
  background: linear-gradient(
    180deg,
    rgba(190, 58, 58, 0.95) 0%,
    rgba(190, 58, 58, 0.65) 55%,
    rgba(190, 58, 58, 0) 100%
  );
  animation: kartiniRibbonSlide 0.7s ease-out;
}

@keyframes kartiniRibbonSlide {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Kartini falling ribbons */
.kartini-ribbon-fall {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
}

.kartini-fall {
  position: absolute;
  top: -10%;
  left: var(--fall-left);
  width: var(--fall-size, 36px);
  height: var(--fall-size, 36px);
  background: var(--kartini-ribbon-img) center / contain no-repeat;
  filter: drop-shadow(0 8px 12px rgba(255, 210, 150, 0.45));
  animation:
    kartiniFall var(--fall-duration) linear forwards,
    kartiniGlow 1.8s ease-in-out infinite;
}

body.event-kartini::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 6;
}

@keyframes kartiniGlow {
  0%,
  100% {
    filter: drop-shadow(0 8px 14px rgba(255, 220, 170, 0.45));
    opacity: 0.85;
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(255, 235, 190, 0.95));
    opacity: 1;
  }
}

@keyframes kartiniFall {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(120vh); opacity: 0; }
}

@keyframes kartiniRibbonFall {
  from {
    transform: translateY(-10vh) translateX(0) rotate(var(--kartini-rotate, 0deg));
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  to {
    transform: translateY(110vh) translateX(var(--kartini-drift, 0px)) rotate(calc(var(--kartini-rotate, 0deg) * -1));
    opacity: 0.15;
  }
}


@media (max-width: 720px) {
  .kartini-greeting-card {
    border-radius: 20px;
  }

  .kartini-greeting-image {
    height: clamp(160px, 55vw, 240px);
  }

  .kartini-greeting-close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

.idulfitri-greeting-text h3 {
  margin: 6px 0 6px;
  color: #1b5e20;
  font-weight: 800;
}

.idulfitri-greeting-text p {
  margin: 0;
  color: #3e4b3f;
  font-size: 0.98rem;
  line-height: 1.5;
}

body.dark-mode .idulfitri-greeting-card {
  background: rgba(10, 14, 24, 0.96);
  color: #f8fafc;
}

body.dark-mode .idulfitri-greeting-text h3 {
  color: #fde047;
}

body.dark-mode .idulfitri-greeting-text p {
  color: #e2e8f0;
}

body.dark-mode .idulfitri-greeting-close {
  background: rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

@media (max-width: 720px) {
  .idulfitri-greeting-card {
    width: min(420px, 92vw);
    padding: 22px 18px 20px;
  }

  .idulfitri-greeting-envelope {
    width: min(210px, 65vw);
  }
}

body.event-imlek::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 220, 180, 0.28), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(255, 180, 120, 0.18), transparent 40%),
    linear-gradient(180deg, rgba(90, 20, 10, 0.08), transparent 55%);
}

body.event-imlek {
  --seasonal-accent: #c62828;
  --seasonal-banner-text: #7a1f1f;
}

/* TEMP: hide Idul Fitri/Ramadan edge icons + footer decor
body.event-idulfitri {
  --seasonal-accent: #2e7d32;
  --seasonal-banner-text: #1b5e20;
}

body.event-idulfitri footer {
  position: relative;
}

body.event-idulfitri footer::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: 12px;
  width: clamp(48px, 6vw, 80px);
  height: clamp(80px, 10vw, 130px);
  background: var(--idulfitri-footer-img) center / contain no-repeat;
  opacity: 0.95;
  filter: drop-shadow(0 10px 18px rgba(255, 220, 150, 0.55));
  animation: idulfitriGlow 2.4s ease-in-out infinite;
}

@media (max-width: 720px) {
  body.event-idulfitri footer::after {
    left: 10px;
    right: auto;
    top: 10px;
    bottom: auto;
    width: 56px;
    height: 76px;
    opacity: 0.75;
  }
}
*/

/* =========================
   Idul Fitri Effect (Images Only)
   ========================= */
/* TEMP: hide Idul Fitri/Ramadan edge icons + decor
.idulfitri-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0.9;
}

.idulfitri-crescent {
  position: absolute;
  top: clamp(24px, 3vw, 44px);
  right: clamp(16px, 3vw, 52px);
  width: clamp(80px, 9vw, 130px);
  height: clamp(80px, 9vw, 130px);
  background: var(--idulfitri-crescent-top-right-img) center / contain no-repeat;
  animation: idulfitriFloat 6.5s ease-in-out infinite, idulfitriGlow 2.6s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(255, 220, 150, 0.55));
}

.idulfitri-crescent.c2 {
  top: clamp(24px, 3vw, 44px);
  left: clamp(16px, 3vw, 52px);
  width: clamp(70px, 8vw, 120px);
  height: clamp(70px, 8vw, 120px);
  background: var(--idulfitri-crescent-top-left-img) center / contain no-repeat;
  animation-delay: 0.8s;
  opacity: 0.9;
}

.idulfitri-crescent.mid-left {
  top: 50%;
  left: clamp(10px, 2vw, 24px);
  transform: translateY(-50%);
  width: clamp(60px, 7vw, 110px);
  height: clamp(60px, 7vw, 110px);
  background: var(--idulfitri-crescent-mid-left-img) center / contain no-repeat;
  animation-delay: 0.4s;
  opacity: 0.85;
}

.idulfitri-crescent.mid-right {
  top: 50%;
  right: clamp(10px, 2vw, 24px);
  transform: translateY(-50%);
  width: clamp(60px, 7vw, 110px);
  height: clamp(60px, 7vw, 110px);
  background: var(--idulfitri-crescent-mid-right-img) center / contain no-repeat;
  animation-delay: 1.1s;
  opacity: 0.85;
}

.idulfitri-fanoos {
  position: absolute;
  top: clamp(140px, 14vw, 220px);
  width: clamp(52px, 6vw, 90px);
  height: clamp(90px, 10vw, 150px);
  background: var(--idulfitri-fanoos-img) center / contain no-repeat;
  animation: imlekSway 4.6s ease-in-out infinite, imlekGlow 2.2s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(255, 208, 120, 0.55));
}

.idulfitri-fanoos.left { left: clamp(18px, 4vw, 64px); }
.idulfitri-fanoos.right { right: clamp(18px, 4vw, 64px); animation-delay: 0.6s; }

.idulfitri-ketupat {
  position: absolute;
  top: clamp(260px, 22vw, 360px);
  width: clamp(60px, 7vw, 105px);
  height: clamp(60px, 7vw, 105px);
  background: var(--idulfitri-ketupat-img) center / contain no-repeat;
  animation: imlekFloatSlow 6.8s ease-in-out infinite, imlekPulseGlow 3.6s ease-in-out infinite;
}

.idulfitri-ketupat.k1 { left: clamp(18px, 4vw, 64px); }
.idulfitri-ketupat.k2 { right: clamp(18px, 4vw, 64px); }

.idulfitri-crescent.mid-left {
  top: clamp(360px, 30vw, 460px);
  left: clamp(18px, 4vw, 64px);
  transform: none;
  width: clamp(58px, 7vw, 100px);
  height: clamp(58px, 7vw, 100px);
  animation: idulfitriFloat 6.5s ease-in-out infinite, idulfitriGlow 2.6s ease-in-out infinite;
  opacity: 0.85;
}

.idulfitri-crescent.mid-right {
  top: clamp(360px, 30vw, 460px);
  right: clamp(18px, 4vw, 64px);
  transform: none;
  width: clamp(58px, 7vw, 100px);
  height: clamp(58px, 7vw, 100px);
  animation: idulfitriFloat 6.5s ease-in-out infinite, idulfitriGlow 2.6s ease-in-out infinite;
  opacity: 0.85;
}

@media (max-width: 720px) {
  .idulfitri-crescent { top: 84px; right: 10px; width: 60px; height: 60px; }
  .idulfitri-fanoos { top: 150px; width: 46px; height: 76px; }
  .idulfitri-ketupat { top: 240px; width: 50px; height: 50px; }
}

@media (max-width: 720px) {
  .idulfitri-crescent.c2 { top: 84px; left: 10px; width: 56px; height: 56px; }
  .idulfitri-crescent.mid-left,
  .idulfitri-crescent.mid-right,
  .idulfitri-ketupat {
    display: none;
  }
  .idulfitri-fanoos.left { left: 10px; }
  .idulfitri-fanoos.right { right: 10px; }
  .idulfitri-ketupat.k1 { left: 10px; }
  .idulfitri-ketupat.k2 { right: 10px; }
}

@media (max-width: 720px) {
  body.mobile-idulfitri-scrolled .idulfitri-crescent,
  body.mobile-idulfitri-scrolled .idulfitri-fanoos {
    opacity: 0;
    transform: scale(1.12);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .idulfitri-crescent,
  .idulfitri-fanoos {
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
}

@keyframes idulfitriGlow {
  0%, 100% { filter: drop-shadow(0 10px 18px rgba(255, 220, 150, 0.45)); }
  50% { filter: drop-shadow(0 14px 24px rgba(255, 230, 170, 0.85)); }
}

@keyframes idulfitriFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.02); }
}
*/


/* =========================
   Idul Fitri Falling Effect
   (Ketupat jatuh + bintang)
   ========================= */
/* TEMP: hide Idul Fitri/Ramadan falling effect
.idulfitri-sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  opacity: 0.8;
}

.idulfitri-fall {
  position: absolute;
  top: -10%;
  left: var(--fall-left);
  width: var(--fall-size);
  height: var(--fall-size);
  background: var(--idulfitri-fall-img) center / contain no-repeat;
  animation: idulfitriFall var(--fall-duration) linear forwards;
  filter: drop-shadow(0 8px 12px rgba(255, 230, 150, 0.45));
  opacity: 0.9;
}

.idulfitri-star {
  position: absolute;
  top: var(--star-top);
  left: var(--star-left);
  width: 8px;
  height: 8px;
  background: var(--idulfitri-star-img) center / contain no-repeat;
  animation: idulfitriTwinkle 2.2s ease-in-out infinite;
  animation-delay: var(--star-delay);
  opacity: 0.85;
}

@keyframes idulfitriFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(120vh) rotate(140deg); opacity: 0; }
}

@keyframes idulfitriTwinkle {
  0%, 100% { transform: scale(0.7); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}
*/

/* =========================
   Natal Effect (Images Only)
   ========================= */
.natal-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.natal-garland {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(60px, 8vw, 100px);
  background: var(--natal-garland-img) center / contain no-repeat;
}

.natal-ornament {
  position: absolute;
  top: clamp(40px, 6vw, 70px);
  width: clamp(28px, 4vw, 40px);
  height: clamp(28px, 4vw, 40px);
  background: var(--natal-ornament-img) center / contain no-repeat;
}

.natal-ornament.left { left: 40%; }
.natal-ornament.right { right: 40%; }

.natal-tree {
  position: absolute;
  left: clamp(16px, 6vw, 60px);
  bottom: clamp(16px, 4vw, 40px);
  width: clamp(90px, 12vw, 160px);
  height: clamp(120px, 16vw, 220px);
  background: var(--natal-tree-img) center / contain no-repeat;
}

.natal-snow {
  position: absolute;
  top: clamp(80px, 10vw, 140px);
  right: clamp(20px, 6vw, 80px);
  width: clamp(120px, 16vw, 220px);
  height: clamp(120px, 16vw, 220px);
  background: var(--natal-snow-img) center / contain no-repeat;
  opacity: 0.6;
}


@keyframes imlekCardIn {
  0% { opacity: 0; transform: translateY(10px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}