body { font-family: 'Poppins', sans-serif; }

/* Teks Berjalan (Marquee) */
.topbar {
    overflow: hidden;
    background: linear-gradient(90deg, #1f140e, #0c0806);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.topbar__track {
    display: flex;
    gap: 32px;
    white-space: nowrap;
    width: max-content;
    padding: 10px 0;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f59e0b; /* Warna amber tailwind */
    animation: marquee 25s linear infinite;
}
@keyframes marquee { 
    from { transform: translateX(0); } 
    to { transform: translateX(-33.33%); } 
}

/* Overlay & Pengaturan Gambar Header */
.hero__overlay {
    background: 
        linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.8)),
        linear-gradient(90deg, rgba(0,0,0,0.4), rgba(0,0,0,0.15));
    z-index: 1;
}
.hero__image {
    transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease;
    filter: saturate(1.1) contrast(1.05);
}

/* 8 Efek Slider Animasi */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(1.03); filter: blur(6px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(3%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-3%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(1.12); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes zoomOut {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes blurIn {
  from { opacity: 0; filter: blur(14px); transform: scale(1.02); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-2deg) scale(1.04); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes liftIn {
  from { opacity: 0; transform: translateY(2%); }
  to { opacity: 1; transform: translateY(0); }
}

.is-fade { animation: fadeIn 1.15s ease; }
.is-slide-left { animation: slideLeft 1.15s ease; }
.is-slide-right { animation: slideRight 1.15s ease; }
.is-zoom-in { animation: zoomIn 1.15s ease; }
.is-zoom-out { animation: zoomOut 1.15s ease; }
.is-blur { animation: blurIn 1.15s ease; }
.is-rotate { animation: rotateIn 1.15s ease; }
.is-lift { animation: liftIn 1.15s ease; }