/* DIGILINE × JUAL LAGI 6.0 — Stylesheet */


        body { font-family: 'Inter', sans-serif; }
        html.dark body { background-color: #0a0a0a; }
        .reveal { opacity: 0; transform: translateY(24px); transition: all 0.6s cubic-bezier(0.16,1,0.3,1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .glass { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
        .gradient-text { background: linear-gradient(135deg, #f59e0b, #f97316); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .btn-primary { background: linear-gradient(135deg, #f59e0b, #f97316); color: #000 !important; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
        .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
        @keyframes marquee-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
    


@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-track:hover { animation-play-state: paused; }

/* Animated flowing border */
.animated-border-wrapper {
    position: relative;
    border-radius: 24px;
    padding: 3px;
}
.animated-border-wrapper::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0deg,
        transparent 60deg,
        #f59e0b 80deg,
        #f97316 100deg,
        #fbbf24 120deg,
        transparent 160deg,
        transparent 240deg,
        #f59e0b 260deg,
        #f97316 280deg,
        #fbbf24 300deg,
        transparent 340deg,
        transparent 360deg
    );
    animation: spin-border 3s linear infinite;
    z-index: 0;
}
.animated-border-wrapper::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 22px;
    background: #0a0a0a;
    z-index: 1;
}
html:not(.dark) .animated-border-wrapper::after {
    background: #f8fafc;
}
.animated-border-wrapper img {
    position: relative;
    z-index: 2;
    border-radius: 20px;
    display: block;
    width: 100%;
}
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes spin-border {
    to { --angle: 360deg; }
}



@keyframes border-beam {
    0%   { offset-distance: 0%; }
    100% { offset-distance: 100%; }
}
.sp-border-wrap {
    position: relative;
    border-radius: 0.75rem;
    background: transparent;
}
.sp-border-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    border: 1px solid rgba(245,158,11,0.25);
    pointer-events: none;
}
.sp-beam {
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    pointer-events: none;
}
.sp-beam::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f59e0b, #f97316, transparent);
    animation: beam-move 2.5s linear infinite;
    top: 0;
    left: -60px;
    box-shadow: 0 0 8px #f59e0b80;
}
@keyframes beam-move {
    0%   { left: -60px; top: 0; }
    25%  { left: calc(100%); top: 0; }
    25.1%{ left: calc(100% - 2px); top: 0; }
    50%  { left: calc(100% - 2px); top: 100%; }
    50.1%{ left: calc(100%); top: 100%; }
    75%  { left: -60px; top: 100%; }
    75.1%{ left: 0; top: 100%; }
    100% { left: 0; top: -4px; }
}