.cx-file-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: system-ui, sans-serif;
    font-size: 14px;
    flex-wrap: wrap;
}

.cx-file-hidden-input {
    position: absolute;
    left: -9999px;
}

.cx-file-btn {
    cursor: pointer;
    background: #0d6efd;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #0a58ca;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(13,110,253,.3);
    transition: all .15s;
}

    .cx-file-btn:hover {
        background: #0b5ed7;
        box-shadow: 0 6px 14px rgba(13,110,253,.45);
    }

.cx-file-clear {
    cursor: pointer;
    background: #dc3545;
    color: #fff;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #bb2d3b;
    font-weight: 500;
    transition: all .15s;
}

    .cx-file-clear:hover {
        background: #b02a37;
    }

    /* Başlangıçta gizli olacak */
    .cx-file-clear.hidden {
        display: none;
    }

.cx-file-names {
    color: #555;
    font-size: 13px;
    min-height: 1.2em;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}