/* ════════════════════════════════════════
   BANNER CAROUSEL — JYWA Payment v2
   Slide penuh dengan konten terpusat, progress dots,
   auto-slide + swipe. Transisi halus.
   ════════════════════════════════════════ */

.carousel { position: relative; }

.carousel-viewport {
    border-radius: var(--radius);
    overflow: hidden;
    /* rasio konsisten biar tinggi slide seragam */
    aspect-ratio: 16 / 7;
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Slide: latar gelap + aurora corner, konten kiri ─── */
.banner-inner.slide {
    flex: 0 0 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface);
    overflow: hidden;
}
/* aurora glow di sudut kanan tiap slide — warna beda-beda per slide via nth */
.slide::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(300px 150px at 90% 110%, var(--slide-glow-a, rgba(56,225,255,0.14)), transparent 65%),
        radial-gradient(220px 130px at 8% -20%, var(--slide-glow-b, rgba(47,107,255,0.12)), transparent 60%);
}
.slide:nth-child(2)::before { --slide-glow-a: rgba(61, 220, 151, 0.13); --slide-glow-b: rgba(56, 225, 255, 0.10); }
.slide:nth-child(3)::before { --slide-glow-a: rgba(47, 107, 255, 0.16); --slide-glow-b: rgba(139, 92, 246, 0.10); }
.slide:nth-child(4)::before { --slide-glow-a: rgba(255, 201, 77, 0.11); --slide-glow-b: rgba(47, 107, 255, 0.12); }

.slide > * { position: relative; }

.banner-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--aurora);
    margin-bottom: 8px;
}
.banner-tag::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--aurora);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot { 50% { opacity: 0.3; } }

.banner-title {
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.01em;
    max-width: 230px;
}
.banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 11px;
    font-size: 12px;
    font-weight: 700;
    color: var(--aurora);
}
.banner-cta svg { width: 13px; height: 13px; }
.banner-emoji {
    font-size: 42px;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
    flex-shrink: 0;
}

/* ─── Progress dots: pill memanjang saat aktif ─── */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
}
.dot {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    border: none;
    background: var(--line-strong);
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.dot.active {
    width: 22px;
    background: linear-gradient(90deg, var(--aurora), var(--aurora-deep));
    box-shadow: 0 0 10px rgba(56, 225, 255, 0.55);
}

/* Desktop: sedikit lebih lega */
@media (min-width: 600px) {
    .carousel-viewport { aspect-ratio: 21 / 7; }
    .banner-inner.slide { padding: 24px 28px; }
    .banner-title { font-size: 17.5px; max-width: 320px; }
    .banner-emoji { font-size: 52px; }
}