body { background: #080808; color: #eee; font-family: sans-serif; overflow-x: hidden; }
        #sidebar { position: fixed; top: 0; left: -280px; width: 260px; height: 100%; background: #121212; transition: 0.3s ease-in-out; z-index: 1000; padding: 20px; border-right: 1px solid #222; overflow-y: auto; }
        #sidebar.active { left: 0 !important; }
        .overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 999; backdrop-filter: blur(4px); }
        .overlay.active { display: block !important; }
        #login-modal { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.9); }
        #login-modal.active { display: flex; }
        .modal-content { background: #181818; padding: 25px; border-radius: 24px; width: 100%; max-width: 380px; border: 1px solid #333; }

    /* Kontainer tombol play di grid */
    .play-overlay { 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: 3.5rem; 
        height: 3.5rem; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        background: rgba(0, 0, 0, 0.4); 
        backdrop-filter: blur(8px); 
        border-radius: 50%; 
        border: 1px solid rgba(255, 255, 255, 0.15); 
        z-index: 20; 
        
        /* Efek muncul: defaultnya tidak terlihat, akan muncul saat hover */
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Icon Play Merah */
    .play-overlay i { 
        color: #ff0000 !important; 
        font-size: 1.5rem; 
    }

    /* Munculkan saat bagian 'group' (kotak video) di-hover */
    .group:hover .play-overlay {
        opacity: 1;
    }

        .btn-upload { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; background: #ff0000; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 100; box-shadow: 0 0 20px rgba(255,0,0,0.4); border: 4px solid #080808; cursor: pointer; }
        .tag-pill { background: #1d1d1d; padding: 8px 14px; border-radius: 8px; font-size: 11px; margin: 4px; display: inline-block; color: #999; border: 1px solid #2a2a2a; }
        #tag-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
        #tag-content.show { max-height: 1000px; overflow-y: auto; margin-top: 10px; }
        #btn-circle-bar {
    transition: stroke-dasharray 0.3s ease; /* Membuat gerakan progress tidak kaku */
}
#txt-views {
    display: inline-flex;
    flex-direction: column;
    overflow: hidden;
    vertical-align: middle;
    height: 1.2em; /* Sesuaikan dengan tinggi font */
}

.digit-container {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease-in-out;
}

.slide-active {
    transform: translateY(-50%); /* Menggeser dari angka lama ke baru */
}

/* Memastikan gambar video tidak gepeng */
.video-card img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Memastikan judul tidak merusak grid */
.video-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    min-height: 2.5rem; /* Menjaga tinggi tetap sama */
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.animate-float {
    animation: float 3s ease-in-out infinite;
}