/* ============================================================
   [3] RUNNING TEXT CSS - MULTICOLOR + GARIS TEBAL SHADOW
   ============================================================ */

/* [3.1] WRAPPER - Pembungkus */
.running-wrapper {
    width: 100%;
    margin-top: 12px;
    padding: 0;
    background: transparent;
}

/* [3.2] CONTAINER RUNNING TEXT */
.running-text-container {
    width: 100%;
    background: linear-gradient(90deg, #000, #0a0f1c, #000);
    padding: 12px 0;
    overflow: hidden;
    position: relative;

    /* Garis atas-bawah tebal + shadow */
    border-top: 3px solid var(--orange);
    border-bottom: 3px solid var(--orange);
    box-shadow:
        0 -3px 12px rgba(255,140,0,0.5),
        0 3px 12px rgba(255,140,0,0.5),
        inset 0 3px 8px rgba(255,140,0,0.15),
        inset 0 -3px 8px rgba(255,140,0,0.15);
}

/* [3.3] TEKS MARQUEE */
.running-text-container marquee {
    font-family: 'Arial Black', 'Segoe UI', sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* [3.4] WARNA-WARNA TEKS */
.c-orange { color: var(--orange); }
.c-gold   { color: var(--gold); }
.c-cyan   { color: var(--cyan); }
.c-pink   { color: var(--pink); }
.c-green  { color: var(--green-neon); }
.c-white  { color: #FFFFFF; }
.c-purple { color: #A855F7; }

/* [3.5] RESPONSIVE HP */
@media (max-width: 480px) {
    .running-text-container {
        padding: 10px 0;
    }
    .running-text-container marquee {
        font-size: 12px;
        letter-spacing: 1px;
    }
}