/* =====================================================
   EXPRESSBANA — SEASONAL EVENT SYSTEM (CLEAN VERSION)
===================================================== */


/* =====================================================
   1️⃣ BASE COMPONENT
===================================================== */

.event-box{
  position:relative;
  padding:28px;
  border-radius:20px;
  overflow:hidden;
  display:inline-block;
  background:var(--card-bg);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  isolation:isolate;
}

.event-text{
  position:absolute;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  font-size:22px;
  font-weight:800;
  letter-spacing:.5px;
  text-shadow:0 4px 14px rgba(0,0,0,.4);
  z-index:5;
  white-space:nowrap;
}

.event-img{
  max-width:430px;
  width:100%;
  position:relative;
  z-index:3;
  animation:eventFloat 6s ease-in-out infinite;
  will-change:transform;
}

@keyframes eventFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-10px) scale(1.05)}
}


/* =====================================================
   2️⃣ GLOBAL EVENT WRAPPER
   (body class="event-xxx")
===================================================== */

.event-default{ background:linear-gradient(135deg,var(--red),var(--black)); }
.event-imlek{ background:radial-gradient(circle at top,var(--red),#7a0000); }
.event-ramadhan,
.event-lebaran{ background:radial-gradient(circle at top,var(--green),#0c3d2b); }
.event-hutri{ background:linear-gradient(135deg,#b30000,#ff0000); }
.event-natal{ background:linear-gradient(135deg,#0f5132,#14532d,#1b4332); }

.event-default .event-text{ color:#fff; }
.event-imlek .event-text{ color:var(--yellow); }
.event-lebaran .event-text{ color:#fff7cc; }
.event-hutri .event-text{ color:#fff; }
.event-natal .event-text{ color:#ffe082; }


/* =====================================================
   3️⃣ NAVBAR THEME
===================================================== */

.event-ramadhan .navbar{
  background:linear-gradient(90deg,#0f5132,#14532d);
}

.event-hutri .navbar{
  background:linear-gradient(90deg,#b30000,#7a0000);
}

.event-natal .navbar{
  background:linear-gradient(90deg,#0f5132,#0b3d2e);
}


/* =====================================================
   4️⃣ HERO CUSTOM STYLE
===================================================== */

.event-ramadhan .hero-banner{
  background:linear-gradient(135deg,#0f5132,#14532d,#1b4332);
  position:relative;
  overflow:hidden;
}


/* =====================================================
   5️⃣ RAMADHAN ORNAMENT
===================================================== */

.nav-moon{
  position:absolute;
  right:30px;
  top:10px;
  width:40px;
  height:40px;
  background:radial-gradient(circle,#ffd166,#f4a261);
  border-radius:50%;
  box-shadow:0 0 15px rgba(255,209,102,.6);
}

.nav-moon::after{
  content:"";
  position:absolute;
  top:6px;
  left:12px;
  width:40px;
  height:40px;
  background:#14532d;
  border-radius:50%;
}

.ramadhan-stars{
  position:absolute;
  inset:0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(2px 2px at 70% 40%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,.8), transparent);
  animation:starTwinkle 4s infinite alternate;
}

.ramadhan-stars,
.nav-moon,
.nav-lampion,
.flag-wave,
.snowflakes {
  pointer-events: none;
}

@keyframes starTwinkle{
  from{opacity:.4}
  to{opacity:1}
}


/* =====================================================
   6️⃣ IMLEK ORNAMENT
===================================================== */

.nav-lampion{
  position:absolute;
  top:6px;
  right:24px;
  width:34px;
  height:46px;
  border-radius:0 0 18px 18px;
  background:radial-gradient(circle at top,var(--yellow),var(--red));
  box-shadow:0 0 16px rgba(255,193,7,.7);
  animation:lampionSwing 3s ease-in-out infinite;
  display:none;
}

.event-imlek .nav-lampion{ display:block; }

@keyframes lampionSwing{
  0%,100%{transform:rotate(0)}
  50%{transform:rotate(4deg)}
}


/* =====================================================
   7️⃣ HUT RI ORNAMENT
===================================================== */

.flag-wave{
  position:absolute;
  top:8px;
  right:30px;
  width:42px;
  height:28px;
  background:linear-gradient(to bottom,#ff0000 50%,#ffffff 50%);
  border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  animation:flagWave 2s ease-in-out infinite;
}

@keyframes flagWave{
  0%,100%{transform:rotate(0)}
  50%{transform:rotate(3deg)}
}


/* =====================================================
   8️⃣ NATAL ORNAMENT
===================================================== */

.snowflakes{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.snowflake{
  position:absolute;
  width:8px;
  height:8px;
  background:#fff;
  border-radius:50%;
  opacity:.8;
  animation:snowFall linear forwards;
}

@keyframes snowFall{
  from{transform:translateY(-10px);opacity:0}
  20%{opacity:1}
  to{transform:translateY(110vh);opacity:0}
}

/* BTN GLOW */
.btn-glow {
    position: relative;
    z-index: 1;
    color: #fff;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.btn-glow::after {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, #f39c12, #e74c3c, #8e44ad, #3498db);
    background-size: 400% 400%;
    border-radius: 5px;
    z-index: -1;
    filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: glow 10s linear infinite;
}

.btn-glow:hover::after {
    opacity: 1;
}

@keyframes glow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Event-specific navbar background */
.navbar.event-ramadhan { background-color: #1e3a8a; }
.navbar.event-lebaran { background-color: #16a34a; }
.navbar.event-imlek { background-color: #dc2626; }
.navbar.event-natal { background-color: #b91c1c; }
.navbar.event-hutri { background-color: #f59e0b; }
.navbar.event-normal { background-color: #343a40; }
/* =====================================================
   9️⃣ RESPONSIVE
===================================================== */

@media(max-width:768px){
  .event-text{font-size:18px}
}