* {
    font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.btn-3d {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 0.65rem !important;
    cursor: pointer;
    outline: none;
    user-select: none;
    text-decoration: none;
    transition: transform 0.12s cubic-bezier(0, 0, 0.58, 1),
        box-shadow 0.12s cubic-bezier(0, 0, 0.58, 1),
        background-color 0.15s ease;
}

.btn-3d-primary {
    background-color: #3898ec !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 5px 0 #1d6fb8 !important;
}
.btn-3d-primary:hover {
    background-color: #4ca4f3 !important;
    box-shadow: 0 5px 0 #1d6fb8 !important;
    transform: translateY(-1px);
    color: #ffffff !important;
}
.btn-3d-primary:active {
    background-color: #3898ec !important;
    transform: translateY(4px) !important;
    box-shadow: 0 0 0 #1d6fb8 !important;
}

.btn-3d-success {
    background-color: #10b981 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 5px 0 #047857 !important;
}
.btn-3d-success:hover {
    background-color: #34d399 !important;
    box-shadow: 0 5px 0 #047857 !important;
    transform: translateY(-1px);
    color: #ffffff !important;
}
.btn-3d-success:active {
    background-color: #10b981 !important;
    transform: translateY(4px) !important;
    box-shadow: 0 0 0 #047857 !important;
}

.btn-3d-gray {
    background-color: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 5px 0 #cbd5e1 !important;
}
.btn-3d-gray:hover {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    box-shadow: 0 5px 0 #cbd5e1 !important;
    transform: translateY(-1px);
}
.btn-3d-gray:active {
    transform: translateY(4px) !important;
    box-shadow: 0 0 0 #cbd5e1 !important;
}

.btn-3d-sm {
    padding: 0.45rem 0.9rem !important;
    font-size: 0.875rem !important;
}
.btn-3d-sm.btn-3d-primary { box-shadow: 0 3px 0 #1d6fb8 !important; }
.btn-3d-sm.btn-3d-success { box-shadow: 0 3px 0 #047857 !important; }
.btn-3d-sm.btn-3d-gray    { box-shadow: 0 3px 0 #cbd5e1 !important; }
.btn-3d-sm:active { transform: translateY(3px) !important; box-shadow: 0 0 0 transparent !important; }


/* --------------------------------------------------------------------------
   Global Pengumuman Marquee (Mobile / Overflow)
   -------------------------------------------------------------------------- */
.landing-announcement-wrapper {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.landing-announcement-wrapper.is-marquee { justify-content: flex-start !important; }
.landing-announcement-wrapper.is-marquee .landing-announcement-content {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding-left: 100%;
    animation: landingMarqueeScroll 22s linear infinite;
}
.landing-announcement-wrapper.is-marquee:hover .landing-announcement-content {
    animation-play-state: paused;
}
@keyframes landingMarqueeScroll {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}