/* Gaya untuk Drop Zone saat file diseret di atasnya */
#drop-zone.dragover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

.domain-badge {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* Gaya untuk Modal */
#preview-modal {
    transition: opacity 0.25s ease;
}

#preview-modal.show {
    opacity: 1;
}

#preview-modal.hide {
    opacity: 0;
}

/* Gaya untuk Progress Bar Lingkaran (akan dibuat oleh JS) */
#circular-progressbar svg {
    transform: rotate(-90deg);
}

#progress-text {
    font-size: 24px;
    font-weight: bold;
    fill: #10b981; /* Warna hijau Tailwind */
}

/* TAMBAHKAN CSS INI */
/* Pastikan kontainer progress bar memiliki posisi relatif */
#circular-progressbar {
    position: relative;
}

/* Gaya untuk Modal */
#preview-modal {
    transition: opacity 0.25s ease;
}

#preview-modal.show {
    opacity: 1;
}

#preview-modal.hide {
    opacity: 0;
}

/* Gaya untuk Drop Zone saat file diseret di atasnya */
#drop-zone.dragover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Gaya untuk Progress Bar Lingkaran */
#circular-progressbar {
    position: relative;
}

/* TAMBAHKAN CSS INI UNTUK MENCEGAH TEKS TERSELEKSI SAAT MENGgeser SLIDER */
#comparison-container {
    user-select: none;
}

/* TAMBAHKAN CSS INI */
#original-wrapper {
    /* Agar perpotongan gambar halus saat slider digeser */
    transition: clip-path 0.1s ease-out;
}
/* TAMBAHKAN CSS INI */
#original-preview {
    /* Agar perpotongan gambar halus saat slider digeser */
    transition: clip-path 0.1s ease-out;
}